JQuery Interview Questions And Answers 2021

Q1. What is jQuery?

jQuery is a feature-rich JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax much simpler and faster. 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.

Q2. What is the difference between JavaScript and jQuery?

JavaScript is an interpreted programming language whereas jQuery is a library with APIs built for JavaScript. jQuery simplifies the use of the JavaScript language.

Q3. What are the effects methods used in jQuery?

jQuery enables us to add effects on a web page. jQuery effects can be categorized into fading, sliding, hiding/showing and animation effects. jQuery provides many methods for effects on a web page

These are the effects methods used in jQuery:

show() – It displays or shows the selected elements.
hide() – It hides the matched or selected elements.
toggle() – It shows or hides the matched elements. In other words, it toggles between the hide() and show() methods.
fadeIn() – It shows the matched elements by fading it to opaque. In other words, it fades in the selected elements.
fadeOut() – It shows the matched elements by fading it to transparent. In other words, it fades out the selected elements.

Q4. What is jQuery Ajax?

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data and exchange data with the server without a browser page refresh. JQuery is a great tool which provides a rich set of AJAX methods to develop next-generation web applications.

Q5. What does ajax() method do?

This method sends an asynchronous http request to the server.

Q6. What does the ajax method load() do?

The load() method sends an http request to load the html or text content from the server and adds them to the DOM element(s).

Q7. What are the jQuery Ajax Events?

The jQuery library also includes events which will be fired based on the state of the Ajax request, these are called Ajax events.

Q8 What does the jQuery Ajax event method ajaxComplete() do ?

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

Q9 What does the jQuery ajax event method ajaxStart() do?

 Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

Q10 What are Events in jQuery?

 Responding to user actions on a webpage is called events. jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed.

Q11. Is jQuery library used for server scripting or client scripting?

It is a library for client-side Scripting.

Q12. Is jQuery a W3C standard?

No, jQuery is not a W3C standard.

Q 13What is the starting point of code execution in jQuery?

$(document).ready() function is the starting point of jQuery code. It is executed when DOM is loaded.

Q14 What is the basic requirement to start with the jQuery?

You need refer to its library to start with jQuery. You can download the latest version of jQuery from jQuery.com.

Q15 What is the difference between find and children methods?

Find method is used to find all levels down the DOM tree while children method is used to find single level down the DOM tree.

Q16 What is a CDN?

CDN stands for Content Delivery Network or Content Distribution Network. It is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time. These are several companies that provide free public CDNs:

Google

Microsoft
Yahoo

Q17 What is the goal of CDN and what are the advantages of using CDN?

The primary goal of the CDN is to provide content to the end-users with high availability and high performance.

Advantages of using CDN:

It reduces the load from the server.
It saves bandwidth. jQuery framework is loaded faster from these CDN.
If a user regularly visits a site which is using jQuery framework from any of these CDN, it will be cached.

Q18 What are the selectors in jQuery? How many types of selectors in jQuery?

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

Name: It is used to select all elements which match with the given element Name.
#ID: It is used to select a single element which matches with the given ID
.Class: It is used to select all elements which match with the given Class.

Universal (*): It is used to select 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.

Q19 What is a use of jQuery filter?

jQuery filter is used to filter the specific values from the object. It filters the result of your original query into specific elements.

Q20 What are the different types of selectors in jQuery?

There are three types of selectors in jQuery:

CSS Selector

Custom Selector
XPath Selector

Q21 What is the difference between the ID selector and class selector in jQuery?

ID selector and class selector are the same as they are in CSS. ID selector uses ID while class selector uses a class to select elements.

You use an ID selector to select just one element. If you want to select a group of elements, having the same CSS class, use class selector.

Q22 What is Jquery Connect?

The jQuery connect is a plugin that is used to bind or connect a function to another function. It executes a function when a function from another object is executed. It is similar to assigning a handler for another function. Connect also lets you connect a function to a DOM object. With connect, you bind more than one function.

Example

$.connect(obj1, ‘fun1’, onj1, fun2);

Here we are binding fun2 function of object 2 to the fun1 function of object 1. So, when fun2 is executed, fun1 will also be executed.

Q23. What is use of $.noConflict?

The $.noConflict() is used to provide the $ variable to the library that is implemented first. It is used to resolve any conflicts between the $ objects of other libraries and $ variables that represent jQuery.

Example

$.noConflict

Code that uses $ object of other libraries can be written here without any conflict between the $ (i.e), jQuery.

Q24. Is jQuery a W3C standard?

No. JQuery is not a W3C standard. It is just a JavaScript library that provides an abstraction to the functions executed in JavaScript.

Q25. What is the use of jQuery filter?

The filter method in the jQuery returns certain elements that match the specified criteria. You can specify a criterion with the filter method and apply it to DOM elements. It removes the elements that do not match the specified criteria and allows only that matches. It works like a search function.

Syntax

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

Here the criteria specify an expression that you want to apply to the DOM elements for filtering. You can specify multiple criteria separated by a comma. The function is optional that runs on each specified element. It returns true if the element matches the criteria or false otherwise.

Q26. What are deferred and promise object in jQuery?

The deferred object in jQuery is used to create a promise. After creating a promise, jQuery changes its state to resolved or rejected. Deferred is used to provide a promise to the calling code in your own function.

The promise is set on a deferred object that will be executed when the deferred collection is complete. The state of the promise cannot be changed. The deferred object is used to create a promise.

Q27. What are the advantages of JQuery ?

There are many advantages of using JQuery. Some of them are :

It is more like a JavaScript enhancement so there is no overhead in learning a new syntax.

It has the ability to keep the code simple, readable, clear and reusable.
Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
It would eradicate the requirement for writing complex loops and DOM scripting library calls.
Event detection and handling.
Tons of plug-ins for all kind of needs.

Q28. Why jQuery is used?

jQuery is very compact and well-written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.

It helps to

Improve the performance of the application

Develop most browser compatible web page
Implement UI related critical functionality without writing hundreds of lines of codes
Fast
Extensible – jQuery can be extended to implement customized behavior

Other advantages of jQuery are

No need to learn fresh new syntax’s to use jQuery, knowing simple JavaScript syntax is enough
Simple and Cleaner code, no need to write several lines of codes to achieve complex functionality.

Q29. What is chaining in jQuery?

Chaining in jQuery lets you run multiple statements one after another on the same element. To chain multiple commands, append each jQuery command to the previous one using dot(.). Chaining allows you not to use one selector more than once for performing an action as all the actions are performed at once. It speeds up the time taken to execute the code as the compiler need not call a selector more than one time.

Example

$(“#h1”).css(“color”, “blue”).slideUp(200).slideDown(100);

In the above statement, the color, slideup, and slidedown action are applied on the heading selector in the same line using chaining.

Q30. What is jQuery UI?

As the name suggests, jQuery UI is a bunch of GUI widgets, animation effects, and themes. It is implemented using jQuery, CSS, and HTML. It is an open-source JavaScript library that is first released by the jQuery Foundation in 2007 and is now under the MIT license. It is one of the popular JavaScript libraries that is used in some of the popular websites for designs and animations like Pinterest, PayPal, Netflix, and IMDb.

Q31. What is $() in jQuery?

The jQuery() can also be written as $(). It is used as a selector for searching through the DOM elements that match the provided selector. It searches within the DOM element at the document root.

Example

$(“h1”).hide() ;

In the above statement, $() selects the h1 heading and applies the provided action. It hides all the heading h1 tags in the document.

Q32. What are plugins in JQuery?

Plugin in jQuery is a file written in standard JavaScript code. This file contains some methods that can be used with jQuery methods. These plugins can be downloaded from the official repository of the jQuery plugins. The plugin can be included in the jQuery file similar to other libraries in the head of the document. You can even create your own plugin.

Example of a plugin

<head>

</head>

Q33. How to disable animation in jQuery?

The jQuery stop() function is used to stop all the animations currently running on the selected elements. It stops the animation before it is finished.

Syntax

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

To completely disable elements globally, then set the jQuery.fx.off property to true. The default value is false which lets run all the animations normally. Setting it true disables all animations from all the elements immediately and sets the element to the final state.

Syntax

jQuery.fx.off = true|false;

Q34. When $(document).ready() function is used in Jquery?

The $(document).ready(function(){}) is executed first whenever the document is loaded. The ready event executes when the DOM (Document Object Model) is loaded. Whenever you need to run a function after the document is loaded, you can use this function.

Q35. Enlist few jquery methods used to provide effects?

Some of the jQuery methods to provide effects are:

animate() - It is used to run custom animation on the selected items.
delay() - It sets a delay time for the queued functions to work on the selected items.
show() - It is used to show the selected items.

stop() - It stops the current animation on the selected items.
hide() - It is used to hide the selected items.
fadeIn() - It fades in the selected items.
fadeOut() - It fades out the selected items.
toggle() - It toggles the animation between the hide() and show() methods on the selected items.

Q36. Enlist different slide effects available in Jquery?

There are three different sliding methods available in jQuery.

SlideDown() :This method is used to slideDown an element.

Syntax

$(selector).slideDown(speed,callback);

Here the speed parameter specifies the duration of the slideDown effect such as “slow”, “fast”, or in milliseconds. The callback function is optional and is executed after the animation slideDown is completed on the specified element.

SlideUp() : It is the opposite of the sideDown() method. It is used to slide up an element.

Syntax

$(selector).slideUp(speed,callback);

The speed parameter specifies the duration and the optional callback function is executed after the animation is completed.

SlideToggle() :This method is used to toggle between the slideUp() and slideDown() method. If the element has been slid up, this method will slide them up and vice versa.

Syntax

$(selector).slideToggle(speed,callback);

The speed parameter specifies the duration of the effect. The callback function is an optional function that is executed after the completion of the effect.

Q37. List different types of filters available in jquery?

For filtering, jQuery provides various functions such as filter(), first(), last(), eq(), slice(), has(), and not().

The filter() method takes an expression and a function as arguments. It filters the expression with the applied elements and returns only the element that matches the filter. The first() method returns the first element from the set of matched elements.
The opposite of the first() is the last() method. It returns the last element from the matched set of elements.

The eq() method is used to filter the set of matched elements and returns the element with the specified index number.
The has() method filters the set of matched elements and returns only the element that has the specified descendant element.
The not() method is used to filter the elements and return the elements that don’t match the specified condition.
The slice() method filters the element specified by the range of indices

Q38 Whether C# code behind can be called from jQuery?

Yes, we can call C# code behind from jQuery.

Q39 What are the advantages of jQuery?

Following are the advantages of jQuery:

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

Q40. Whether C# code behind can be called from jQuery?

Yes, we can call C# code behind from jQuery.

Q41. What is the use of jQuery.data() method?

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

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

In a page, 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.

Q43. What is the use of jQuery each function?

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.

Q44. How method can be called inside code behind using jQuery?

$.ajax can be called and by declaring WebMethod inside code behind using jQuery.

Q45. Which is the fastest selector in jQuery?

ID and Element are the fastest selectors in jQuery.

Q46. What is the slowest selector in jQuery?

Class selectors are the slowest selectors in jQuery.

Q47. Where jQuery code is getting executed?

jQuery code is getting executed on a client browser.

Q48. What is the method used to define the specific character in place of $ sign?

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

Q49. Why jQuery is better than JavaScript?

jQuery is a library used for developing Ajax application and it helps to write the code clean and concise. It also handles events, animation and Ajax support applications.

Q50. What are the types of selectors in jQuery?

There are three types of selectors in jQuery:

CSS Selector
XPath Selector
Custom Selector