jQuery Interview Questions and Answers

jQuery is one of the most popular JavaScript framework for web development. It is mainly
used language in web development companies. If you are searching for a job as a web
developer, you should know the jQuery framework.

What is jQuery?

Ans. jQuery is not a programming language, but it is a well-written form of JavaScript

language.

It is used for :

 Document traversing
 Event handling
 Animations
 AJAX interaction

What are the features of jQuery?

Ans. jQuery provides the features as follow:

 Cool plugins
 AJAX support
 DOM selection
 Changing CSS
 Event Handling
 Quickly implementation of animations and effects.

Enlist the different types of selectors in jQuery?

Ans. jQuery has three types of selectors.

 CSS Selector
 XPath Selector
 Custom Selector

What is the jQuery selector?

Ans. jQuery selector is used to selecting one or more HTML elements from the webpage.
It always starts with $() symbol.
Jquery supports CSS, Xpath, and custom selectors.

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

Give examples of select by tag, class, and id in jQuery.

Ans.

Select by tag name: In this selection, HTML elements are selected according to their tag
names.

Example:

$(h2)

It will select all the h2 tags in HTML.

Select by id: In this selection, HTML elements are selected according to their id.

Example:

$(“#id1”)

It will select all tags having id1 as their id.

Select by class: In this selection, HTML elements are selected according to their class names.

Example:

$(“.c1”)

It will select all tags having c1 as their class name.

What are the advantages of jQuery?

Ans. The advantages of Jquery are:

 Keep the code simple, reusable, and readable.

 It has cross-browser support.
 It has millions of plugins.
 It has a syntax similar to JS, so there is no need to learn a new syntax.
 Event handling is comfortable in jQuery.

What is the difference between body.onload() and document.ready() function?

Ans. The difference between body.onload() and document.ready() is as follows:

body.onload() document.ready()
jQuery has more than one copy of
jQuery has only one copy of body.onload()
document.ready()
It is called when all elements such as Images, DOM,
It is called when only DOM is loaded.
and Resources are loaded.

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

Differentiate the width() and CSS(‘width’) in jQuery.

Ans. In jQuery width() and CSS(‘width’), both are used to change the width of an element.
In CSS(‘width’), we have to specify the width value in px, but in width(), there is no need to
specify the width value in px.

Example:

$(‘#id1’).width(100);
$(‘#id2’).css(‘width’ , 100px);

When we want to get the width value of elements, then the first element will return the 100 as
value. And the second element will return 100px as the value because of CSS(‘width’)
function.

Explain the bind() method in jQuery.

Ans. The bind() method only attach the event with the elements which are attached before the
DOM is loaded.

Example:

<script>
$("p").bind("click", function(){
alert("I am was clicked.");
});
</script>

The above code will attach the function code with only <p> tag in HTML code.

Read Also: Top 25 Web Designing Interview Questions

Explain live() method.

Ans. The live() method is used to attach an event with elements of two types first, which is
attached before the DOM is loaded and second for future elements.

The live() function doesn’t work in chaining. It can only apply to one selector.

Example:

$(document).ready(function(){
$("button").live("click", function(){
$("p").slideToggle();
});
});
</script>

The above Jquery will toggle the <p> tag when the button is clicked.

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

Explain the delegate() function.

Ans. The delegate() method is used to attach an event with the element of two types first,
which is attached before the DOM the loaded and second for future elements. It can work in
the chaining.

Example:

<script>
$(document).ready(function(){
$("div").delegate("p", "click",function(){
$("p").css("font-size", "30px");
});
});
</script>

The above code work in chaining as selects the <p> tag inside the <div> tag and attach event
using delegate() method.
When you click on the <p> tag, it will change the font size to 30px.

What is the param() method?

Ans. The param() is used to arrange the data of an array or object in a serial manner. This
feature is useful while making an AJAX request.

Syntax:

$.param(object | array, boolValue);

Example:

<script>
$(document).ready(function(){
personObj = new Object();
personObj.firstname = "John";
personObj.lastname = "Doe";
personObj.age = 20;
personObj.eyecolor = "black";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>

The above code puts the serialize object inside the div element when the button is clicked.

Output:

firstname=John&lastname=Doe&age=20&eyecolor=black

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

Differentiate the size() and length() methods in jQuery.

Ans.

 The size() returns the numbers of elements in the object.

 The length() method also does the same thing.
 The length() method is preferred because it does not require the function call, while in
size() method, there is an overhead of function call.

How to read, write, and delete cookies in jQuery?

Ans. The dough is used for cookie-related operations. It is an easy and powerful feature of
jQuery.

1. Create a cookie
Syntax: $.dough(“cookie_name”, “cookie_value”);
2. Read Cookie
Syntax: $.dough(“cookie_name”);
3. Delete cookie
Syntax: $.dough(“cookie_name”, “remove”);

What is the difference between this and $(this) in jQuery?

Ans. The this and $(this) both are used to reference the element in HTML. This is the
traditional method, and $(this) is then used to point a jQuery object on which the jQuery
function will be applied.

Give an example of AJAX functions available in jQuery.

Ans. jQuery supports the following AJAX functions:

1. $.ajax() - It is the basic function of AJAX. It is used to send the ajax request.
2. $.ajaxSetup() - It is used to set the options for ajax calls.
3. $.getJSON - It accepts the URL and sends the request to that URL.

Explain the empty() method.

Ans. The empty() method removes all child elements of the matched element.

Note: It does not remove the current element.

Syntax:

$(selector_name).empty();

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

Example:

<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>

The above code will remove all the content inside the <div> tag when the button is clicked.

Explain the remove() method.

The remove() method is used for removing only matched elements. It will remove the data
inside the matched element.

Syntax:

$(selector_name).remove();

Example:

<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>

The above code removes the tag having #div1 as an id and also removes the data inside it
when the buttons will be clicked.

Explain the detach() method.

Ans. The detach() method is as same as remove() method, but the only difference is that it
will not remove the data inside the selected element. It keeps a copy of the detached elements
data.

Syntax:

$(selector_name).detach();

Example:

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.

The above code detaches the <p> tag when the button will be clicked and also make a copy
of the data so that it can be reinserted at the latter time.

What are the parameters used for the jQuery AJAX method?

Ans. The following parameters are used in the jQuery AJAX method.

 URL – Specify the URL to send the request

 Type – Specifies the type of request(Get or Post)
 Cache – the browser should cache the requested page.
 Data – It Specifies data to be sent to the server

Conclusion

That is all for jQuery Interview Questions for experienced, and if you are a fresher, don’t
worry if you were not able to answer some tricky questions. I am sure you will feel confident
after preparing for the Jquery interview using this series of questions.

I hope you found this post informative.

Thank you for reading :)

Visit https://errorsea.com/interview-questions/ for more interview questions and answers.