Explore topic-wise InterviewSolutions in .

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 - 

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 -

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.

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.

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);
    
  
  

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.

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>

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.

• 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.

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.

• 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:

• $ 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,

• The above code prints

• You can also use each() to loop through objects.


• For example:

• The above code prints:

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.

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.

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.

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:

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.

• 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:

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

$.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 -

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.

• 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();
  

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

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.
  
  
  
  

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.

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 -

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.

• 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 -

No. jQuery works only for HTML documents.

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.

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.

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. Learn More.