jQuery Minute™

…a jQuery Minute™ later and you're done!

Archive for the ‘jQuery Documentation’ Category

jQuery add or remove class with toggleClass

without comments

Back in May of 2008 I posted about how to dynamically call a jQuery function and the practical use in adding or removing a class in one fell swoop. Since that post the toggleClass method has been updated to accept a second argument, a boolean value to signify adding or removing a class.

First the classic toggle class example:

1
$('body').toggleClass('blue');

Which just as the method describes will add the class “blue” if it doesn’t exit or remove it if it does.

In the next example we make use of addClass or removeClass

1
2
3
4
5
if ( $('body').hasClass('makeBlue') ) {
    $('body').removeClass('blue');
} else {
    $('body').addClass('blue');
}

Which has the same result and function as our first example with the difference that we’re adding or removing a class based upon the condition of body having the class “makeBlue”.

So here is an updated example making use of toggleClass along with the second argument that when true adds the class and conversely if false removes the class.

1
2
var addBlue = $('body').hasClass('makeBlue');
$('body').toggleClass('blue', addBlue );

And the final reduced version:

1
$('body').toggleClass('blue', $('body').hasClass('makeBlue') );

Cheers,
– Jonathan

Written by jdsharp

October 3rd, 2009 at 12:13 am

jQuery Iteration and each()

without comments

There was a recent thread on the jQuery discussion group in that there was a need for looping through a series of elements and dynamically binding an event. An issue was brought up with closures and the arguments for dynamic binding of functions. Brandon Aaron provided an elegant solution that makes use of jQuery’s internal each() function. Let’s jump in!

So here’s a paraphrase of Brandon’s code:

Example 1:
jQuery.each( [0,1,2,3,4], function(index, item){
// Your code
});

At first glance this may look the same as your standard iteration code using each but it differs slightly and that is where the benefit is. Let’s look at using the standard each method on a jQuery object:

Example 2:
$(‘selector’).each(function(index){
// Your code
});

In this example jQuery internally manages the collection (array) of matched elements by the selector.

But, by using jQuery’s internal .each() method (Example 1) we’re able to pass in an arbitrary array in which each item will have the callback executed. An elegant solution to your typical for ( i ) loop. Your callback can accept two arguments: index, item where index is the numerical zero based index in the array of the current item and item is the value of the current array. Also worth noting is that by returning false from you callback you can stop iteration over the array (this is the same as using a break; statement in a for loop).

Happy coding!

Written by jdsharp

February 7th, 2008 at 8:00 am

jQuery Event Namespacing

without comments

A feature often over looked is namespacing your events in jQuery.

jQuery added in support for $(...).bind('event.namespace', fn). This is primarily useful for plugin authors who may bind numerous events to elements and want to remove only their events without needing to keep a pointer to the function they bound. So for example, you can do: $(...).bind('click.myNS', function(){...}); $(...).unbind('click.myNS'); which will unbind the click event with the ‘myNS’ name space.

For more on this read an entry over at Learning jQuery:
http://www.learningjquery.com/2007/09/namespace-your-events

Happy eventing!
-Jonathan

Written by jdsharp

January 15th, 2008 at 10:49 am

addClass() removeClass()

without comments

If you have to add or remove multiple classes with jQuery, the most efficient way is to separate the classes with a space and make one call.

Such as:

1
$('body').addClass('abc def');

As opposed to:

1
$('body').addClass('abc').addClass('def');

Written by jdsharp

December 11th, 2007 at 12:22 pm

jQuery Documentation – Windows CHM Reference Manual

without comments

Picked up from the jquery-en Google Groups, here is a Windows CHM Help file version of the jQuery documentation.

http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/

Written by jdsharp

December 11th, 2007 at 12:07 pm