Basic jQuery Interview Questions and Answers for Freshers

 

1. What are the advantages of jQuery?

  • Most popular and open source
  • Very fast and easily extensible
  • Used to develop cross-browser compatible web applications as jQuery works in almost the same manner for different kinds of browsers.
  • Improves the performance of an application when using the minimised version of the jQuery library. The size of the minimized js file is almost 50% less than the normal js file. A reduction in the file size makes the web page load and work faster.
  • Commonly implemented UI-related functionalities are written using minimal lines of code.

2. How is jQuery different from other javascript frameworks?

There are a few differences between jQuery and other libraries. The following makes jQuery lightweight and easier to understand, integrate, and use.  

  • jQuery is much smaller than other libraries.
  • jQuery does not have any dependencies on other libraries or frameworks. (Like babel).
  • jQuery is not as complex as other libraries. This makes it easier to use and understand.
  • jQuery is not as heavy as other frameworks, It only uses the predefined javascript to make web apps interactive.

3. List some Features of jQuery.

jQuery includes the following features:

  • DOM element choices utilizing the multi-browser open source selector engine Sizzle, a jQuery project spin-off.
  • DOM manipulation is based on CSS selectors that employ element names and characteristics, such as id and class, as criteria to pick nodes in the DOM.
  • Events
  • Animations and effects.
  • AJAX.
  • Deferred and Promise objects are used to govern asynchronous processing.
  • JSON parsing
  • Extensibility through plugins
  • Utilities such as feature detection
  • Compatibility methods that are natively present in newer browsers but require fallbacks for older ones, such as inArray() and each ().
  • Support for many browsers (not cross-browser). jQuery 1.x and 2.x both support "current-1 versions" (that is, the current stable version of the browser and the version that came before it) of Firefox, Google Chrome, Safari, and Opera. Version 1.x also works with Internet Explorer 6 and above. However, jQuery version 2.x abandoned support for Internet Explorer 6-8 (which accounts for less than 2% of all browsers in use) and now only supports IE 9 and subsequent versions.

4. Is jQuery a JavaScript or JSON library file?

jQuery is said to be a library of single JavaScript files which consists of DOM/CSS manipulations, event effects or animations, AJAX functions and various commonly used plugins.

5. Does jQuery work for both HTML and XML documents?

No. jQuery works only for HTML documents.

6. What is jQuery Mobile?

Query Mobile is a JavaScript library that enables developers to create mobile-first applications. It is a lightweight framework that allows developers to create rich, touch-first interfaces that are optimized for touch devices.

jQuery Mobile is a mobile-first JavaScript library that aims to provide a modern and easy-to-use framework for developing mobile apps. It was originally developed by Facebook to improve the performance of its iOS and Android apps. Since then, it has been adopted by many other companies, including Google, Yahoo, and Mozilla.

When using jQuery Mobile, you can use the library to create a mobile-first app that is faster and easier to maintain than traditional web apps. It also makes it easier to add new features to your app without having to rewrite your code.

JQuery Mobile is built on top of the jQuery JavaScript library. It works by using the same techniques that are used when you are developing a traditional web app. However, instead of using JavaScript, jQuery Mobile uses HTML5 and CSS3 to create a modern and easy-to-use framework for developing mobile apps.

7. What is the $() function in the jQuery library?

  • The $() function is used to access the properties of elements in the DOM (Document Object Model). $() is similar to javascript’s selector functions, but it is more powerful and has more options.
  • $() can be used to access attributes, classes, id, data-* attributes, and more.
  • Example - Suppose you want to change the colour of all the heading1 (h1) to green, then you can do this with the help of jQuery as -
$(document).ready(function() {  
   $("h1").css("background-color", "green");  
});

8. Explain $(document).ready() function?

The $(document).ready() function is a jQuery extension that allows you to immediately run code when the document is ready. It's most commonly used to initialize a new page or to load scripts or styles into the document. However, it can also be used to load a script or style into the document at any time. 

The $(document).ready() function is useful for loading scripts or styles into the document at any time. It's not useful for loading scripts or styles into the document when the document is already loaded.

9. What is the exact difference between the methods onload() and document.ready()?

The onload() and document.ready() methods are used to load and render the HTML and JavaScript code that is needed to display the page.  However, they are different methods in that they use different approaches to loading the HTML and JavaScript code. The exact differences are -

onload()document.ready()
The onload() method is used to load the HTML code.The document.ready() method is used to load the JavaScript code.
The onload() method loads the HTML code using a pre-compiled object that is passed to the onload event handlerThe document.ready() method loads the JavaScript code using a pre-compiled object that is passed to the document.ready event handler.

10. Describe jQuery Connect in brief. Also, list its uses.

JQuery connect is a JavaScript library that provides a declarative API for binding data to elements. It allows you to specify the data source, the element that should be bound to the data, and the callback function that will be invoked when the element is bound. 

The most common use case for jQuery connect is binding data to an element using an attribute or value. However, it can also be used to bind data to elements dynamically or to bind data to an element based on a condition.

11. What are the jQuery functions used to provide effects?

Some of the methods are listed below which provide the effect:

1. toggle() :

  • This function is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements where:
    • show() is run when the element is hidden.
    • hide() is run when the element is visible.
  • Syntax$(selector).toggle(speed, easing, callback)

2. slideDown() :

  • This function is used to either check the visibility of selected elements or to show the hidden elements. We can use this function on the following types of hidden elements:
    • Elements that are hidden using jQuery methods.
    • Elements that are hidden using display: none in the element’s CSS properties.
  • Syntax$(selector).slideDown( speed, easing, callback )

3. fadeOut():

  • This function is used to change the level of opacity for element of choice from visible to hidden. When used, the fadded element will not occupy any space in DOM.
  • Syntax$(selector).fadeOut( speed, easing, callback )

4. fadeToggle():

  • This is used for toggling between the fadeIn() and fadeOut() methods.
    • If elements are faded in state, fadeToggle() will fade out those elements.
    • If elements are faded out, fadeToggle() will fade in those elements.
  • Syntax$(selector).fadeToggle(speed, easing, callback)

5. animate():

  • The method performs custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles.
  • The CSS property value is changed gradually, to create an animated effect.
  • Syntax: (selector).animate({styles},speed,easing,callback) where “styles” is a required field that specifies one or more CSS properties/values to animate. The properties need to be mentioned in camel casing style.
  • The parameters “speed”, “easing” and “callback” in the syntaxes of the above methods represent:
    • speed: Optional parameter and used for specifying the speed of the effect. The default value is 400 milliseconds. The possible value of speed are “slow”, “fast” or some number in milliseconds.
    • easing: Again optional parameter is used for specifying the speed of elements to different types of animation. The default value is “swing”. The possible value of easing are “swing” and “linear”.
    • callback: Optional parameter. The callback function specified here is executed after the effect method is completed.

12. What is the use of css() method in jQuery?

The css() method is used to change the style property of the selected element.

13. Which jquery method is used to hide selected elements?

  • The hide() function in jQuery is used to try and hide the chosen element. 
  • For Example - Suppose we need to hide a division tag, that consists of id = “ib”. Then the jQuery code will be - $(“#ib”).hide();

14. What are events in jQuery?

User actions on a webpage are called events and handling responses to those is called event handling. jQuery provides simple methods for attaching event handlers to selected elements. When an event occurs, the provided function is executed.

15. How to iterate/loop through all p elements in jquery.

$.each() is an object iterator tool provided by jQuery, as is.each(), a jQuery collection iterator(). So for traversing all the p elements, the sample code is -

$("p").each(function() { 
   console.log( $(this).attr('id')); 
});

16. What is the significance of jQuery.length?

jQuery.length property is used to count the number of the elements of the jQuery object.

17. What is jQuery click event?

  • jQuery click event happens when we click on an HTML element.
  • jQuery provides a method click() method that aids to trigger the click event.
  • For example, $(“p”).click() will trigger the click event whenever the elements with paragraph tag are clicked on a browser page.

Syntax:

$(selector).click(function(){
 //code that runs when the click event is triggered
});

18. What is the purpose of JQuery's delay() method? Can you use this for different types of browsers like (Internet Explorer)?

The delay() method is used to set the delay between two events, such as a click or a change in state. The delay can be set to a number of different values, including milliseconds, seconds, and even hours. This can be useful when you want to wait for an event to occur before doing something else. 

For example - you could use a delay of 5 minutes to wait for a user to click on your button before moving on to the next step in your workflow.

Although the delay() method is not available in all browsers. In order to use it in Internet Explorer, you will need to add the following line of code:

window.addEventListener('click', function() { delay(5000); });

But the latest Microsoft browser (Microsoft Edge) that replaces the internet explorer has support for the jQuery delay() method.

In addition, the delay() method is not available in some browsers, such as Firefox and Safari. To work around this issue, you can use the setTimeout() method instead.

19. Can you explain about ajaxStart() functions?

The ajaxStart() event is a global event that occurs when an Ajax request begins, assuming no other Ajax requests are presently active. The ajaxStart() event can also be used to cancel a previously called Ajax callback or to start a new one.

For example, suppose you have an online shopping cart application that allows customers to add items to their shopping cart when they are ready to checkout. An ajaxStart() event could be used to trigger a shopping cart initialization routine when the user first visits the application, or any time a new shopping cart is about to be initialized.

Similarly, a shopping cart termination routine could be triggered when the user is finished shopping, or whenever a shopping cart is no longer needed.

20. Can you explain about ajaxComplete() function?

The ajaxComplete() is called regardless of whether the request is successful or fails, and a complete callback is returned, even for synchronous queries. 

This is very useful for error handling. If a request fails but the result is not needed immediately, it is transferred to a cache, and then called later. This is especially useful if you want to keep track of failed requests and retry those that were not successful. A typical scenario is the case of an AJAX request but no data is returned, or the data is returned but not as intended. In this case, you can call ajaxComplete() to get a new set of data and continue with your business logic. A successful AJAX request is not necessarily a reason to call ajaxComplete(). you can still do other stuff while the data is being transferred from the server to the browser. For example, you can scroll, pause the video, or show a loading indicator.

21. Describe the benefits of jQuery Ajax techniques.

With the aid of DOM and JavaScript, There is a great advantage of AJAX. Ajax can request and receive data from the server without requiring a page reload. jQuery Ajax methods are a powerful way to make your web applications more responsive. They enable you to take advantage of the power of Ajax by using JavaScript to make your web pages load faster and more efficiently.

By using jQuery Ajax methods, you can take advantage of the power of Ajax by using JavaScript to make your web pages load faster and more efficiently. The following advantages of the AJAX Methods are -

  • It allows us to eliminate the complete page reload and instead load only a portion of the page.
  • API that is simple.
  • Cross-browser compatibility.
  • POST and GET are supported.
  • Upload a JSON, XML, HTML, or script file.

22. Can you tell something about jQuery each() method?

  • The each() method in jQuery allows us to loop through different datasets such as arrays or objects (even DOM objects).
  • It can be used to loop through a number of DOM objects from the same selectors.
  • For example, if you want to add a width=“600” to all the images in a page then we select all images and loop through each of them and add width = "600" to each tag. We can write the code as below:
$("img").each(function(im){
    $(this).attr("width","600")
});
  • $ is a jQuery object definer. In the above syntax, “this” is a DOM object and we can apply jQuery functions to only jQuery objects which is why we convert the DOM object to jQuery object by wrapping it inside the $ definer.
  • We can also use each() to loop through the arrays of data and get the index and the value of the position of data inside the array.
  • For example,
var list = ["InterviewBit", "jQuery", "Questions"];
$.each(list, function(index, value){
    console.log(index + " "+ value);
})
  • The above code prints
0 InterviewBit
1 jQuery
2 Questions
  • You can also use each() to loop through objects.
  • For example:
var obj = {"name":"InterviewBit","type": "jQuery"};
$.each(obj, function(key,value){
   console.log(key + " - " + value);
})
  • The above code prints:
name - InterviewBit
type - jQuery

23. What is CDN?

CDN is an acronym that stands for Content Delivery Network or Content Distribution Network. It is a big distributed system of servers spread throughout the internet in many data centres. It downloads content from servers at a greater bandwidth, resulting in speedier loading times. Several firms offer free public CDNs, including Google, Amazon, Microsoft, Yahoo, etc.

24. What is the difference between javascript and jquery?

  • JavaScript is an interpreted language written in C and is a combination of ECMAScript and DOM whereas jQuery is a JavaScript library developed to run things faster and make things simplified for JavaScript. jQuery doesn't have the ECMAScript.
  • JavaScript requires long lines of code to code a functionality whereas in the case of jQuery, just import the library and call the functions which would reduce the programmer’s effort in coding.
  • JavaScript doesn't have cross-browser compatible functionality which is why a developer has to write code manually to implement the functionality. Whereas the cross-browser code compatibility is inbuilt in jQuery.

25. In jQuery, what is the difference between the $(window).load and $(document).ready functions?

$(window).load$(document).ready
$(window).load is an event that occurs when the DOM and another page's contents are fully loaded. This event occurs following the ready event. In most circumstances, the script may be run as soon as the DOM has finished loading.The ready() method is typically the ideal location to write JavaScript code

However, there may be times when you need to write scripts in the load() method. For instance, to determine the true width and height of a picture.

Once the DOM, CSS, pictures, and frames are entirely loaded, the $(window).load event is called. As a result, it is the optimal area to write jQuery code to determine the real picture size or to obtain information about anything.

When a function needs to be made available after the document has loaded, use the ready() method. Whatever code you include in the $(document).ready() method will be executed once the DOM of the page is prepared to run JavaScript code.

26. What exactly is a jQuery Data Table plug-in? Also, explain the uses with examples.

A data table plug-in is a jQuery plugin that can be used to create custom tables. It allows you to create a table with a custom layout, without having to write any code. It can be used to create tables with different layouts, or even to create tables with custom columns. The data table plug-in is a great way to add extra functionality to your websites, especially if you want to add a table to your website that is not included in the default layout.

Some of the uses for data tables are listed below -

  • Data tables are great for displaying a lot of data at once. For example, you could display a list of products on your website. You could also display the same data in a table in your blog.
  • Data tables are also great for displaying information that you want your visitors to see. For example, you could display a list of products that you're selling on your website. You could also display the same information in a table in your blog.
  • Data tables are great for showing a lot of information in one place. For example, you could display a list. of products on your website and then add additional information about each product in the table.

27. What is the purpose of JQuery's serialize() method?

The serialize() method is a utility method of the jQuery library that allows you to serialize data from a DOM element and return it in a format that can be used by other libraries. 

This is useful when you want to pass data between different libraries or frameworks, or if you want to create a custom API that can be used by other developers. For example - if you want to pass JSON data from your application to a third-party API, you can use the serialize() method to serialize the data and then pass it to the API. This way, the API knows how to handle the data, and you don't have to worry about the format of the data.

The serialize() method is also useful when you need to send data between different browsers. For example - if you want to send JSON data from one browser to another, you can use the serialize() method to serialize the data and then send it using a custom HTTP request.

If you're not sure what data you need to serialize, there's an easy way to find out: Just type "serialize" into the console. You'll see a list of all the methods that are available on your element. ul> li>serialize/li> li>unserialize/li> /ul> div id="example"> ul> li>serialize/li> li>unserialize/li> /ul> /div>

28. What are the selectors in jQuery? How many types of selectors in jQuery?

In order to work with any element on the web page, we would first need to find it. Selectors find the HTML elements in jQuery. Some of the most commonly used and basic selectors are:

  • Name: Used to select all elements which match the given element Name.
  • #ID: Used to select a single element which matches with the given ID
  • .Class: Used to select all elements which match with the given Class.
  • Universal (*): Used to select all elements available in a DOM.
  • Multiple Elements E, F, G: Used to select the combined results of all the specified selectors E, F or G.
  • Attribute Selector: Used to select elements based on their attribute value.

29. Explain how CSS classes can be manipulated in HTML using jQuery.

Query provides several methods to manipulate the CSS classes assigned to HTML elements. The most important methods are addClass(), removeClass() and toggleClass().

  • addClass(): This method adds one or more classes to the selected elements.
    • Syntax: $(selector).addClass(className);
    • You can also add multiple classes to the selector. Syntax:$(selector).addClass(class1, class2);
  • removeClass(): Similar to adding class, you can also remove the classes from the elements by using this method.
    • The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.
    • Syntax:
      • For removing one class: $(selector).removeClass(class1);
      • For removing multiple class: $(selector).removeClass(class1, class2, class 3);
      • For removing all classes at once: $(selector).removeClass()
  • toggleClass(): This method is used for adding or removing one or more classes from the selected elements in such a way that if the selected element already has the class, then it is removed. Else if an element does not have the specified class, then it is added i.e. it toggles the application of classes.
    • Syntax: $(selector).toggleClass(className);

30. State some different types of jQuery Methods.

jQuery provides a variety of methods for doing various tasks, such as manipulating the DOM, events, and ajax. The table below covers many technique categories.

Essential MethodsCharacterizationClassification
after(), append(), attr(), before(), etc.These methods alter DOM elements in some way, such as modifying attributes, style attributes, adding and deleting elements, and so on.DOM Manipulation
addClass(), CSS(), hasClass(), removeClass(), toggleClass(), etc.These methods retrieve and set CSS attributes of elements.CSS
attr(), html(), HTMLremoveAttr(), prop(), val(), etc.These methods retrieve and set element DOM properties.Attributes
bind(), blur(), change(), click(), focus(), keyup(), keydown(), etc.These methods deal with DOM or JavaScript events.Events
animate(), fadeIn(), fadeOut(), hide(), show(), stop(), etc.These techniques are used to provide elements of animation.Effects
get(), getJson(), post(), load(), etc.These techniques provide Ajax functionality with jQuery.AJAX

children(), closest(), each(), first(), next(), filter(),

parent(), siblings(), etc.

These methods assist in traversing from one DOM element to another in a parent-child hierarchy, such as locating ancestors, descendants, or sister elements of a specific element.Traversing
blur(), change(), val(), submit(), etc.Forms and their many components are handled by these methods and event handlers.Forms
inArray(), isArray(), isFunction(), isNumeric(), isWindow(), isXmlDoc(), etc.Utility methods are useful for obtaining information about various objects, such as a browser, function, array, or window.Utilities

31. Explain jQuery no-conflict.

jQuery no-conflict is a jQuery option that allows you to avoid conflicts between various javascript frameworks or libraries. When you utilize jQuery's no-conflict mode, you substitute the variable with a new variable and assign jQuery to other JavaScript libraries. In addition, the symbol is utilized as a function or variable name in jQuery.

When no conflict is enabled, the $ symbol in jQuery becomes the global function name and not the library name. For example, you may use the $ function to access other libraries' data, but not their code. You can also use this option to avoid conflicts between various jQuery plugins.

32. In jQuery, distinguish between the bind(), live(), and delegate() functions.

The bind() function does not connect events to items added after loading the DOM. In contrast, the live() and delegate() methods also attach events to future items.

The distinction between live() and delegate() methods is that live() does not support chaining. It will only function on a selection or an element. However, the delegate() function supports chaining.

The bind() method works only within a dom element. If you want to bind events to items in a different element, you can use the delegate() function. The bind() method is not recommended for use in JavaScript. It is a best practice to call event handlers on items as they are added to the DOM. The bind() method is only used to control the order in which items are displayed. If you need to add items to a different order, you can use the delegate() function. The bind() method is not intended to be used in a production environment. It does not offer the same performance benefits as the delegate() method.

For Example - Consider the below code - 

$(document).ready(function(){
    $("#interviewbit").find("p").live("click", function(){
      alert("Welcome to InterviewBit jQuery Interview Questions");
    });
});

The live() method does not work in the given code, but we can easily do this using the delegate() function. So the code will be like this -

$(document).ready(function(){
    $(".interviewbit")children("p").delegate("a","click", function(){
      alert("you clicked on a link to jQuery interview questions.");
    });
});


;