Jump to content

5 Things You Might Not Know about jQuery

+ 5
  davidflanagan's Photo
Posted Jan 05 2011 09:31 PM

jQuery is a very powerful library, but some of its powerful features are obscure, and unless you've read 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.

  • 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 $().

  • 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.


    (Edit: Thanks to niyazpk and jerone for letting me know, in the comments, that the paragraph above was wrong. The special property names only work in the case described below, which I've also updated. Sorry for my confusion!)

    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 = $("<img>", {
                      src: image_url,
                      alt: image_description,
                      className: "translucent_image",
                      click: function() {$(this).css("opacity", "50%");},
                      css: { border: "dotted red 3px" }
                   });
    


  • 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");
    


  • 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.

  • 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.


jQuery Pocket Reference

Learn more about this topic from jQuery Pocket Reference.

jQuery is the "write less, do more" Javascript library. Its powerful features and ease of use have made it the most popular client-side Javascript framework for the Web. Ideal for Javascript developers at all skill levels, this book is jQuery's trusty companion: the definitive "read less, learn more" guide to the library. jQuery Pocket Reference explains everything you need to know about jQuery, completely and comprehensively.

See what you'll learn


Tags:
1 Subscribe


19 Replies

0
  niyazpk's Photo
Posted Jan 06 2011 07:02 AM

The first example for the 2nd point is wrong:

   //The following two lines have the same effect, for example:

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


Not correct. The first line will create an attribute called 'css' while the second line will change the 'style' attribute. The author probably meant something like:

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


...but even these two lines are not exactly the same. The first one will reset the style attribute to the given value while the second line will just change the backgroundColor value in the style attribute.
 : Jan 06 2011 07:16 AM
Could you please post an example for point #1?
0
  Adolph Trudeau's Photo
Posted Jan 06 2011 07:42 AM

The second example doesn't work for me.

var image = $("").appendTo("body"); //Nothing appended to body.


I think it should be:

var image = $("<img>").appendTo("body"); //img node appended to body.

0
  davidflanagan's Photo
Posted Jan 06 2011 08:28 AM

Adolph,

You're right. My angle brackets got eaten. Sorry.

Scott,

All I mean is you can pass a function directly to $(). Many people do this all the time. Some coders still seem to be using the older ready() method.

Niyazpk,

It looks wrong, but it isn't. Try it out. In 1.4 (at least) the attribute name "css" is special. Setting it with attr() actually calls the css() method.
 : Jan 06 2011 09:47 AM
Can you please discuss a bit more about #3 and using name-spacing in event-handlers? It's a new concept to me, and I'm very curious about it, how it would be used, etc. Or perhaps direct us to articles on the concept?
0
  mrpollo's Photo
Posted Jan 06 2011 01:48 PM

the use of $().ready(handler) is not recommended by the official jQuery API Docs

$().ready(handler) //(this is not recommended)*


Is there any specific detail on why we should be using it?

*jQuery API Docs - Ready Event
0
  davidflanagan's Photo
Posted Jan 06 2011 01:53 PM

lelando,

There is more about event handler namespaces in my book!

mrpollo,

You misunderstand me. I'm saying the same thing as the jQuery docs here. If you have a function f and you want that function to be invoked when the document is ready, just call $(f). There are jQuery programmers who are still calling $(document).ready(f). That is no longer necessary.
-2
  jdeper's Photo
Posted Jan 07 2011 12:05 AM

I disagree at 1st case , sometime you still need $(document).ready()
	<script>
	$(document).ready(function(){
		$("#test").css("background","red");
	});	
	</script> 
	<div id="test"> test div </div>


if remove $(document).ready() you see it.
0
  aidilfbk's Photo
Posted Jan 07 2011 06:54 AM

jdeper,

I think the author meant that you can directly invoke the function without calling $(document).ready explicitly. The code that you have used as an example will also work with Tip #1 like so:

$(function(){
	$("#test").css("background","red");
})


This will still run on the ready event even though it hasn't been explicitly called to do so.
0
  benjreinhart's Photo
Posted Jan 07 2011 08:32 AM

How long have you been able to use $() and pass in a function without have to specify $(document).ready() because I've been using that shorthand for quite sometime but you say "You don't have to use $(document).ready() anymore"? It also seems like quite a lot of people were unaware of this.

Also, thanks for the tip on queue: false, I was not aware of this.. very useful.
0
  lelando's Photo
Posted Jan 07 2011 09:43 AM

@David - *which* book? :-)
 : Jan 07 2011 10:19 AM
jdeeper,

aidifbk is correct. All I mean is that you should pass your "onload" function to $() instead of $(document).ready(). Thanks aidifbk for clarifying.

benjreinhart,

I'm not sure how long $() has worked as an alternative to $(document).ready(). I'm pretty sure it worked in 1.3. You're right that "anymore" is kind of misleading. But I share your surprise at how many are unaware of it, which is why I put it at the top of my list here! It might mean that jQuery needs better documentation (like jQuery Pocket Reference :-) or it might have something to do with how much we developers have come to rely on (out-of-date and poorly written) articles on the web to learn new technologies... But that is a rant for another time!

lelando,

I mean my new jQuery book, _jQuery Pocket Reference_. This article is a promo for, and consists of excerpts from, that book. And I'm not trying to be coy about not revealing event namespace details here. Its just that I've got to get back to work on Javascript: The Definitive Guide.
0
  jerone's Photo
Posted Jan 07 2011 10:42 AM

$(function(){ ... });
is a shortcut for:
$(document).ready(function(){ ... });
It does the same, only shorter.

The second tip, I can't get to work. I put all available suggestion online, but it doesn't work: http://jsfiddle.net/jerone/hZjTd/1/
0
  davidflanagan's Photo
Posted Jan 07 2011 11:41 AM

Jerone: You're right. Point 2 doesn't work.

Niyazpk: you told me I was wrong, but I didn't believe you. My apologies!

This was based on a mis-reading of the jQuery source code and, obviously, a failure to test this example.

css, val, text, html, etc. do work as property names when you are creating new elements with $ and passing an object as the second argument to configure them.

For example, to extend the example that Jernone linked to:

  $(document.body).append($("<p>", {
        id: "test7",
        text: "test 7",
        css: { backgroundColor: "red" },
        click: function() { alert('hello world'); }
    }));


Try it here: http://jsfiddle.net/hZjTd/2/

I'll fix the article.
0
  benjreinhart's Photo
Posted Jan 07 2011 05:57 PM

"But I share your surprise at how many are unaware of it, which is why I put it at the top of my list here! It might mean that jQuery needs better documentation (like jQuery Pocket Reference :-) or it might have something to do with how much we developers have come to rely on (out-of-date and poorly written) articles on the web to learn new technologies..."

Or maybe they should just read a book on jQuery, I learned that from jQuery: Novice to Ninja, and I believe HTML5 and CSS3 from pragmatic programmers include that tip.

Ohhh well...
0
  Leo Balter's Photo
Posted Jan 08 2011 05:13 AM

Even considering the fact you write less with $(function() { /* code here */ });, actually the best option, IMO is jQuery(function($) { /* code here */ });

This way you create a local var $ making it an instance of jQuery. Why? to prevent external conflicts with other javascript libs as Prototype and others.

You don't write that less, but you do even more.

The external $ is just a reference to jQuery variable, but you won't find another libs overwriting the jQuery name.
+ 1
  fredjanon's Photo
Posted Jan 17 2011 03:37 AM

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

Is it just a matter of more concise code or does it have a side effect?

"anymore"? Since what version of jQuery?
0
  Cuprum's Photo
Posted Feb 06 2011 11:24 AM

in second example must be
css("opacity", "0.5")
because
css("opacity", "50%")
don`t work
0
  Refulz's Photo
Posted Dec 28 2011 05:01 AM

Hi,

About the question regarding the use of $().ready(handler). The syntax has been deprecated since jQuery 1.4. Please refer to the full release notes.

Refulz PHP