Top 21 jQuery interview Questions and Answers

Hello guys, if you are preparing for web developer interviews then preparing for jQuery questions can benefit you. While many people will say that jQuery is dead but its not dead and I am still working with projects which are using jQuery for little to big things. That's why its important to know about basic jQuery concepts and interview questions based upon that. In the past, I have shared several JavaScript and web development interview questions and in this article I am going to share jQuery questions like what is $() etc. What are selectors? how does they work etc. You can use this questions to quickly revise key jQuery concepts for interviews.  So what are we waiting for, let's see the basic jQuery interview questions for web developers.

21 jQuery Interview Questions with Answers

Here are the most common jQuery questions form interviews which test the core jQuery concepts and check whether you have really used jQuery or not.

1.What is difference between class and id selector?  (answer)

An ID selector is used to uniquely identify an element but a class selector can identify more than one elements, usually used to select a group of elements)

2. How do you select all html elements form html page?  (answer)

 by using $("*"), also known as all jQuery selector

3. How do you get the checked checkbox using jQuery?  (answer)

By using :checked pseudo selector i.e. $("input[type=checkbox]:checked") will return all checked checkboxes from the page)

4. How do you get the all non checked checkbox?  (answer)

A follow-up question of previous one, you can use use not() selector form jQuery to solve this puzzle, $("input[type=checkbox]:not(:checked)") will return all unchecked check-boxes.

5. How do you get the value from a textbox using jQuery?  (answer)

simple, grab the text box using jQuery selector and call the val() method i.e. var value = $("#MyTextBox").val().

6. How do you set the value of a textfield?  (answer)

Again, follow-up of previous question, jQuery method is usually overloaded e.g. val() return value but val("some_value") will set the value. So following jQuery code will set the value i.e. $("#username").val("") will clear the text field with id as username. 

7. What is $ in jQuery? (answer)
It's alias of jQuery() function, instead of typing jQuery() every time, we type $()

8. When is $(document).ready() function is called?  (answer)

When the DOM is ready, i.e. page is fully loaded, parsed and DOM tree is constructed by browser. Here is a nice  jQuery cheat sheet which shows all the important selectors:

9/.How do you get the current URL using jQuery?  (answer)

By using the attr() function and location object from JavaScript i.e. $(location).attr(href) will return the full URL with http but without has value.

10. How do you get the has from currant URL? (answer)

Again, follow-up of previous jQuery question. You can use the hash property of location object i.e. $(location).attr(hash) in jQuery 1.5 or lower, and $(location).prop(hash) in jQuery 1.6 and higher version.

11. what is difference between attr() and prop()? (answer)

The attr() is old method which is used to return attribute and property until jQuery 1.5, later prop() was introduced in jQuery 1.6 to get the property of an element. 

12.  How do you remove an element using jQuery?  (answer)

You can use remove() or detach() function

13. What is difference between remove() and detach() function?  (answer)

detach allow you to hold the removed element to re-attach in future, remove() doesn't provide that option.

14.  What is static method in jQuery?  (answer)

Something which you can directly call as $.method()

15.  How do you get the all the nodes at same level of selected elements?  (answer)

By calling siblings() function

16,  How do you remove parent of parent of the selected element?  (answer)

By using $(".active").parent().parent().remove()

17.  Can we have multiple document.ready() function on the same page?  (answer)

Yes, We can have any number of document.ready() function on the same page)

18. What is jQuery.noConflict? (answer)

When you use multiple JavaScript like prototype along with jQuery there is a chance that $() is used as alias in other library too. By using jQuery.noConflict, jQuery relinquish control over $() alias.

19. What is difference between .js and .min.js jQuery script?  (answer)

First one is for development and not optimized for bandwidth, second one is for real, optimized for bandwidth e.g. no unnecessary whitespace to improve readability)

20. How do you check if String is numeric in jQuery?  (answer)

By using the isNumeric() function, introduced in jQuery 1.7)

21 What is difference between event.PreventDefault and event.stopPropagation in jQuery? (answer)

The event.preventDefault() stop the default action of an element from happening but event.stopPropagation() prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. For example if there is a link inside a div with a click function attached to it and div also has a click handler than click on link will prevent the click event propagation to the div.

That's all about these 21 jQuery interview questions and answers for web developers. With just 21 question I have tried to cover many essential jQuery concepts like $() function, document.ready(), selectors, and how to actually select elements etc. You can use these questions to not just prepare for your interview but also to learn jQuery better. 

All the best.