jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.This article 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. 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. Similarly, if any of the properties has the name “css”, “val”, “html”, “text”, “data”, “width”, “height”, or “offset”, then the value of that property is passed to the method with the same name as the property. The following code, for example, creates a new element, sets three HTML attributes of it, registers an event handler for it, and sets a CSS style attribute on it:
var image = $("", {
src: image_url,
alt: image_description,
className: "translucent_image",
click: function() {$(this).css("opacity", "50%");},
css: { border: "dotted red 3px" }
});
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.
