jQuery Interview Questions

Question 1:  What is jQuery?
Answer:  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.

Question 2: What is the difference between JavaScript and jQuery?
Answer: JavaScript is an interpreted programming language whereas jQuery is a library with APIs built for JavaScript. jQuery simplifies the use of the JavaScript language.

Question 3: What are the effects methods used in jQuery?
Answer:  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.

Question 4:  What is jQuery Ajax?
Answer:  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.

Question 5: What does ajax() method do?
Answer: This method sends an asynchronous http request to the server.

Question 6: What does the ajax method load() do?
Answer: 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).

Question 7: What are the jQuery Ajax Events?
Answer: The jQuery library also includes events which will be fired based on the state of the Ajax request, these are called Ajax events.

Question 8: What does the jQuery Ajax event method ajaxComplete() do ?
Answer:  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.

Question 9: What does the jQuery ajax event method ajaxStart() do?
Answer: 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.

Question10: What are Events in jQuery?
Answer: 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. 

Question 11: What are the categories in jquery Events?
Answer: The common DOM events are as follows

• Form
• Keyboard
• Mouse
• Browser
• Document Loading

Question 12: What is the use of css() method in JQuery?
Answer: The jQuery CSS() method is used to get (return)or set style properties or values for selected elements. It facilitates you to get one or more style properties.

Question 13: What is the difference between find and children methods?
Answer:  Both the methods are used to filter the child of the matched elements. Find method is used to find all levels down the DOM tree but children method searches only a single level down the DOM tree.

Question 14: What are the selectors in jQuery and what are the types of Selectors?
Answer: If you would like to work with an element on the web page, first you need to find or select it. Selectors find the HTML elements using jQuery.

There are many types of selectors in the jQuery library. 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 select 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.

Question 15:  What is the difference between the ID selector and class selector in jQuery?
Answer: ID selector and class selector are the same as they are in CSS. ID selector uses ID while the 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, you can use the class selector.

Question 16: What are the Advantages of jQuery Ajax methods?
Answer: The advantages of using jQuery Ajax methods are

• Cross-browser support
• Simple methods to use
• Ability to send GET and POST requests
• Ability to Load JSON, XML, HTML or Scripts

Question 17: What is the difference between onload() and document.ready() methods?
Answer:  Body.Onload() event will be called only after the DOM and associated resources like images get loaded, but jQuery’s document.ready() event will be called once the DOM is loaded and it does not wait for the resources such as images to be loaded.

Question 18: What is jQuery connect?
Answer:  A ‘ jQuery connect’  is a plug-in used to connect or bind a function with another function. Connect is used to execute a function whenever a function from another object or plug-in is executed.

Question 19: Is jQuery required for bootstrap?
Answer: Bootstrap uses jQuery for JavaScript plugins (like models, tooltips, etc). However, if you just use the CSS part of Bootstrap, you don’t need jQuery.

Question 20: What is jQuery Mobile?
Answer: jQuery Mobile is an HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphones, tablet and desktop devices.

Question 21: What is the difference between jquery.min.js and jquery.js?
Answer:  jquery.min.js is a compressed version of jquery.js(whitespaces and comments are removed, shorter variable names are used and so on) in order to preserve bandwidth. In terms of functionality, they are absolutely the same. It is recommended to use this compressed version in the production environment. The efficiency of web page increases when the minimized version of jQuery is used.

Question 22: Is it possible that jQuery HTML works for both HTML and XML documents?
Answer: No, jQuery HTML only works for HTML documents. It doesn’t work for XML documents.

Question 23: What is jQuery UI?
Answer: jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. jQuery UI works well for highly interactive web applications with many controls or for a simple page with a date picker control.

Question 24: What is a Data Table plug-in for jQuery?
Answer: DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, which adds advanced features to any HTML table.

Question 25: What is Qunit?
Answer: QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery, jQuery UI, and jQuery Mobile projects and is capable of testing any generic JavaScript code.

Question 26: What is the advantage of hosting a jQuery using a CDN?
Answer: 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.

Advantages of using CDN are-

• The jQuery library download time will be reduced. For example – Users in Europe will hit the CDN in Europe and users in the US will hit the US CDN. As a result, this will reduce the overall page load time.
• The jQuery library will already be cached in the user’s browser if the user visited another website that references the same jQuery library. In this case, the user need not download the jQuery library.

Question 27: Explain the difference between the .detach() and remove() methods in jQuery.
Answer: The detach() and remove() methods are the same, except that .detach() retains all jQuery data associated with the removed elements and .remove() does not. detach() is therefore useful when removed elements may need to be reinserted into the DOM at a later time.

Question 28: Can a jQuery library be used for server scripting?Answer: jQuery is designed with the functionality for client-side scripting. jQuery is not compatible with server-side scripting.