jQuery interview questions and answers - freshers, experienced

What is jQuery Selectors? Give some examples.

1. jQuery Selectors are used to select one or a group of HTML elements from your web page.
2. jQuery support all the CSS selectors as well as many additional custom selectors.
3. jQuery selectors always start with dollar sign and parentheses: $().
4. There are three building blocks to select the elements in a web document.

1) Select elements by tag name
Example : $(div)
It will select all the div elements in the document.

2) Select elements by ID
Example : $(“#xyzid”)
It will select single element that has an ID of xyzid.

3) Select elements by class
Example : $(“.xyzclass”)
It will select all the elements having class xyzclass.

How can we give face effect in jQuery?

1. In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo.
2. This methods change the opacity of element with animation.

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

1. “speed” can be one of following values : “slow”, “fast”, “normal” or milliseconds.
2. “opacity” specify the value that allows the fading to given opacity.
3. “callback” is the function which we want to run once the fading effect is complete.

For example
$("clickme").click(function()
{
$("mydiv").fadeTo("slow",0.50);
});

$("clickme").click(function()
{
$("mydiv").fadeOut(3000);
});

Explain the animate function.

-The animate function is used to apply the custom animation effect to elements.

Syntax:
$(selector).animate({params}, [duration], [easing], [callback])

1. “param” defines the CSS properties on which you want to apply the animation.
2. “duration” specify how long the animation will run. It can be one of following values : “slow”, “fast”, “normal” or milliseconds.
3. “easing” is the string which specify the function for the transition.
4. “callback” is the function which we want to run once the animation effect is complete.

For example
<div id="clickToAnimate">
Click Me
</div>
<div id="mydiv" style=”width:200px; height:300px; position: relative; right: 20px;">
</div>

Following is the jQuery to animate opacity, left offset, and height of the mydiv element
$('# clickToAnimate’).click(function()
{
     $('#book').animate({opacity: 0.30,left: '+=20',height: 'toggle'}, 3000, function()
{
     // run after the animation complete.
});
});

What is .siblings() method in jQuery?

1. When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
2. We filter the elements fetched by an optional selector.
3. Syntax : .siblings([selector])
4. “selector” is the selector expression which specify the matched elements.

For example
<ul>
<li> item 1 </li>
<li id=”second_item”> item 2 </li>
<li class=”myitem”> item 3 </li>
<li class=”myitem”> item 4 </li>
</ul>

Now we want to find the siblings of the element of id “second_item” and change the text color to Blue :
$(‘li.second_item’).siblings().css(‘color’,’blue’);

If we want specific sibling elements for example the elements having class “myitem” then we can pass a optional selector :
$(‘li.second_item’).siblings(‘.myitem’).css(‘color’,’blue’);

Explain width() vs css(‘width’).

1. In jQuery, there are two way to change the width of an element.
2. One way is using .css(‘width’) and other way is using .width().

For example
$(‘#mydiv’).css(‘width’,’300px’);
$(‘#mydiv’).width(100);

1. The difference in .css(‘width’) and .width() is the data type of value we specify or return from the both functions.
2. In .css(‘width’) we have to add “px” in the width value while in .width() we don’t have to add.
3. When you want to get the width of “mydiv” element then .css(‘width’) will return ‘300px’ while .width() will return only integer value 300.

What is the use of jQuery.data()?

1. jQuery.data() is used to set/return arbitrary data to/from an element.
2. Syntax: jQuery.data(element, key, value)
3. “element” is the DOM element to which the data is associated.
4. “key” is an arbitrary name of the piece of data.
5. “value” is value of the specified key.
6. Suppose we want to set the data for a span element:
jQuery.data(span, “item”, { val1: 10, val2: "myitem" });

If we want to retrieve the data related to div element and set it to label’s data:
$("label:val1").text(jQuery.data(div, "item").val1);
$("label:val2").text(jQuery.data(div, "item").val2);

Explain bind() vs live() vs delegate() methods.

- The bind() method will not attach events to those elements which are added after DOM is loaded while live() and delegate() methods attach events to the future elements also.
- The difference between live() and delegate() methods is live() function will not work in chaining. It will work only on an selector or an element while delegate() method can work in chaining.

For example
$(document).ready(function()
{
$("#myTable").find("tr").live("click",function()
{
     alert($(this).text());
});
});

Above code will not work using live() method. But using delegate() method we can accomplish this.
$(document).ready(function()
{
$("#dvContainer")children("table").delegate("tr","click",function()
{
     alert($(this).text());
});
});

Explain the each() function.

- The each() function specify the function to be called for every matched element.

Syntax :
$(selector).each(function (index, element))

1. “index” is the index position of the selector.
2. “selector” specifies the current selector where we can use “this” selector also.
3. In the case when we need to stop the each loop early then we can use “return false;”

For example
$("#clickme").click(function()
{
$("li").each(function()
{
     document.write($(this).text())
});
});

This will write the text for each “li” element.

Explain slideToggle() effect.

- slideToggle() effect is used to give animated sliding effect to an element.

Syntax:
slideToggle([ duration] [, easing] [, callback])

1. “duration” is the number specifying how long the animation will run.
2. “easing” is the string which specify the function for the transition.
3. “callback” is the function which we want to run once the animation is complete.
4. If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
5. We can specify the toggle speed with this effect.

For example
$("#clickme").click(function()
{
$("#mydiv").slideToggle(“slow”, function()
{
     //run after the animation is complete.
});
});

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

Refer the following example:
$(document).ready(function()
{
$(‘#clickme’).click(function()
{
     alert($(this).text());
     alert(this.innerText);
});
});

- 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.
1 2 3 4

What is jQuery?
What is jQuery? - jQuery is a JavaScript library that simplifies JavaScript and AJAX programming
Advantages of jQuery
The advantages of using jQuery are....
Features of jQuery
Features of jQuery - Effects and animations, Extensibility, DOM element selections functions, CSS manipulation..........
Post your comment