JQuery Interview Questions and Answers


What is JQuery?

jQuery is a lightweight JavaScript library which gives a quick and simple method for HTML DOM traversing and manipulation, its event handling, its client-side animations, and so on. One of the best features of jQuery is that jQuery supports an efficient way to implement AJAX applications because of its lightweight nature and make normalize and efficient web programs.

What are the different type of selectors in Jquery?

There are 3 types of selectors in Jquery

CSS Selector

XPath Selector

Custom Selector

What is jQuery Selectors? Give some examples?

jQuery Selectors are used to select one or a group of HTML elements from your web page.

jQuery support all the CSS selectors as well as many additional custom selectors.

jQuery selectors always start with dollar sign and parentheses: $()

1. Select elements by tag name

Example  :-  $(div) ---------- (It will select all the div elements in the document.)

2. Select elements by ID

Example  :-  $(“#abc”) --------- (It will select single element that has an ID of abc.)

3. Select elements by Class

Example  :-  $(“.xyzClass”) -------- (It will select all the elements having class xyzClass.)
 

What is the difference between jquery.size() and jquery.length?

jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide .length property and which does the same thing. But the .length property is preferred because it does not have the overhead of a function call.

How to read, write and delete cookies in jQuery ?

To deal with cookies in jQuery we have to use the Dough cookie plugin.

Dough is easy to use and having powerful features.

Create cookie :- $.dough(“cookie_name”, “cookie_value”);

Read Cookie :- $.dough(“cookie_name”);

Delete cookie :- $.dough(“cookie_name”, “remove”);

What is difference between $(this) and this in jQuery ?

this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.?

In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

$(document).ready(function(){
  $('#clickme').click(function(){
    alert($(this).text());
    alert(this.innerText);
  });
});

 

What are the methods used to provide effects?

Some of the effects methods are:

Show()

Hide()

Toggle()

FadeIn() and

FadeOut()

 Which command will give a version of jQuery?

The command $.ui.version returns jQuery UI version.

Can we add more than one ‘document.ready’ function in a page?

Yes, we can add more than one document.ready function in a page. But, body.onload can be added once in a page.

What is the use of jQuery load method?

jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

 Which sign is used as a shortcut for jQuery?

Dollar ($) sign is used as a shortcut for jQuery.

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

In a page, we can have only one onload function but we can have more than one document.ready function. Document.ready function is called when DOM is loaded but onload function is called when DOM and images are loaded on the page.

What is the use of jQuery each function?

jQuery each function is used to loop through each and every element of the target jQuery object. It is also useful for multi element DOM, looping arrays and object properties.

<script>     
$(document).ready(function() {         
    var data = { 
             "programs": 
                       [
                         { 
                            "name":"Kailash", 
                            "price":"5000$" 
                         }, 
                         { 
                             "name":"Amit", 
                             "price":"2000$" 
                         } 
                      ]
              };         
        $.each(data.programs, function(key,val) {             
            alert(key+val);         
        });     
    }); 
</script>

 

Which is the fastest selector in jQuery?

ID and Element are the fastest selectors in jQuery and Class selectors are the slowest selectors in jQuery.

Why jQuery is better than JavaScript?

jQuery is a library used for developing Ajax application and it helps to write the code clean and concise. It also handles events, animation and Ajax support applications.

Explain .empty() vs .remove() vs .detach()?

.empty() :- method is used to remove all the child elements from matched elements.

.remove() :- method is used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.

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

What’s the difference between prop() and attr()?

Both prop() and attr() are used to get or set the value of the specified property of an element attribute, but attr() returns the default value of a property whereas prop() returns the current value.

What’s the difference between document.ready() and window.onload()?

The document.ready() event occurs when all HTML documents have been loaded, but window.onload() occurs when all content (including images) has been loaded. So generally the document.ready() event fires first.

Which parameters are being used for the jQuery Ajax method?

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. 

var id = pass value here
$.ajax({
  type: "GET",
  url: "pass the file url",
  data: {id : id},
  cache: false,
  success: function(data){
     
  }
});

 

Differentiate the concepts of .js and .min.js?

jQuery library has two different versions Development and Production. The other name for the deployment version is minified version. 

Considering the functionality, both the files they are much similar to each other. Being smaller in size, the  .min.js   gets loaded quickly saving the bandwidth.

What is an event?PreventDefault?

The event.preventDefault() method function is to stop the default action of an element from taking place  or to halt the default action from happening. 

 What are the methods used to provide effects?

jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on toggle(), Show() and hide() methods. Similarly we can use other methods as in the following:

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.

How can we use hide() method on a button click using jQuery?

In jQuery the hide () method is very useful. By using this method you can hide HTML elements with the hide() method. In this example, we create a div element which contains text. When we click on the Button the text we use in the div will be hidden.

<button>Hide Text</button> 
<div id="div1"> This is JQuery</div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script type="text/javascript">  
   $(document).ready(function() {  
     $("button").click(function() {  
          $("#div1").hide();  
     });  
   });  
</script>

 

How to work with parent(), children() and siblings() methods in jQuery?

The parent() function returns the parent of the selected element by calling the jQuery parent() function. The siblings() function returns all the siblings of given HTML elements.

Define slideToggle() effect?

The slide methods do the up and down element. To implement slide up and down on element jQuery here are the three methods:

slideDown()

slideUp()

lideToggle()

And how to use them:

1. slideDown() Method
This function is used to slide and hide an element on down side:

<script type="text/javascript">  
    $(document).ready(function() {  
        $("#btnSlideDown").click(function() {  
            $("#login_wrapper").slideDown();  
            return false;  
        });  
    });  
</script>  

2. slideUp() Method
This function is used to slide and show element up side:

<script type="text/javascript">  
    $(document).ready(function() {  
        $("#btnSlideUp").click(function() {  
            $("#login_wrapper").slideUp();  
            return false;  
        });  
    });  
</script>  

3. slideToggle() Method 
This method is between slideUp() method and slideDown() method. It shows/hides an element in up/down side:

<script type="text/javascript">  
    $(document).ready(function() {  
        $("#btnSlideToggle").click(function() {  
            $("#login_wrapper").slideToggle();  
            return false;  
        });  
    });  
</script>  

 

What is an attribute in jQuery?

There are many important properties of DOM or HTML elements such as for the <img> tag the src, class, id, title and other properties. jQuery provides ways to easily manipulate an elements attribute and gives us access to the element so that we can also change its properties. 

attr( properties ) - Set a key/value object as properties to all matched elements.

attr( key, fn ) - Set a single property to a computed value, on all matched elements.

removeAttr( name ) - Remove an attribute from each of the matched elements.

hasClass( class ) - Returns true if the specified class is present on at least one of the set of matched elements.

removeClass( class ) - Removes all or the specified class(es) from the set of matched elements.

toggleClass( class ) - Adds the specified class if it is not present, removes the specified class if it is present.

html( ) - Gets the HTML contents (innerHTML) of the first matched element.

html( val ) - Sets the HTML contents of every matched element.

text( ) - Gets the combined text contents of all matched elements.

text( val ) - Sets the text contents of all matched elements.

val( ) - Gets the input value of the first matched element.

What are jQuery Events?

When we design dynamic web pages, we need to apply some events such as Mouse Click, for forms submit the form after a button click, change a color after a click, etc. So in layman language, events are actions that are used for dynamic web pages. When we perform these actions on an HTML page, we can do whatever we want.

We use some event handlers to perform the action. Some important handlers are bind(), unbind(), blur(), off(), hover(), on(), one(), ready(), trigger() etc. 

What is the difference between bind() and live() method in jQuery ?

The binding of event handlers are the most confusing part of jQuery for many developers working on jQuery projects. Many of them unsure of which is better to use. In this article we will see the main differences between Bind and Live methods in jQuery.

Bind() Method :-
The bind method will only bind event handlers for currently existing items. That means this works for the current element.

Example

$(document).ready(function () {   
   $('P').bind('click', function () {  
      alert("Example of Bind Method");  
      e.preventDefault();  
   });   
});  

 

Live() Method:-
The Live method can bind event handlers for currently existing items or future items.

Example

$(document).ready(function() {  
    $('P').live('click', function() {  
        alert("Example of live method");  
        e.preventDefault();  
    });  
    $('body').append('<p>Adding Future items</p>');  
  
});  

 

Define Add or Remove class in jQuery?

addClass will be used for adding a new CSS class after replacing the old class and removeClass will work for removing the selected class.

$(document).ready(function() {    
    $('.button').click(function() {    
        if (this.id == "add") {    
            $('#animTarget').addClass("myClass", "fast")    
        } else if (this.id == "toggle") {    
            $('#animTarget').toggleClass("myClass", 1000, "easeOutSine")    
        } else if (this.id == "switch") {    
            $("#animTarget").switchClass("myClass", "switchclass", "fast")    
        } else {    
            $('#animTarget').removeClass("myClass", "fast")    
        }    
    })    
});  

  

Why to use jQuery $ sign?

The basic operation in jQuery is selecting an element in DOM. This is done with the help of $() construct with a string parameter containing any CSS selector expression. $() will return zero or more DOM elements on which we can apply an effect or a style.

What is slice() method in jQuery?

This method selects a subset of the matched elements by giving a range of indices. In other words, it gives the set of DOM elements on the basis of it's parameter (start, end).
Syntax :- .slice( start, end[Optional] ) 
Start :- This is the first and mandatory parameter of the slice method. This specifies from where to start to select the elements. 
End :- This is an optional parameter. It specifies the range of the selection. This indicates where to stop the selection of elements, excluding end element. 

Note :- The Negative Indices started from -1. This last element is denoted by index -1 and so on. 

What is Grouping?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}