jQuery Interview Question and Answer

1. What is jQuery?

Ans. jQuery is a fast, lightweight, feature-rich JavaScript library included in a single .js file. It offers many built-in functions that enable web developers to accomplish various tasks easily and quickly. jQuery is cross-platform and supports different types of browsers. It makes a website more interactive, attractive, and user-friendly. Before jQuery, JavaScript codes were lengthy and bigger, now jQuery helps developers by allowing them to write less and do more. 

2. What are the features of jQuery?

Ans. Below are some of the key features of jQuery:

1. Lightweight: jQuery is lightweight (around 19KB in size – minified and gzipped).
2. Simple and Easy: jQuery is easy to learn. It has predefined methods, allowing you to perform any task easily compare to JavaScript. 
3. Cross Browser Support:  It has cross-browser support and works well in IE, Safari, Chrome, and Opera.
4. DOM Manipulation:  It provides methods to manipulate DOM easily and efficiently. It is easy to traverse them and modify their content by using the selectors (Selecting DOM Objects)
5. Event Handling: It provides a great way to capture different events, like a user clicking on a link, without the need to clutter the HTML code itself. The event handler handles the event raised by the operation performed by the mouse, keyboard, and touch, etc.
6. AJAX Support: It offers several methods for AJAX functionality. It helps you develop a responsive and feature-rich website with AJAX technology. With its AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.
7. Built-in Animations: jQuery comes with a variety of built-in animation effects which you can use on your websites. It has a predefined method “animate()” to create custom animation on the webpage.

3. What is the difference between JavaScript and jQuery?

Ans. The differences between JavaScript and jQuery are: 

4. Explain Selectors in jQuery. What are the different types of Selectors? 

Ans. jQuery Selectors are functions that are used to select and manipulate HTML elements. They use the expressions to find out matching elements from a DOM based on the given criteria (their id, classes, attributes, types, etc.). Once an element is selected, you can perform various operations on that element. jQuery selectors start with a dollar sign and parenthesis – $(). 

Below are some of the different types of Selectors: 

5. Differentiate between .empty() vs .remove() vs .detach() in jQuery.

Ans. .empty() vs .remove() vs .detach() are jQuery methods to remove elements from DOM. Below are the differences: 

.empty() – it removes all the child elements from matched elements.

Syntax:

$(selector).empty();

.remove() – it removes all the child elements of the matched element and the element itself. All events and jQuery data associated with the elements are also removed. 

Syntax:

$(selector).remove();

.detach() – It is the same as .remove() method, except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

Syntax:

$(selector).detach();

6. How to create, read, and delete cookies in jQuery?

Ans. We can use the jQuery cookie plugin to accomplish create, read, and delete cookie tasks in jQuery. 

Create cookie:

$.dough(“cookie_name”, “cookie_value”);

Read Cookie:

$.dough(“cookie_name”);

Delete cookie:

$.dough(“cookie_name”, “remove”);

7. What are the methods used to provide effects in jQuery?

Ans. jQuery effect methods enable us to create custom animation effects. The following are some effects methods used in jQuery:

8. What is a CDN? What are the advantages of using CDN?

Ans. jQuery CDN (Content Delivery Network) is a geographically distributed group of servers that work together to provide fast delivery of Internet content. A CDN provides the files from servers at a higher bandwidth that leads to faster loading time. It is a method to include jQuery into a website without actually downloading and keeping it in the website’s folder. There are many jQuery CDNs available in the market today, for example, jQuery’s CDN, Google CDN, and Microsoft CDN, etc.

Benefits of using CDN:

• Faster page loading 
• Saves bandwidth and reduces bandwidth costs
• Increases content availability and redundancy
• SEO Friendly

9. How to add a jQuery library to the ASP.Net project?

Ans. We can add the jQuery library to the ASP.Net project by downloading the latest jQuery library from jQuery.com and including the references to the jQuery library file in the HTML/PHP/JSP/Aspx page.

For example: 

<script src=”_scripts/jQuery-1.2.6.js” type=”text/javascript”</script>

<script language=”javascript”>

$(document).ready(function() {

alert(‘test’);

});

10. Explain the use of the toggle() method in jQuery.

Ans. The jQuery toggle() method shows the hidden elements and hides the shown element. This method toggles between the hide() and the show() method. 

• toggle() method runs show() when the element is hidden.
• toggle() method runs hide() when the element is visible.

Syntax:

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

Parameters: 

• speed (optional): specifies the speed of the hide/show effect. Possible values – slow, fast, and milliseconds.
• easing (optional): specifies the speed of the element in different points of the animation. Possible values – swing (default), linear
• callback (optional): specifies the function to be called after completion of toggle() effect.

11. Explain the parameters used for the jQuery Ajax method.

Ans. Below are the four parameters used for the jQuery Ajax method:

1. URL – specify the URL to send the request
2. Type – specifies the type of requests (Get or Post)
3. Data – specifies the data to be sent to the server
4. Cache – decides whether the browser should cache the requested page