jQuery Interview Questions and Answers

jQuery is a free and open-source JavaScript library. It is designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. jQuery has an easy-to-use API that works across many browsers. UI related functions can be written with minimal lines of code using jQuery. The main purpose of jQuery is to make it easier to use JavaScript on your website. Current jQuery Stable release is 3.5.1 and released on May 2020.

jQuery is not a programming language but a well written JavaScript code. It is used to traverse documents, event handling, Ajax interaction and Animation.

• It is used to develop browser compatible web applications
• Simple and easy codes
• It’s Improve the performance of an application
• It is Very fast and extensible
• Number of plug-ins
• UI related functions are written in minimal lines of codes

• DOM elements and manipulations
• HTML,CSS manipulations
• AJAX Support
• JSON Parsing
• Cross-browser support
• Events Handling Methods
• Effective and animations
• Deferred and promise objects
• inArray()and jQuery.each().
• Utilities

Some of the effects methods are:

• Show()
• Hide()
• Toggle()
• FadeIn()
• FadeOut()

Efficiency of web page increases when minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster.

The command $.ui.version returns jQuery UI version.

Explain the scenarios jQuery can be used?

jQuery can be used in following scenarios:

• Apply CSS static or dynamic
• Calling functions on events
• Manipulation purpose
• Mainly for Animation effects

A ‘jQuery connect’ is a plugin used to connect or bind a function with another function. Connect is used to execute function from any other function or plugin is executed.

Following is the list of important core features supported by jQuery –

DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.

Event handling − The jQuery offers 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 − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.

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

Lightweight − The jQuery is very lightweight library – about 19KB in size ( Minified and gzipped ).

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

Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

The simple difference is that JavaScript is a language while jQuery is a built-in library built of JavaScript. jQuery simplifies the use of JavaScript language.

jQuery uses features like Sliding, File uploading and accordian in web applications.

Browser compatibility of jQuery plugin is an issue and needs lot of time to fix it.

Following are the basic selectors in jQuery:

• Element ID
• CSS Name
• Tag Name
• DOM hierarchy

jQuery.data methods is used to associate the data with the DOM nodes and the objects. This data method makes the jQuery code clear and concise.

Each function is used to iterate each and every element of an object. It is used to loop DOM elements, arrays and the object properties.

Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.

jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

The four parameters are

• URL : Need to specify the URL to send the request
• type : Specifies type of request(Get or Post)
• data :  Specifies data to be sent to server
• Cache : Whether the browser should cache the requested page

The jQuery filter is used to filter the certain values from the object list based on the criteria. Example is to filter certain products from the master list of products in a cart website.

The $() function is an alias of jQuery() function. It is used to wrap any object into jQuery object which later facilitates you to call various method defined jQuery object. You can pass a selector string to $() function and it will return jQuery object which contains an array of all matched DOM elements.

A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.

Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope.

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, 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. jQuery selectors start with the dollar sign and parentheses – $().

CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.

There are two types of CDNs:

• Microsoft – Load jQuery from Ajax CDN
• Google – Load jQuery from Google libraries API

Dollar ($) sign is used as a shortcut for jQuery.

jQuery is a Javascript file and it is single javascript file that contains common DOM, event effects and Ajax functions.

Following are the ways to include jQuery in a page:

• Local copy inside script tag
• Remote copy of jQuery.com
• Remote copy of Ajax API
• Local copy of script manager control
• Embedded script using client script object

jQuery.ajax method is used for asynchronous HTTP requests.

No, jQuery is not a replacement of JavaScript.

• Just a JavaScript enhancement
• Coding is simple, clear, reusable
• Removal of writing more complex conditions and loops

jQuery data method is used to associate data with DOM nodes and JavaScript objects. This method will make a code very concise and neat.

We can have only one onload function but we can have more than one document. Ready function. Document. Ready function is called when DOM is loaded but onload function is called when DOM and images are loaded on the page.

jQuery each function is used to loop through each and every element of the target jQuery object. It is also useful for multi element DOM, looping arrays and object properties.

• CSS Selector
• XPath Selector
• Custom Selector

‘NoConflict’ method is used to reference a jQuery and save it in a variable. That variable can be used instead of Sign.

ID and Element are the fastest selectors in jQuery.

Class selectors are the slowest selectors in jQuery.

If you want to work with an element on the web page, first you need to find it. Selectors are used to find the HTML elements in jQuery. There are many types of selectors. Some basic selectors are:

Name: It is used to selects all elements which match with the given element Name.

#ID: It is used to selects a single element which matches with the given ID

.Class: It is used to selects all elements which match with the given Class.

Universal (*): It is used to selects all elements available in a DOM.

Multiple Elements E, F, G: It is used to selects the combined results of all the specified selectors E, F or G.

Attribute Selector: It is used to select elements based on its attribute value.

jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different js frameworks or libraries. When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assigning to jQuery some other JavaScript libraries. Also use the $ (Which is the default reference of jQuery) as a function or variable name what jQuery has. And in our development life, we are not at all strict to only jQuery.

jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on toggle(), Show() and hide() methods. Similarly we can use other methods as in 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.

JavaScript is a major scripting programming language which is used to make websites more responsive and interactive, whereas jQuery is a library written using JavaScript. jQuery simplifies the use of JavaScript language.

Example

JavaScript+-

function changeColor(color) {

   document.body.style.background = color;

}

Onload=”changeColor('blue’);”

jQuery

$ (‘body’) .css (‘background’, ‘#0000FF’);

Both the code snippets are doing the same work of changing the background color. But jQuery takes less code.

jQuery library provides several techniques for adding animation to a web page. Frequently used effects are hiding, showing, toggling, fadeout, fadein, fadeto and many more.

• .hide() : Hide the matched elements.
• .show() : Display the matched elements.
• .toggle() : Display or hide the matched elements.
• .fadeOut() : Hide the matched elements by fading them to transparent.
• .fadeIn() : Display the matched elements by fading them to opaque.
• .fadeTo() : Adjust the opacity of the matched elements.

Know More about jQuery effects @See more..

jQuery toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. It shows the hidden elements and hides the shown element.

Syntax:

$(selector).toggle(speed, easing, callback); 

$(selector).toggle(display); 

speed: It is used to specify the speed of the toggle effect.

easing: It is used to specify the speed of the element at the different points of animation.

callback: It is used to specify the function to be called after completion of toggle() effect.

display: If true, it displays an element. If false, it hides the element.

Know more about toggle() method @ See more..

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it will make them faded out and if they are faded out it will make them faded in.

Syntax:

$(selector).fadeToggle(speed, easing, callback);

speed: It is used to specify the speed of the delay

easing: It is used to specify the speed of element to different points of animation.

callback: It is used to specify the function to be called after completion of fadeToggle() effect.

Know more about fadetoggle() method @See more..

jQuery delay() method is used to delay the execution of functions in the queue. It sets a timer to delay the execution of the next item in the queue.

Syntax:

$(selector).delay(speed,queue);

speed: It is used to specify the speed of the delay

queue: It is used to specify the name of the queue. Its default value is “fx” the standard queue effect.

jQuery html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.

Syntax:

$(selector).html();

$(selector).html(content);

$(selector).html(function (index, currentcontent));

content: It is used to specify the new content for the selected elements.

function: It is used to specify the function that returns the new content for the selected elements.

jQuery CSS() method is used to change style property of the selected element. It facilitates you to get one or more style properties.

Syntax:

$(selector).css(propertyname);

jQuery ajax() method is used to perform an AJAX request or asynchronous HTTP request.

Syntax:

$.ajax(url);

$.ajax(url,[options]);

jQuery filter() method is used to filter out all the elements that do not match the selected criteria and those matches will be returned.

Syntax:

$(selector).filter(criteria, function(index))

jQuery serialize() method is used to create a text string in standard URL-encoded notation. This method can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, <select>, etc…

Syntax:

$ (selector).serialize();

jQuery val() method is used to get the current value of the first element in the set of matched elements or set the value of every matched element.

Syntax:

$(selector).val(function(index,currentvalue));

jQuery animate() method is used to perform a custom animation of a set of CSS properties.

Syntax:

$(selector).animate({params}, [duration], [easing], [callback]);

jQuery each() method is used to iterate over all the DOM elements in the jQuery object and executes a function for each matched element. This method is used in manipulating multi-element DOM.

Syntax:

$(selector).each(function(index, element));

jQuery hide() method is used to hide the selected element.

Syntax:

$(selector).hide([duration][,easing][,complete]);

jQuery param() method is used to create a serialized representation of an object.

Syntax:

$.param(obj, val)

By default, jQuery uses “$” as a shortcut for “jQuery”. Yes, instead of $ (dollar sign) we can use jQuery as a function name.

Example

$("p").hide();

jQuery("p").hide();

jQuery Selectors are used to select and manipulate HTML elements in a webpage. It always start with dollar sign and parentheses. They are very important part of jQuery library. There are three types of selectors in jQuery

• CSS Selector
• Custom Selector
• XPath Selector

Method chaining allows us to perform multiple action on the same set of elements, all within a single line of code. It’s possible because most of the jQuery methods return a jQuery object that can be further used to call another method.

Example

<script>

(document).ready(function(){

  ("button").click(function(){

    ("#p1").css("color", "red").slideUp(2000).slideDown(2000);

  });

});

</script>

Above example chains together the css(), slideUp(), and slideDown() methods. The “p1” element first changes to red, then it slides up, and then it slides down

jQuery stop() function is used to stop all the animations currently running on the selected elements. It stops the animation before it is finished and jQuery.fx.off() method globally disables all the animations.

Syntax:

$(selector).stop(stopAll, goToEnd);

jQuery.fx.off = [true | false ] ;

What is the difference between jquery.min.js and jquery.js?

What is the difference between alert() and confirm()?

What is the difference between onclick and onsubmit?

What is the difference between .js and .min.js?

What is the difference between text() and HTML()?

What is the difference between setTimeout() and setInterval() methods?

What is the difference between $(window).load and $(document).ready?

What is the difference between bind() and live()?

What is the difference between prop() and attr()?

What is the difference between width() vs css(‘width’)?

What is the difference between jQuery.size() and jQuery.length ?

What is the difference between JQuery.attr() and JQuery.pop()?

What is the difference between event.PreventDefault and event.stopPropagation?

What is the difference between .get(), [], and .eq()?

What is the difference between .bind(), .live(), and .delegate()?

What is the difference between $ and $.fn?

What is the difference between delegate() and live()?

What is the difference between jQuery.get() and jQuery.ajax()?

What is the difference between detach() and remove()?

What is the difference between size and length of jQuery?

What is the difference between map() and Grep()?

What is the difference between ID selector and class selector?

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