Without a doubt, jQuery has given a much needed boost to JavaScript, a
language so useful but equally underrated at times. Before jQuery comes
into picture, we used to write lengthy JavaScript code not just for
bigger but even for smaller functionality. Those code were at times both
difficult to read and maintain. Having written JavaScript before using
this excellent library, I realized 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 just beginners but also experienced developers, including HTML and JavaScript. Since jQuery is relatively new, most interview questions are asked from core jQuery library including
selectors,
DOM manipulation and
jQuery basics. In this article, I am sharing
a list of 16 jQuery questions asked to HTML and JavaScript programmers in different interviews. Some of this questions also asked in
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 role demands multiple skills e.g. Java,
jQuery, it's not expected from you to know every minor detail or
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 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 library 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
telephonic 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 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 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, Interview will ask you to write code using ID and class selector. 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 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
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 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.
6. Difference between JavaScript window.onload event and jQuery ready function? (answer)
This is the follow-up of previous
jQuery interview question. 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. See answer article for more deep discussion.
7. How do you find all selected options of HTML select tag? (answer)
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
<select> 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
<select> tag.
8. What is each() function in jQuery? How do you use it? (answer)
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.
9. How do you add an HTML element in DOM tree? (answer)
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.
10. Can you write jQuery code to select all links, which is inside paragraphs? (answer)
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 (
<a> tag) nested inside paragraphs (
<p> tag).
11. Difference between $(this) and this keyword in jQuery? (answer)
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).
12. How do you retrieve attribute of an HTML tag using jQuery e.g. href of links? (answer)
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'));
});
13. How do you set 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 difference between detach() and remove() method in jQuery? (answer)
Though both
detach() and
remove() method is used to remove a DOM element,Main difference between them is that
detach() keep track of the last element detached, so that it can be reattached, while
remove()
method does keep reference of last removed method. This is one of the
many jQuery interview question from DOM manipulation. You can also take a
look on
appendTo() for adding element into DOM.
15. How do you add and remove CSS classes to an element using jQuery? (answer)
By using
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 main advantage of loading jQuery library using CDN? (answer)
This is slightly advanced jQuery question, and don't expect that jQuery
beginners can answer that. 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
same CDN, than it won't download it again. Since now days, almost many
public websites use jQuery for user interaction and animation, there is
very good chance that browser already have jQuery library downloaded.
Curious reader, please see the answer for in depth analysis.
That's all on this
list of 16 jQuery interview questions and answers for beginners.
As I said already, these questions are pretty basic, but most likely
asked to web developers including Java. For an Interviewer, you can use
this question to check if candidate has really used jQuery or not. Since
an Interview for a client side position almost always contains loads of
questions from HTML, CSS and JavaScript, you got to prepare that as
well, along with jQuery questions. By the way, if you have faced any
other question on jQuery interviews and wants to share with us, you can
do so by commenting in this article. You can also asked any jQuery
question, asked to you on interviews.
