Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 99
Q1101:
How do you define what should happen when a click event fires on all <p> elements?
A. $("p").click();
B. $("p").click(function(){ // action here });
C. $("p").hide();
D. $("p").show();
Correct Answer:
B
Chapter: 99
Q1102:
Fill in the blank: To respond to a click event in jQuery, you use $("p").click(function(){ ______ });
A. // code here
B. // action here
C. // event here
D. // action;
Correct Answer:
B
Chapter: 99
Q1103:
What does $("p").click(function(){ // action goes here!! }); do?
A. Hides all <p> elements
B. Displays all <p> elements
C. Executes the provided function when a <p> is clicked
D. Selects the first <p> element
Correct Answer:
C
Chapter: 99
Q1104:
Fill in the blank: The jQuery syntax $("element").event(function(){ _____ }); allows you to define what should happen when the specified event occurs.
A. // action
B. // event
C. // action goes here
D. // function
Correct Answer:
C
Chapter: 99
Q1105:
Which of the following is a valid jQuery event syntax for a click event?
A. $("p").click()
B. $("p").event()
C. $("p").trigger("click")
D. $("p").on("click", function(){ });
Correct Answer:
D
Chapter: 99
Q1106:
Fill in the blank: The jQuery method $("p").click(); is used to ______.
A. Select <p> elements
B. Assign a click event handler to <p> elements
C. Hide <p> elements
D. Show <p> elements
Correct Answer:
B
Chapter: 99
Q1107:
What action does the following jQuery code perform? $("p").click(function(){ alert("Clicked!"); });
A. Hides all <p> elements
B. Displays an alert with the message "Clicked!"
C. Selects all <p> elements
D. Shows an alert with the message "Clicked!"
Correct Answer:
B
Chapter: 99
Q1108:
Fill in the blank: To trigger a function when a <p> element is clicked, you would use $("p").click(function(){ ______ });
A. hide();
B. show();
C. alert("Message");
D. console.log("Clicked");
Correct Answer:
C
Chapter: 99
Q1109:
What does the following code do? $("button").click(function(){ $("p").hide(); });
A. Hides all <button> elements
B. Shows all <p> elements when a button is clicked
C. Hides all <p> elements when a button is clicked
D. Shows all <p> elements when a button is clicked
Correct Answer:
C
Chapter: 100
Q1110:
What does $(document).ready(function(){ // action here }); do?
A. Hides all elements
B. Executes a function when the document is fully loaded
C. Displays an alert
D. Shows the document
Correct Answer:
B
Chapter: 100
Q1111:
Which method is used to hide an HTML element when it is clicked?
A. mouseenter()
B. dblclick()
C. click()
D. blur()
Correct Answer:
C
Chapter: 100
Q1112:
Fill in the blank: $("p").click(function(){ $(this).______; }); hides the current <p> element.
A. show();
B. fadeOut();
C. hide();
D. slideUp();
Correct Answer:
C
Chapter: 100
Q1113:
What does the mouseenter() method do?
A. Shows an alert when an element is clicked
B. Executes a function when the mouse enters an element
C. Hides an element when the mouse leaves it
D. Changes the background color on click
Correct Answer:
B
Chapter: 100
Q1114:
Fill in the blank: To show an alert when the mouse is clicked and held down over an element, use $("#p1").______(function(){ alert("Mouse down over p1!"); });
A. mousedown()
B. mouseup()
C. mouseenter()
D. hover()
Correct Answer:
A
Chapter: 100
Q1115:
What does $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); do?
A. Executes the function when the mouse clicks
B. Hides the element when the mouse leaves it
C. Executes two functions, one on mouseenter and one on mouseleave
D. Changes the background color on click
Correct Answer:
C
Chapter: 100
Q1116:
Fill in the blank: $("input").focus(function(){ $(this).______("background-color", "#cccccc"); }); sets the background color when an input field gets focus.
A. fadeOut();
B. css();
C. hide();
D. show();
Correct Answer:
B
Chapter: 100
Q1117:
How do you attach multiple event handlers to a <p> element using the on() method?
A. $("p").on({ mouseenter: function(){ }, click: function(){ } });
B. $("p").click(function(){ }, mouseenter(function(){ });
C. $("p").on("click", function(){ }, "mouseenter", function(){ });
D. $("p").bind({ mouseenter: function(){ }, click: function(){ } });
Correct Answer:
A
Chapter: 100
Q1118:
Fill in the blank: To hide all <p> elements when they are clicked, use $("p").______(function(){ $(this).hide(); });
A. click()
B. dblclick()
C. mouseenter()
D. blur()
Correct Answer:
A
Chapter: 100
Q1119:
What is the purpose of the on() method in jQuery?
A. To attach one or more event handlers
B. To hide all elements
C. To display an alert
D. To select HTML elements
Correct Answer:
A
Chapter: 101
Q1120:
What does the fadeIn() method do in jQuery?
A. Fades in the selected elements
B. Fades out the selected elements
C. Toggles between fading in and out
D. Hides the selected elements
Correct Answer:
A