jQuery MCQ (Multiple Choice Questions)

Q 1. Which of the following sign is used as a shortcut for jQuery?

A. the % sign

B. the $ sign

C. the & sign

D. the @ sign

Show Answer

Answer:-B. 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.

Q 2. $(this) in jQuery is used when –

A. an HTML element references the entire document

B. an HTML element references its own action

C. an HTML element references the action of its parent element

D. All of the above

Show Answer

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.

Q 3. Which of the following jQuery method is used to hide the selected elements?

A. The hidden() method

B. The visible(false) method

C. The hide() method

D. The display(none) method

Show Answer

Answer:-C. The hide() method

Explanation

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

Q 4. Which jQuery method is used to set one or more style properties to the selected element?

A. The css() method

B. The style() method

C. The html() method

D. All of the above

Show Answer

Answer:-A. 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.

Q 5. Which of the following jQuery method can be used to deal with the name conflicts?

A. The conflict() method

B. The nameConflict() method

C. The noConflict() method

D. None of the above

Show Answer

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.

Q 6. The correct syntax to set the background color of all h1 elements to yellow in jQuery –

A. $(“h1”).style(“background-color”,”yellow”);

B. $(“h1”).html(“background-color”,”yellow”);

C. $(“h1”).layout(“background-color”,”yellow”);

D. $(“h1”).css(“background-color”,”yellow”);

Show Answer

Answer:-D. $(“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”);

Q 7. Which of the following jQuery method is used to attach a handler to an event?

A. bind() method

B. attach() method

C. unbind() method

D. None of the above

Show Answer

Answer:-A. 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.

Q 8. The jQuery method used to perform an asynchronous HTTP request –

A. jQuery ajaxSetup() method

B. jQuery ajaxSync() method

C. jQuery ajax() method

D. None of the above

Show Answer

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.

Q 9. Which of the following jQuery method is used to stop jQuery for few milliseconds?

A. stop() method

B. slowdown() method

C. delay() method

D. pause() method

Show Answer

Answer:-C. 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.

Q 10. What does the syntax $(“p.para”) will select?

A. The first paragraph element with class = “para”

B. The first paragraph element with id = “para”

C. The first paragraph element with name = “para”

D. All paragraph elements with class = “para”

Show Answer

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”).

Q 11. Which of the jQuery function prevents the code from running before the loading of the document finishes?

A. $(document).load()

B. $(document).unload()

C. $(document).trim()

D. $(document).ready()

Show Answer

Answer:-D. $(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.

Q 12. The jQuery used to find all next sibling elements after the current element is –

A. find() method

B. nextAll() method

C. siblings() method

D. None of the above

Show Answer

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.

Q 13. The correct syntax for selecting the first paragraph element with id p1 is –

A. $(“p#p1:first”)

B. $(“p.p1:first”)

C. $(“p1#p:first”)

D. None of the above

Show Answer

Answer:-A. $(“p#p1:first”)

Explanation

In jQuery, the correct syntax for selecting the first paragraph element with id = “p1” is – $(“p#p1:first”).

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

A. toggleClass() method

B. addClass() method

C. find() method

D. hasClass() method

Show Answer

Answer:-D. 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.

Q 15. Which of the following jQuery method is used to set the value of an element?

A. val() method

B. setValue() method

C. content() method

D. None of the above

Show Answer

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.

Q 16. The jQuery method used to set the width property of an element is –

A. setWidth( val ) method

B. setCSSWidth( val ) method

C. width( val ) method

D. None of the above

Show Answer

Answer:-C. 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.

Q 17. The jQuery method used to get all ancestors of the matched set of elements is –

A. parent() method

B. parents() method

C. offsetParent() method

D. None of the above

Show Answer

Answer:-B. 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.

Q 18. The jQuery method used to remove the set of matched elements is –

A. delete() method

B. remove() method

C. empty() method

D. None of the above

Show Answer

Answer:-B. 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.