Javatpoint Logo
Javatpoint Logo

jQuery MCQ (Multiple Choice Questions)

1) Who developed jQuery, and in which year it was first released?

  1. John Richard in 2001
  2. Mark Bensman in 2004
  3. John Resig in 2006
  4. None of the above

Answer: (c) John Resig in 2006

Explanation: jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is currently headed by Timmy Wilson and maintained by a team of developers.


2) jQuery is a -

  1. JavaScript method
  2. JavaScript library
  3. JSON library
  4. PHP method

Answer: (b) JavaScript library

Explanation: jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It is a small, light-weight and fast JavaScript library.


3) Which of the following sign is used as a shortcut for jQuery?

  1. the % sign
  2. the & sign
  3. the $ sign
  4. the @ sign

Answer: (c) the $ sign

Explanation: Every jQuery selector start with this dollar sign $(). This sign is known as the factory function. It uses the three basic building blocks while selecting an element in a given document.


4) $(this) in jQuery is used when -

  1. an HTML element references the entire document
  2. an HTML element references its own action
  3. an HTML element references the action of its parent element
  4. All of the above

Answer: (b) an HTML element references its own action

Explanation: $(this) and this refers to the same element. But they are used in a different way. When 'this' is wrapped in $(), it becomes the jQuery object, and it is used when an HTML element refers to its own action.


5) Which of the following jQuery method is used to hide the selected elements?

  1. The hidden() method
  2. The hide() method
  3. The visible(false) method
  4. The display(none) method

Answer: (b) The hide() method

Explanation: The jQuery hide() method is used to hide the selected elements.


6) Which jQuery method is used to set one or more style properties to the selected element?

  1. The html() method
  2. The style() method
  3. The css() method
  4. All of the above

Answer: (c) The css() method

Explanation: The jQuery css() method is used to get (return) or set style properties or values for selected elements. It facilitates you to get or set one or more style properties.


7) Which of the following jQuery method can be used to deal with the name conflicts?

  1. The conflict() method
  2. The nameConflict() method
  3. The noConflict() method
  4. None of the above

Answer: (c) The noConflict() method

Explanation: Many JavaScript libraries also use the $ sign as the shortcut, along with the jQuery on the same page. But if two different frameworks use the same alias, a conflict could occur, and one of the frameworks might stop working. The noConflict() method is implemented in jQuery to deal with such situations. It is used to avoid the conflict of using $ variable with other libraries. This method releases the hold on the $ (dollar) identifier so that other libraries can use it.


8) The correct syntax to set the background color of all h1 elements to yellow in jQuery -

  1. $("h1").style("background-color","yellow");
  2. $("h1").html("background-color","yellow");
  3. $("h1").css("background-color","yellow");
  4. $("h1").layout("background-color","yellow");

Answer: (c) $("h1").css("background-color","yellow");

Explanation: In jQuery, using the css() method, we can set the style of an HTML element. The correct syntax for setting the background color to yellow of an h1 element is - $("h1").css("background-color","yellow");


9) Which of the following jQuery method is used to attach a handler to an event?

  1. unbind() method
  2. attach() method
  3. bind() method
  4. None of the above

Answer: (c) bind() method

Explanation: The jQuery bind() event is used to attach one or more event handlers for selected elements from a set of elements. It specifies a function to run when the event occurs.


10) The jQuery method used to perform an asynchronous HTTP request -

  1. jQuery ajaxSetup() method
  2. jQuery ajaxSync() method
  3. jQuery ajax() method
  4. None of the above

Answer: (c) jQuery ajax() method

Explanation: AJAX is an acronym for Asynchronous JavaScript and XML. The ajax() method in jQuery performs an AJAX request. It sends an asynchronous HTTP request to the server.


11) Which of the following jQuery method is used to stop jQuery for few milliseconds?

  1. stop() method
  2. delay() method
  3. slowdown() method
  4. pause() method

Answer: (b) delay() method

Explanation: The jQuery delay() method is used to delay the execution of functions in the queue. It is the best method to make a delay between the queued jQuery effects. The jQuery delay() method sets a timer to delay the execution of the next item in the queue.


12) What does the syntax $("p.para") will select?

  1. The first paragraph element with class = "para"
  2. The first paragraph element with id = "para"
  3. The first paragraph element with name = "para"
  4. All paragraph elements with class = "para"

Answer: (d) All paragraph elements with class = "para"

Explanation: In jQuery, the correct syntax for selecting all paragraph elements with class = "para" is - $("p.para").


13) Which of the jQuery function prevents the code from running before the loading of the document finishes?

  1. $(document).load()
  2. $(document).unload()
  3. $(document).ready()
  4. $(document).trim()

Answer: (c) $(document).ready()

Explanation: The ready() function in jQuery executes the code only when the DOM (Document object model) is fully loaded. The code inserted between $(document).ready() is executed only when a page is ready for JavaScript code to execute.


14) The jQuery used to find all next sibling elements after the current element is -

  1. find() method
  2. nextAll() method
  3. siblings() method
  4. None of the above

Answer: (b) nextAll() method

Explanation: The nextAll() method is used to return all next siblings of the specified selector. This method traverses forwards along with the next siblings of DOM elements. Whereas the siblings() method returns all next and previous siblings of the specified selector.


15) The correct syntax for selecting the first paragraph element with id p1 is -

  1. $("p.p1:first")
  2. $("p#p1:first")
  3. $("p1#p:first")
  4. None of the above

Answer: (b) $("p#p1:first")

Explanation: In jQuery, the correct syntax for selecting the first paragraph element with id = "p1" is - $("p#p1:first").


16) Which of the following jQuery method is used to check whether or not the selected elements have the specified class name?

  1. hasClass() method
  2. addClass() method
  3. find() method
  4. toggleClass() method

Answer: (a) hasClass() method

Explanation: The jQuery hasClass() method is used to check whether selected elements have a specified class name or not. It returns TRUE if the specified class is present in any of the selected elements; otherwise, it returns FALSE.


17) Which of the following jQuery method is used to set the value of an element?

  1. val() method
  2. setValue() method
  3. content() method
  4. None of the above

Answer: (a) val() method

Explanation: There are two usages of the jQuery val() method. It can be used to set the value of every matched element. It can also be used to get the current value of the first element in the set of matched elements.


18) The jQuery method used to set the width property of an element is -

  1. setWidth( val ) method
  2. width( val ) method
  3. setCSSWidth( val ) method
  4. None of the above

Answer: (b) width( val ) method

Explanation: jQuery width() method is used to return or set the width of the matched element. When this method is used to return the width, it returns the width of the first matched element. When this method is used to set the width, it sets the width for every matched element.


19) The jQuery method used to get all ancestors of the matched set of elements is -

  1. parents() method
  2. parent() method
  3. offsetParent() method
  4. None of the above

Answer: (a) parents() method

Explanation: The parents() method in jQuery is used to get all ancestor elements of the given selector. This method traverses upwards from the parent element, all the level up in the DOM tree and returns all ancestors of the selected element.


20) The jQuery method used to remove the set of matched elements is -

  1. delete() method
  2. empty() method
  3. remove() method
  4. None of the above

Answer: (c) remove() method

Explanation: The jQuery remove() method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). This method also removes the data and the events of the selected elements.


21) The jQuery method used for parsing the JSON text is -

  1. parseJSON() method
  2. parseHTML() method
  3. noConflict() method
  4. each() method

Answer: (a) jQuery.parseJSON() method

Explanation: The jQuery parseJSON() method takes a JSON string and returns a JavaScript object. The specified JSON string must follow the strict JSON format. Passing an incorrect string will cause a JS exception.


22) What does the syntax $("div#myDiv .para") will select?

  1. It will select all elements with class = "para" within the div element with id = "myDiv"
  2. It will select all elements with id = "myDiv" within the div element with class = "para"
  3. All div elements with class = "para" or with id = "myDiv"
  4. None of the above

Answer: (a) It will select all elements with class = "para" within the div element with id = "myDiv"

Explanation: The jQuery syntax $("div#myDiv .para") will select all elements with class = "para" within the div element with id = "myDiv".


23) Which of the following jQuery method is used to reduce the set of matched elements to a single element?

  1. isEqual() method
  2. val() method
  3. eq() method
  4. delegate() method

Answer: (c) eq() method

Explanation: The eq() method in jQuery returns an element with the given index. This method reduces the set of elements to the one with a specific index. The index can either be positive or negative.


24) The toggle() method in jQuery is used to -

  1. toggle between the hide() and show() methods
  2. toggle between the fadeIn() and fadeOut() methods
  3. toggle between the slideUp() and slideDown() methods
  4. None of the above

Answer: (a) toggles between the hide() and show() methods

Explanation: The jQuery toggle() is a special type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.


25) Which of the following method is used to toggle between the fadeIn() method and fadeOut() method?

  1. toggle() method
  2. fadeToggle() method
  3. slideToggle() method
  4. animate() method

Answer: (b) fadeToggle() method

Explanation: jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it will make them faded out, and if they are faded out, it will make them faded in.


26) The :even and :odd filters in jQuery are used to -

  1. determine if the number is odd or even
  2. determine if the index position of an element is odd or even
  3. both (a) & (b)
  4. None of the above

Answer: (b) determine if the index position of an element is odd or even

Explanation: The :even selector in jQuery is used to select the elements with even index numbers (such as 2, 4, 6, etc.). The index starts at 0. The :odd selector in jQuery is used to select the elements with an odd index number (such as 1, 3, 5, etc.).


27) If the names of variables are the same, then which of the following type of variable takes precedence?

  1. local variable
  2. global variable
  3. both (a) & (b)
  4. None of the above

Answer: (a) local variable

Explanation: In the function's body, the precedence of the local variable is more than the global variable with the same name. If the name of the function's local variable is the same as the name of the global variable, then the local variable hides the global variable.


28) Which of the following is the correct code in jQuery to make all div elements 150px high?

  1. $("div").height(150);
  2. $("div").height = "150" ;
  3. $("div").height = 150 ;
  4. None of the above

Answer: (a) $("div").height(150);

Explanation: The jQuery height() method is used to set the height of every matched element or return the current computed height for the first element. When it is used to set the height, then it will set the height of every matched element, and when it is used to return the height, the height() method will return the height of the first matched element.


29) Which of the following is the basic requirement to start with jQuery?

  1. To use jQuery, first, we have to buy the jQuery library from its official website.
  2. To use jQuery, we don't require anything as it is already built in the browser we are using.
  3. To use jQuery, we have to refer to its hosted library, or we can download the latest jQuery version from its official website.
  4. All of the above

Answer: (c) To use jQuery, we have to refer to its hosted library, or we can download the latest jQuery version from its official website.

Explanation: To start with jQuery, we need to refer to its library, or we can download the latest version of jQuery from jQuery.com.


30) CDN stands for -

  1. Content development network
  2. Content delivery network / Content distribution network
  3. Communication development network
  4. None of the above

Answer: (b) Content delivery network / Content distribution network

Explanation: CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time.


31) The jQuery method used to find all previous sibling elements of the current element is -

  1. nextAll() method
  2. prevAll() method
  3. siblings() method
  4. None of the above

Answer: (b) prevAll() method

Explanation: The prevAll() method is jQuery's inbuilt function that returns all previous siblings of the selected element. This method traverses backward along with the previous siblings of DOM elements. Whereas the siblings() method returns all next and previous siblings of the specified selector.


32) The jQuery method used to return the direct parent element of the selected element is -

  1. parents() method
  2. parent() method
  3. offsetParent() method
  4. None of the above

Answer: (b) parent() method

Explanation: The parent() method in jQuery finds the direct parent of the given selector. It is an inbuilt function in jQuery. This method only traverses a single level up in the DOM tree and returns the direct parent of the selected element.


33) The jQuery method used to load data using HTTP get is -

  1. get(URL, data, callback, dataType) method
  2. post(URL, data, callback, dataType) method
  3. ajax() method
  4. ajaxSend() method

Answer: (a) get(URL, data, callback, dataType) method

Explanation: The get() method is an inbuilt function in jQuery. It loads data from the server using the HTTP GET request. It is used for making a simple GET request. It returns XMLHttpRequest object.


34) Can we use multiple document.ready() function on the same page?

  1. Yes
  2. No
  3. Can't say
  4. Not possible

Answer: (a) Yes

Explanation: We can use any number of document.ready() function on the same page. For example:

$(document).ready(function() {    
$("h1").css("background-color", "red");    
 });    

$(document).ready(function() {    
$("p").css("background-color", "pink");    
 });

35) The code $("p").css("background-color","yellow") is equivalent to -

  1. jQuery("p").css("background-color","yellow")
  2. document("p").css("background-color","yellow")
  3. jq("p").css("background-color","yellow")
  4. None of the above

Answer: (a) jQuery("p").css("background-color","yellow")

Explanation: Instead of using the $ (dollar sign), we can use jQuery as a function name. For example:

jQuery(document).ready(function() {    
jQuery("p").css("background-color", "yellow");    
});

36) Which of the following jQuery method is used to add/remove one or more classes from the selected elements?

  1. toggleClass() method
  2. fadeToggle() method
  3. toggle() method
  4. slideToggle() method

Answer: (a) toggleClass() method

Explanation: The jQuery toggleCLass() method is used to add or remove one or more classes from the selected elements. This method toggles between adding and removing one or more class name. It checks each element for the specified class names. If the class name is already set, it removes, and if the class name is missing, it adds.


37) What does the syntax $("p") will select?

  1. All paragraph elements
  2. Only first paragraph element
  3. Only last paragraph element
  4. None of the above

Answer: (a) All paragraph elements

Explanation: In jQuery, the syntax $("p") will select all paragraph elements.


38) What does the syntax $("p span") will select?

  1. All span elements inside the paragraph element
  2. Only first span element inside the paragraph element
  3. Only last span element inside the paragraph element
  4. None of the above

Answer: (a) All span elements inside the paragraph element

Explanation: In jQuery, the syntax $("p span") will select all span elements inside a paragraph element.


39) The selector $(":disabled") will select -

  1. The elements with the text ":disabled"
  2. The elements that do not include the text ":disabled"
  3. The hidden elements
  4. All disabled input elements

Answer: (d) All disabled input elements

Explanation: The :disabled selector is used to select all disabled form elements. It is a pseudo-class selector that can also be used to style the disabled UI elements. This selector can only be used for the HTML elements that support the disabled attribute.


40) Which of the following selector in jQuery is used to select the elements with lesser index value than the value of its index parameter?

  1. jQuery :lt() selector
  2. jQuery :gt() selector
  3. jQuery :lang() selector
  4. jQuery :nth-child selector

Answer: (a) jQuery :lt() selector

Explanation: The :lt() selector selects the elements that have lesser index value than the value specified in the index parameter of the :lt() selector. The index starts at 0.


41) Which of the following method in jQuery is used to make copies of the set of matched elements?

  1. jQuery detach() method
  2. jQuery delegate() method
  3. jQuery clone() method
  4. jQuery serialize() method

Answer: (c) jQuery clone() method

Explanation: The jQuery clone() method is used to make copies of the set of matched elements. It also makes copies of their child nodes, texts and attributes. The clone() method is a convenient way to duplicate elements on a page.


42) The jQuery method which is used to remove the tabs, space and the line breaks from the beginning and end of the specified string is -

  1. jQuery empty() method
  2. jQuery trim() method
  3. jQuery remove() method
  4. jQuery serialize() method

Answer: (b) jQuery trim() method

Explanation: The trim() method in jQuery is used to remove the space, tabs, and all line breaks from the starting and end of the specified string. This method does not remove these characters if these whitespace characters are in the middle of the string.


43) Which of the following jQuery method returns the direct children of the selected element?

  1. jQuery ancestors() method
  2. jQuery next() method
  3. jQuery children() method
  4. None of the above

Answer: (c) jQuery children() method

Explanation: The children() method in jQuery returns the direct children of the given selector. It is an inbuilt method in jQuery.


44) Which of the following jQuery method returns all siblings of the selected element?

  1. jQuery ancestors() method
  2. jQuery siblings() method
  3. jQuery parents() method
  4. None of the above

Answer: (b) jQuery siblings() method

Explanation: As its name implies, the siblings() method returns all siblings of the selected element. It is an inbuilt method in jQuery.


45) The jQuery selector used to select the elements containing the specified string is -

  1. jQuery :contains selector
  2. jQuery :lang() selector
  3. jQuery :nth-child selector
  4. None of the above

Answer: (a) jQuery :contains selector

Explanation: The :contains() selector in jQuery selects the elements that contain the specified string. The matching string can be directly appeared in the selected element or in the descendants of that element.


46) The jQuery selector used to select the elements with the specified language code is -

  1. jQuery :contains selector
  2. jQuery :lang() selector
  3. jQuery :nth-child selector
  4. None of the above

Answer: (b) jQuery :lang() selector

Explanation: The :lang() selector is used to select the elements with the specified language code. It selects the elements whose language value is equal to the supplied language code. We can use the lang attribute in HTML to determine the language value of the elements.


47) Which of the following jQuery method is used to replace all selected elements with new HTML elements?

  1. jQuery replaceWith() method
  2. jQuery replaceAll() method
  3. jQuery load() method
  4. jQuery delegate() method

Answer: (b) jQuery replaceAll() method

Explanation: The replaceAll() method in jQuery replaces all selected elements with new HTML elements. This method replaces the elements and their contents with other HTML elements. It returns the selected elements with new content.


48) The jQuery method used to trigger a specified event handler for the selected element is -

  1. jQuery trigger() method
  2. jQuery toggle() method
  3. jQuery eq() method
  4. jQuery next() method

Answer: (a) jQuery trigger() method

Explanation: The trigger() method is used to trigger the specified event handler for every matched element. This method can also be used to trigger the default behavior for the selected elements.


49) Which of the following method is used to remove the specified attribute from the selected element?

  1. jQuery remove() method
  2. jQuery empty() method
  3. jQuery removeAttr() method
  4. jQuery error() method

Answer: (c) jQuery removeAttr() method

Explanation: The removeAttr() method is used to remove attributes from the element. This method is used to remove the specified attribute from the selected element.


50) Which of the following jQuery method is used to merge the content of two or more objects into the first object?

  1. jQuery extend() method
  2. jQuery eq() method
  3. jQuery data() method
  4. jQuery param() method

Answer: (a) jQuery extend() method

Explanation: The jQuery extend() method together merges the content of two or more objects into the first object. This method returns the merged object.


Next TopicjQuery Tutorial




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA