8 jQuery Methods You Need to Know

Introduction

jQuery has become the most famous Javascript framework because of its simplicity and totally rewrote the hassle of writing traditional javascript. Well, I used to hate javascript, but jQuery changed my mind. It saves tremendous of time to develop interactive front end interface.

I reckon jQuery documentation contributes to the success of jQuery as well. It's really helpful and concise. I went through the documentation again, and found out some interesting methods that we might have missed. Some of them are pretty common (good to mention anyway), but some of them are not. So, check out the list, if I missed something, drop a comment and shout it out. Enjoy :)

1 .data()

jQuery.com - "The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks."

With the introduction of HTML5, we can use it as attribute as well. For example

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>

//We can call it via:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

The following will work as the above example too:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

Reference: jQuery Documentation - .data()

2 .stop( [ clearQueue ], [ jumpToEnd ] )

jQuery.com - "When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called."

This method is extremely useful when dealing with animation. It able to terminate all existing animation, and play the most current one.

$(this).find('img').stop(true, true).fadeOut();

Reference: jQuery Documentation - .stop()

3 .toggleClass()

jQuery.com - "Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument."

This method allow you to toggle between class, for example, if you have an element with "active" class attached, when this method was used, it will switch it by toggle it on and off (if class exist, remove the class, otherwise put it back on)

$('#home').toggleClass('active');

Which is the same with the following:

if ($('#home').hasClass('active')) {
    $('#home').removeClass('active');
  }
  else {
    $('#home').addClass('active');
  }

Reference: jQuery Documentation - .toggleClass()

4 .delay( duration, [ queueName ] )

jQuery.com - "Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue."

This method is really useful to give some delays in a series of animations.

$('#content').slideUp(300).delay(800).fadeIn(400);

Reference: jQuery Documentation - .delay()

5 .each()

jQuery.com - "The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element."

//Given this HTML Structure
<ul>
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
	<li>Blueberry</li>
	<li>Watermelon</li>
</ul>

//We can retrieve the value with:
$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});


//Alternatively, loop through JSON
var data = "{ name: "John", lang: "JS" }";

$.each( data, function(k, v){
   alert( "Key: " + k + ", Value: " + v );
});

Reference: jQuery Documentation - .each()

6 .size()

jQuery.com - "The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call."

But, it still good to know anyway :)

//Given this HTML Structure
<ul>
	<li>Apple</li>
	<li>Orange</li>
	<li>Mango</li>
	<li>Blueberry</li>
	<li>Watermelon</li>
</ul>

var size1 = $("li").size();
var size2 = $("li").length;

Both of the examples above will return 5.

Reference: jQuery Documentation - .size()

7 .closest(selector)

jQUery.com - Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

$('li.item-a').closest('ul').css('background-color', 'red');

Reference: jQuery Documentation - .closest()

8 .position()

jQUery.com - The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);

Reference: jQuery Documentation - .position()

• TAGS:
• jQuery
• Tips