jQuery Tips and Tricks you Must Memorize – part 2

Posted on July 17, 2011 | Comments Off on jQuery Tips and Tricks you Must Memorize – part 2

Wrap everything in a single element when doing any kind of DOM insertion

var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

How to tell when images have loaded
This is another one of those problems that doesn’t seem to be as well documented as it should be (not when I went looking anyway) and it’s a fairly common requirement when building photo galleries, carousels etc, but it’s fairly easy.

All you have to do is use the .load() method on an IMG element and put a callback function in it. The following example changes the “src” attribute of an image tag to load a new image and attaches a simple load function.

$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

Specify Even and Odd Selectors

	$("ul li:even").addClass("even");
	$("ul li:odd").addClass("odd");

Keep Selectors Simple

$('li[data-selected="true"] a')	// Fancy, but slow
$('li.selected a')	// Better
$('#elem')	// Best

Use CSS Hooks
The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties.

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

The $.proxy()
One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup:

<div id="panel" style="display:none">
	<button>Close</button>
</div>

$('#panel').fadeIn(function(){
	// this points to #panel
	$('#panel button').click(function(){
		// this points to the button
		$(this).fadeOut();
	});
});

You will run into a problem – the button will disappear, not the panel. With $.proxy, you can write it like this:

$('#panel').fadeIn(function(){
	// Using $.proxy to bind this:

	$('#panel button').click($.proxy(function(){
		// this points to #panel
		$(this).fadeOut();
	},this));
});

Which will do what you expect. The $.proxy function takes two arguments – your original function, and a context. It returns a new function in which the value of this is always fixed to the context.

Use delay() for Animations
Chaining animation effects is a powerful tool in every jQuery developer’s toolbox. One of the more overlooked features is that you can introduce delays between animations.

// This is wrong:
$('#elem').animate({width:200},function(){
	setTimeout(function(){
		$('#elem').animate({marginTop:100});
	},2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

To appreciate how much time jQuery’s animation() save us, just imagine if you had to manage everything yourself: you would need to set timeouts, parse property values, keep track of the animation progress, cancel when appropriate and update numerous variables on every step.

• Tweet

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments