5 Things You Might Not Know about jQuery

5 Things You Might Not Know about jQuery: "

jQuery is a very powerful library, but some of its powerful

features are obscure, and unless you've ready the jQuery source code,

or my new book jQuery Pocket Reference,

you may not know about them. This article excerpts that book to

describe five useful features of jQuery that you might not know

about.

1) You don't have to use $(document).ready() anymore,

though you'll still see plenty of code out there that does. If you

want to run a function when the document is ready to be manipulated,

just pass that function directly to $().

2) attr() is jQuery’s master attribute-setting

function, and you can use it to set things other than normal HTML

attributes. If you use the attr() method to set an attribute

named “css”, “val”, “html”, “text”, “data”,

“width”, “height”, or “offset”, jQuery invokes the method

that has the same name as that attribute and passes whatever value

you specified as the argument. The following two lines have the same

effect, for example:

$('pre').attr('css', {backgroundColor:'gray'})

$('pre').css({backgroundColor:'gray'})

You probably already know that you can pass a tagname to $()

to create an element of that type, and that you can pass (as a second

argument) an object of attributes to be set on the newly created

element. This second argument can be any object that you would pass

to the attr() method, but in addition, if any of the

properties have the same name as the event registration methods, the

property value is taken as a handler function and is registered as a

handler for the named event type. The following code, for example,

creates a new element, sets three HTML attributes, and registers an

event handler function on it:

var image = $('', {

                  src: image_url,

                  alt: image_description,

                  className: 'translucent_image',

                  click: function() {$(this).css('opacity', '50%');}

               });

3) jQuery defines simple methods like click() and change()

for registering event handlers and also defines a more general

event handler registration method named bind(). An important

feature of bind() is that it allows you to specify a

namespace (or namespaces) for your event handlers when you register

them. This allows you to define groups of handlers, which comes in

handy if you later want to trigger or de-register all the handlers in

a particular group. Handler namespaces are especially useful for

programmers who are writing libraries or modules of reusable jQuery

code. Event namespaces look like CSS class selectors. To bind an

event handler in a namespace, add a period and the namespace name to

the event type string:

// Bind f as a mouseover handler in namespace 'myMod'

$('a').bind('mouseover.myMod', f);

If your module registered all event handlers using a namespace, you

can easily use unbind() to de-register them all:

// Unbind all mouseover and mouseout handlers

// in the 'myMod' namespace

$('a').unbind('mouseover.myMod mouseout.myMod');

// Unbind handlers for any event in the myMod namespace

$('a').unbind('.myMod');

4) jQuery defines simple animation functions like fadeIn(),

and also defines a general-purpose animation method named animate().

The queue property of the options object you pass to

animate() specifies whether the animation should be placed

on a queue and deferred until pending and previously queued

animations have completed. By default, animations are queued, but you

can disable this by setting the queue property to false.

Unqueued animations start immediately. Subsequent queued animations

are not deferred for unqueued animations. Consider the following

code:

$('img').fadeIn(500)

        .animate({'width':'+=100'},

                 {queue:false, duration:1000})

        .fadeOut(500);

The fadeIn() and fadeOut() effects are queued, but

the call to animate() (which animates the width

property for 1000ms) is not queued. The width animation begins at the

same time the fadeIn() effect begins. The fadeOut()

effect begins as soon as the fadeIn() effect ends—it does

not wait for the width animation to complete.

5) jQuery fires events of type “ajaxStart” and “ajaxStop” to

indicate the start and stop of Ajax-related network activity. When

jQuery is not performing any Ajax requests and a new request is

initiated, it fires an “ajaxStart” event. If other requests begin

before this first one ends, those new requests do not cause a new

“ajaxStart” event. The “ajaxStop” event is triggered when the

last pending Ajax request is completed and jQuery is no longer

performing any network activity. This pair of events can be useful to

show and hide a “Loading...” animation or network activity icon.

For example:

$('#loading_animation').bind({

    ajaxStart: function() { $(this).show(); },

    ajaxStop: function() { $(this).hide(); }

});

These “ajaxStart” and “ajaxStop” event handlers can be bound

to any document element: jQuery triggers them globally rather than on

any one particular element.

Comments"