Without a doubt, jQuery has given a much needed boost to JavaScript, a language so useful but equally underrated at times. Before jQuery came into picture, we used to write lengthy JavaScript code not just for bigger but even for smaller applications. That code was at times both difficult to read and maintain.
Having written plain JavaScript before using this excellent library, I realized the true power of jQuery, just after using it for a month. Given it’s huge popularity, jQuery interview questions are increasingly asked in any web developer interview, not for just beginners but also experienced developers, along with questions about HTML and JavaScript. Since jQuery is relatively new, most interview questions revolve around the core jQuery library including selectors, DOM manipulation and jQuery basics.
In this article, I am sharing a list of 20 jQuery questions asked to HTML and JavaScript programmers in different interviews. Some of these questions might also be asked during a Java Web development interview, where it’s required to work on both Server side (Spring, Servlet and JSP) and Client side (HTML, CSS, JavaScript and jQuery).
If you are going for an interview where the role demands multiple skills e.g. Java, jQuery, it’s not expected from you to know every minor detail or to have a comprehensive knowledge of jQuery, but if you are going for a purely client side development role, you might get more tricky and advanced jQuery questions than those mentioned in this article. Nevertheless, you can use it to quickly revise some of the most frequently asked jQuery questions on interviews, but they are mostly suited for web developers with 2 to 5 years of experience, especially in Java stack.
jQuery Interview Questions and Answers
JavaScript is a standard for client side scripting and jQuery makes writing JavaScript much easier. You can achieve a lot more by just writing couple of lines of jQuery code. It is one of the most used JavaScript libraries and there is hardly any new project which is using plain JavaScript without jQuery. What this means to you, a Java web developer is that you will bound to see couple of jQuery interview questions in Java web development interviews.
Earlier it was mostly HTTP, HTML, CSS and JavaScript but now days apart from JavaScript fundamentals, people like to know whether you are familiar with jQuery or not. This list of 16 jQuery questions is prepared for web developers and can be very handy to revise key concept before a phone or screening round of interview. If you are new to jQuery then it will also help you to understand fundamentals better and inspire you to explore more.
1. What is $() in jQuery library? (answer)
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. You have five <div> element in your page? How do you select them using jQuery? (answer)
Another fundamental jQuery question based on selector. jQuery supports different kinds of selector e.g. ID selector, class selector and tag selector. Since in this question nothing has been mentioned about ID and class, you can use the tag selector to select all div elements. jQuery code : $(“div”), will return a jQuery object contain all five div tags. For more detailed answer, see the article.
3. Difference between ID selector and class selector in jQuery? (answer)
If you have used CSS, then you might know the difference between ID and class selector, It’s the same with jQuery. ID selector uses ID e.g. #element1 to select element, while class selector uses CSS class to select elements. When you just need to select only one element, use ID selector, while if you want to select a group of element, having same CSS class than use class selector. There is good chance that during the interview you will be asked to write code using ID and class selector. The following jQuery code uses ID and class selectors:
$('#LoginTextBox') -- Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') -- Returns all elements with CSS class active.From a syntax perspective, as you can see, another difference between ID and class selector is that former uses “#” and later uses “.” character. More detailed analysis and discussion, see answer.
4. How do you hide an image on a button click using jQuery? (answer)
This jQuery interview question is based on event handling. jQuery provides good support for handling events like button click. You can use following code to hide an image, found using Id or class. What you need to know is the hide() method and how to setup an even handler for button, to handle clicks, you can use following jQuery code to do that :
$('#ButtonToClick').click(function(){
$('#ImageToHide').hide();
});I like this jQuery question, because it’s like a practical task and also code is not difficult to write.
5. What is $(document).ready() function? Why should you use it? (answer)
This is one of the most important and frequently asked questions. The 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 the DOM tree has been constructed. The 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.
6. Difference between JavaScript window.onload event and jQuery ready function? (answer)
This is the follow-up of the previous question. The main difference between the JavaScript onload event and the jQuery ready function is that the 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, then the user might experience significant delay on the execution of code defined in the window.onload event.
On the other hand, the jQuery ready() function only waits for the DOM tree, and does not wait for images or external resource loading, something that means faster execution. Another advantage of using the jQuery $(document).ready() is that you can use it at multiple times in your page, and the browser will execute them in the order they appear in the HTML page, as opposed to the onload technique, which can only be used for a single function. Given this benefits, it’s always better to use the jQuery ready() function rather than the JavaScript window.onload event.
7. How do you find all the selected options of HTML select tag? (answer)
This is one of the tricky jQuery question on Interviews. This is a basic question, but don’t expect every jQuery beginner to know about this. You can use the following jQuery selector to retrieve all the selected options of <select> tag with multiple=true :
$('[name=NameOfSelectedTag] :selected')This code uses the 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
<select> tag.
8. What is the each() function in jQuery? How do you use it? (answer)
each() function is like an 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 is asked as a follow-up of the previous question e.g. how to show all selected options in alert box. We can use the above selector code to find all the selected options and then we can use the each() method to print them in an alert box, one by one, as shown below:
$('[name=NameOfSelectedTag] :selected').each(function(selected){
alert($(selected).text());
});The text() method returns text for that option.
9. How do you add an HTML element in DOM tree? (answer)
You can use the jQuery method appendTo() to add an HTML element in DOM tree. This is one of the many DOM manipulation methods that 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.
10. Can you write jQuery code to select all links, which is inside paragraphs? (answer)
Another jQuery interview question based on selectors. This is also required to write a jQuery one liner, like many other questions. You can use the following jQuery snippet to select all links (<a> tag) nested inside paragraphs (<p> tag).
11. Difference between $(this) and this keyword in jQuery? (answer)
This could be a tricky question for many jQuery beginners, but indeed it’s a simple 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).
12. How do you retrieve attribute of an HTML tag using jQuery e.g. href of links? (answer)
The attr() method is used to retrieve the value of an attribute of any HTML element. You first need to select all links or specified links using the jQuery selector and then you can apply the attr() method to get the value of their href attribute. The code below will find all links from a page and return the href value :
$('a').each(function(){
alert($(this).attr('href'));
});13. How do you set an attribute using jQuery? (answer)
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.
14. What is the difference between detach() and remove() methods in jQuery? (answer)
Though both detach() and remove() methods are used to remove a DOM element, the main difference between them is that detach() keeps track of the last element detached, so that it can be reattached, while the remove() method does keep a reference of the last removed method. You can also take a look at the appendTo() method for adding elements into DOM.
15. How do you add and remove CSS classes to an element using jQuery? (answer)
By using the addClass() and removeClass() jQuery methods. This can be very handy, while dynamically changing class of elements e.g. marking them inactive or active and using class “.active” etc.
16. What is the main advantage of loading jQuery library using CDN? (answer)
This is a slightly advanced jQuery question. Well, apart from many advantages including reducing server bandwidth and faster download, one of the most important is that, if browser has already downloaded same jQuery version from the same CDN, then it won’t download it again. Since nowadays, many public websites use jQuery for user interaction and animation, there is a very good chance that the browser already has the jQuery library downloaded.
17. What is the difference between jQuery.get() and jQuery.ajax() method?
The ajax() method is more powerful and configurable, allows you to specify how long to wait and how to handle error. The get() method is a specialization to just retrieve some data.
18. What is method chaining in jQuery? What is the benefit of using method chaining?
Method chaining is calling another method on the result of another method, it results in clean and concise code, single search over DOM so better performance.
19. What happens if you return false from a jQuery event handler?
It is used to stop the event from bubbling up.
20. Which one is more efficient: document.getElementbyId( “myId”) or $(“#myId)?
The first one because its a direct call to the JavaScript engine.
| Reference: | Top 20 jQuery Interview Questions Answers for JavaScript Programmers from our WCG partner Javin Paul at the Javarevisited blog. |
