How to use .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.
-.remove() is faster than .empty() or .detach() method.

Syntax:

$(selector).empty();
$(selector).remove();
$(selector).detach();

How to use slideToggle() effect via jquery?

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

Syntax:

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

• “duration” is the number specifying how long the animation will run.
• “easing” is the string which specify the function for the transition.
• “callback” is the function which we want to run once the animation is complete.
• 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.
• We can specify the toggle speed with this effect.

For example

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

Explain the each() function.

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

Syntax:

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

• “index” is the index position of the selector.
• “selector” specifies the current selector where we can use “this” selector also.
• 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 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 width() vs css(‘width’).

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

For example

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

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