Top 45 jQuery Interview Questions and Answers You Need to Know

jQuery is an efficient & fast JavaScript Library created by John Resig in 2006. The motto of jQuery is – write less, do more. It is designed to simplify the client-side scripting of HTML. The main purpose of jQuery is to provide an easy way to use JavaScript on your website to make it more interactive and attractive.

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

DOM manipulation− jQuery makes the selection of DOM elements easy, traverse them and modify their content by using cross-browser open source selector engine.

Event handling− It provides an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

AJAX Support− jQuery helps you to develop a responsive and feature-rich website with AJAX technology.

Animations− This framework comes with plenty of built-in animation effects which you can use in your websites.

Lightweight − It is a very lightweight library – about 19KB in size.

Cross Browser Support− jQuery has cross-browser support and works well in IE 6.0+, Safari 3.0+, Chrome and Opera 9.0+.

There are many advantages of using jQuery. Some of them include :

It is like an enhanced version of JavaScript so there is no overhead in learning a new syntax.

jQuery has the ability to keep the code simple, readable, clear and reusable.

It has Cross-browser support.

This would remove the requirement for writing complex loops and DOM scripting library calls.

jQuery helps in event detection and handling.

It provides tons of plug-ins for all kind of needs.

A jQuery Selector is a function that uses the expressions to find out matching elements from a DOM based on the given criteria. In a simple language, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

Selecting an element in DOM is done with the help of $() construct with a string parameter containing any CSS selector expression. $() will return zero or more DOM elements on which you can apply any effect or style.

jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different javascript frameworks or libraries. When you use jQuery no-conflict mode, you replace the $ to a new variable and assign jQuery some other JavaScript libraries. Also, the $ is used as a function or variable name that jQuery has.

• .empty() – This method is used to remove all the child elements from matched elements.

Syntax-

$(selector).empty();
• .remove() – This method is used to remove all the matched element. It will remove all the jQuery data associated with the matched element.

Syntax-

$(selector).remove();
• .detach() – This method is same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

Syntax-

$(selector).detach();

jQuery provides amazing effects and you can apply them quickly with a simple configuration. The effect can be either hiding, showing, toggling, fadeout, fadein, fadeto and many more. Some other methods to provide effects include the following:

animate( params, [duration, easing, callback] ) This function makes custom animations for your HTML elements.

fadeIn( speed, [callback] ) This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.

fadeOut( speed, [callback] ) This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to “none” and firing an optional callback after completion.

fadeTo( speed, opacity, callback ) This function fade the opacity of all the matched elements to a specified opacity and firing an optional callback after completion.

stop( [clearQueue, gotoEnd ]) This function stops all the currently running animations.

Ajax allows the user to exchange data with a server and update parts of a page without reloading the entire page. Some of the functions of ajax include:

$.ajax() – This is considered to be the most low level and basic of functions. It is used to send requests. This function can be performed without a selector.

$.ajaxSetup() – This function is used to define and set the options for various ajax calls.

$.getJSON() – This is a special type of shorthand function which is used to accept the url to which the requests are sent. Optional data and optional callback functions are also possible in such functions.

There are two different methods in jQuery to change the width of an element. The first way is to use .css(‘width’) and other way is to use .width().

For example-

$('#mydiv').css('width','300px');
$('#mydiv').width(100);
The difference in .css(‘width’) and .width() is the data type of value we specify or return from both the functions. In .css(‘width’) we have to add px in the width value while in .width() we don’t have to add px.

The param() method is used to represent an array or an object in a serialized manner. While making an ajax request we can use these serialize values in the query strings of URL.

Syntax:

$.param(object | array, boolValue)
“object | array” specifies an array or an object to be serialized.

“boolValue” specifies whether to use the traditional style of param serialization or not.

To continue reading more questions, click here