jQuery Interview Questions

jQuery interview questions

These jQuery questions have been designed for various interviews, competitive exams and entrance tests. We have covered questions on both basic and advanced concepts which will help you improve your skills to face interview questions on jQuery.

Who are these jQuery interview questions designed for?

All the Web developers, Front End developers, UI/ UX developers and designers will find these questions extremely useful. All freshers, BCA, BE, BTech, MCA and college students wanting to make a career in front end designing will be highly benefitted by these questions.

jQuery interview questions topics

This section covers jQuery topics like - Hide/Show, Fade, Slide, Animate, Callback, Traversing, Traversing, Ancestors, Descendants, Siblings, Filtering etc.

1. What is the use of hide() method in jQuery?

Answer:

Using hide() method you can hide HTML elements.

This method hides the selected elements.

Syntax:
$(selector).hide(speed,easing,callback)

Parameters,

Speed: It specifies the speed of the hide effect and the default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.

Example:

$(document).ready(function()
{
    $("#hide").click(function(){
        $("p").hide(1000){
        });
    });
}


Easing: It specifies the speed of the element in different points of the animation. The default value is "swing" and the possible values are:

1. swing: It moves slower at the beginning/end, but faster in the middle.
2. linear: It moves in a constant speed.

Callback: It specifies a function to be executed after the hide() method is completed .

Example:

$(document).ready(function()
{
    $("#hide").click(function() {
        $("p").hide(1000, function(){
alert("Hide() method is completed!");
        });
    });
}

2. What is the main benefit of $(document).ready() function?

Answer:

The $(document).ready function is jQuery’s way of executing your JavaScript code after the DOM has finished loading.

Example:

$(document).ready(function(){
// your jQuery code here
});


The $( document ).ready() function will only run once the page DOM is ready for JavaScript code to execute. Because ready event occurs after the document is ready, it is a good place to have all other jQuery events and functions.

The $(document).ready() function works in all browsers. jQuery handles cross browser difficulties.

A web page cannot be manipulated safely until the document is ready. jQuery helps you to detect this state of readiness for you.

3. What is the fastest selector in jQuery?

Answer:

jQuery selectors are used to find out the matching HTML elements based on their name, id, classes, types, attributes etc.

The selectors allow you to select and manipulate HTML element(s).

All selectors in jQuery start with the dollar sign and parentheses: $().

ID and Element are the fastest selectors in jQuery.

Elements selectors are faster than other variable selectors but slower than ID selector.

It is always preferred to use ID selector, because jQuery uses the javascript function document.getElementById() for ID selectors.

Use '#' character to select elements by ID.

For example,
$('#myID')
The above selector will select <p id="myID"> element.

Once an element is selected then we can perform various operations on that selected element.

4. What is the use of NoConflict method in jQuery?

Answer:

The noConflict() method releases jQuery's control of the $ variable.

This method helps to make sure that jQuery does not conflict with the $ object of other libraries.

NoConflict method releases the hold on the $ shortcut identifier, so that other scripts can use it.

It can also be used to specify a new custom name for the jQuery variable.

NoConflict method is useful when other JavaScript libraries use the $ for their functions.

Syntax:
$.noConflict(removeAll)

Parameters,

removeAll: A boolean value that specifies whether or not to release jQuery's control of ALL jQuery variables. This parameter is an optional.

5. What is meant by jQuery connect?

Answer:

jQuery connect is a plugin which is used to connect or bind a function with another function.

It is like assigning a handler for another function.

Connect is used to execute a function whenever a function from another object or plugin is executed. We can connect to an event of a DOM element too using this function.