jQuery may not dominate modern front-end development the way it once did, but it still powers millions of websites and remains relevant in enterprise applications, legacy systems, WordPress themes/plugins, and rapid prototyping. If you're preparing for a jQuery interview, this guide covers the most commonly asked questions—ranging from beginner concepts to advanced techniques.
1. What is $() in jQuery library?
The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love it's brevity. $() function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object. You can even pass a selector string to $() function, and it will return jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it's quite basic, it is used to differentiate between developer who knows jQuery or not.
2. What is $(document).ready() function? Why should you use it?
This is one of the most important and frequently asked jQuery Interview question. ready() function is used to execute code when document is ready for manipulation. jQuery allows you to execute code, when DOM is fully loaded i.e. HTML has been parsed and DOM tree has been constructed. Main benefit of $(document).ready() function is that, it works in all browser, jQuery handles cross browser difficulties for you. For curious reader see answer link for more detailed discussion. You can also see first chapter of Head First jQuery to learn more about this key function.
3. Difference between JavaScript window.onload event and jQuery ready function?
Main difference between JavaScript onload event and jQuery ready function is that former not only waits for DOM to be created but also waits until all external resources are fully loaded including heavy images, audios and videos. If loading images and media content takes lot of time that user can experience significant delay on execution of code defined in window.onload event. On the other hand jQuery ready() function only wait for DOM tree, and does not wait for images or external resource loading, means faster execution. Another advantage of using jQuery $(document).ready() is that you can use it multiple times in your page, and browser will execute them in the order they appear in HTML page, as opposed to onload technique, which can only be used for a single function. Given this benefits, it's always better to use jQuery ready() function than JavaScript window.onload event.
4. How do you find all selected options of HTML select tag?
This is one of the tricky jQuery question on Interviews. It's still a basic, but don't expect every jQuery beginners to know about this. You can use following jQuery selector to retrieve all selected options of tag with multiple=true :
$('[name=NameOfSelectedTag] :selected')
This code uses attribute selector in combination of :selected selector, which returns only selected options. You can tweak this and instead of name, you can even use id attribute to retrieve tag.
5. What is each() function in jQuery? How do you use it?
each() function is like Iterator in Java, it allows you to iterate over a set of elements. You can pass a function to each() method, which will be executed for each element from the jQuery object, on which it has been called. This question sometime asked as follow-up of previous question e.g. how to show all selected options in alert box. We can use above selector code to find all selected option and than further can use each() method to print them in alert box, one by one, as shown below:
$('[name=NameOfSelectedTag] :selected').each(function(selected){
alert($(selected).text());
});
text() method returns text for that option.
6. How do you add an HTML element in DOM tree?
You can use jQuery method appendTo() to add an HTML element in DOM tree. This is one of the many DOM manipulation method jQuery provides. You can add an existing element or a new HTML element, appendTo() add that method in the end of a particular DOM element.
7. Can you write jQuery code to select all links, which is inside paragraphs?
Another jQuery interview question based on selector. This also required to write jQuery one liner, like many other questions. you can use following jQuery snippet to select all links ( tag) nested inside paragraphs (tag).
8. Difference between $(this) and this keyword in jQuery?
Could be a tricky questions for many jQuery beginners, but indeed it's simplest one. $(this) returns a jQuery object, on which you can call several jQuery methods e.g. text() to retrieve text, val() to retrieve value etc, while this represent current element, and it's one of the JavaScript keyword to denote current DOM element in a context. You can not call jQuery method on this, until it's wrapped using $() function i.e. $(this).
9. How do you retrieve attribute of an HTML tag using jQuery e.g. href of links?
attr() method is used to retrieve value of an attribute of any HTML element. You first need to select all links or specified links using jQuery selector and than you can apply attr() method to get value of there href attribute. Below code will find all links from a page and return href value :
$("a").each(function(){
alert($(this).attr('href'));
});
10. How do you set attribute using jQuery?
One more follow-up question of previous jQuery question, attr() method is overload like many other methods in JQuery. If you call attr() method with value e.g. attr(name, value), where name is the name of attribute and value is the new value.
