Top JQuery Interview Questions and Answer

JQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal and manipulation, event handling, and animation with an easy-to-use API that works across many browsers. With versatility and extensibility, jQuery has changed how millions of people write JavaScript.

Some of the key features of jQuery are:

 

• DOM manipulation−  jQuery makes the selection of DOM elements easy, traverse them and modify their content by using cross-browser open source selector engine.

• Event handling− It provides an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

• AJAX Support−  jQuery helps you to develop a responsive and feature-rich website with AJAX technology.

• Animations− This framework comes with plenty of built-in animation effects which you can use in your websites.

• Lightweight − It is a very lightweight library – about 19KB in size.

• Cross Browser Support−  jQuery has cross-browser support and works well in IE 6.0+, Safari 3.0+, Chrome and Opera 9.0+.

JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.

jQuery library comes in 2 different versions Development and Production/Deployment. The deployment version is also known as minified version. So .min.js is basically the minified version of jQuery library file. Both the files are same as far as functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth.

jQuery is used mainly to add animation effects, call functions on events, apply dynamic or static CSS, and manipulate purposes.

Yes, all elements can be selected using jQuery using $('*') available in a DOM.

AJAX stands for Asynchronous JavaScript and XML. It helps in loading and exchanging data without a browser page refresh and only via server. jQuery provides a rich set of AJAX methods to develop web applications.

There are many advantages of using jQuery. Some of them include :

    It is like an enhanced version of JavaScript so there is no overhead in learning a new syntax.

    jQuery has the ability to keep the code simple, readable, clear and reusable.

    It has Cross-browser support.

    This would remove the requirement for writing complex loops and DOM scripting library calls.

     jQuery helps in event detection and handling.

    It provides tons of plug-ins for all kind of needs.

 

The $.each() function is used to iterate over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array.

jQuery Selectors are used to select and manipulate HTML elements in a webpage. It always start with dollar sign and parentheses. They are very important part of jQuery library. There are three types of selectors in jQuery

• CSS Selector
• Custom Selector
• XPath Selector

Note:

$('div') is used for selection all div tags in the document,

$('#TextId') is used for selecting elements whose ID is TextId

$('.myclass') is used for selecting all elements whose class is .myclass.

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.

There are 3 popular jQuery CDNs:

1. 1. Google.
2. 2. Microsoft
3. 3. jQuery.

Advantages of using CDN:

• It reduces the load from your server.
• It saves bandwidth. jQuery framework will load faster from these CDN.
• The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

• .empty() – This method is used to remove all the child elements from matched elements.

Syntax- $(selector).empty();

 

• .remove() – This method is used to remove all the matched element. It will remove all the jQuery data associated with the matched element.

Syntax- $(selector).remove();

 

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

Syntax- $(selector).detach();

• animate( params, [duration, easing, callback] ) This function makes custom animations for your HTML elements.

• fadeIn( speed, [callback] ) This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.

• fadeOut( speed, [callback] ) This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to “none” and firing an optional callback after completion.

• fadeTo( speed, opacity, callback ) This function fade the opacity of all the matched elements to a specified opacity and firing an optional callback after completion.

• stop( [clearQueue, gotoEnd ]) This function stops all the currently running animations.

This function is used to ensure that the DOM is fully loaded before any jQuery code is executed. This function takes a function as an argument, and the function passed to it will be executed when the DOM is ready. This is useful for ensuring that elements on the page are available before interacting with them. 

The onload() method is JavaScript when the page finishes loading. The document. a Ready () method is a jQuery method called when the DOM is ready. The main difference is that onload() waits for all assets on the page to be loaded, including images and other external resources, during the document. Ready () only remains for the DOM to be prepared. 

jQuery provides clone() method which performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.

$(document).ready(function(){
  $('#btnClone').click(function(){
     $('#dvText').clone().appendTo('body');
     return false;
  });
});

 

The default implementation of the clone() method doesn't copy events unless you tell the clone() method to copy the events. The clone() method takes a parameter, if you pass true then it will copy the events as well.

$(document).ready(function(){
   $("#btnClone").bind('click', function(){
     $('#dvClickme').clone(true).appendTo('body');
  });

Some different types of jQuery methods include:

• Event methods: such as click(), hover(), and focus()
• Traversing methods: such as children(), parent(), and siblings()
• DOM manipulation methods: such as append(), prepend(), and replaceWith()
• CSS manipulation methods: such as addClass(), removeClass(), and CSS()
• Animation methods: such as animate(), fadeIn(), and slideUp().

The parent() function travels only a single level in the DOM tree, whereas parents() searches through the entire DOM tree. 

In jQuery there are three different applications applying which we can avail the fade effect.
Fade effect can be availed by using the functions which are fadeIn, fadeOut and fadeTo.
2. The opacity of elements gets changed with animation through the effect of these methods.
The syntax for the fading effect includes
Syntax:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

JQuery Ajax method makes use of four different parameters which include
* URL – The URL must be clearly specified in order to send the request.
* type – Specifies the type of request(Get or Post)
* data – Specifies data to be sent to the server
* Cache – This tells if the browser should index the specific page or not.
* success(result,status,xhr) – A function to be run when the request succeeds

The jQuery toggle() is a particular type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.

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

speed: It is an optional parameter. It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of toggle() effect.

display: If true, it displays an element. If false, it hides the element.

attr(): It gets the value of an attribute for the first element in the set of matched element.

prop(): it gets the value of a property for the first element in the set of matched elements. It is introduced in jQuery 1.6.

Both methods allow you to send an HTTP request to a server and handle the response, but they have some key differences:

$.get() is a shorthand method for performing a GET request using $.ajax(). It is a simpler method and is used for quick and simple requests, such as retrieving data from a server.

The basic syntax for $.get() is $.get(url, data, callback).

 

jQuery.get('testing.txt',function(data){
    console.log(data)
},'text');

 

 

$.ajax() is a more powerful and flexible method for performing AJAX requests. It can be used to perform any type of HTTP request (GET, POST, PUT, etc.). Here's an example of how to use $.get() and $.ajax() to make a GET request to a server:

    url: 'testing.txt',
    dataType: 'text',
    type: GET,
      success: function(data) {
        console.log(data);              
      }
    });

 

Detail of the properties used in jQuery.ajax() are defined below:

• url:Through ajax call you are gabbing the URL of the file.
• dataType: How the return data will be treated will be depend on the this datatype.
• type:  This is the type of the request it can be POST or GET.In jQuery default Post type will be GET.
• success: After a successful http request then a callback function is fired.