The web’s most popular JavaScript library has been updated. jQuery 1.6 is now available for download from:

The jQuery team try to maintain compatibility with older releases. However, while most people won’t experience problems, there’s no substitute for rigorous testing. As well as the numerous bug fixes and speed improvements, there are several major changes in the latest release…

CHANGE: Separate Handling of DOM Attributes and Properties

In most cases, JavaScript developers handle DOM node attributes and properties identically. Previous versions of jQuery did not make any distinction but there are a few issues with this approach. Consider:

<input type="checkbox" checked />

In this case, the DOM .checked property is set to true but the attribute value is an empty string. In previous versions of jQuery, .attr(“checked”) would return true — it now returns “”. The new .prop() and .removeProp() methods can be used to modify or remove a DOM property accordingly.

CHANGE: Data Attribute Casing

The .data() method automatically imports HTML5 data attributes, e.g.

<div data-day-now="Monday" />

In jQuery 1.5, this would result in a the data object { day-now: “Monday” }. Version 1.6 follows the W3C HTML5 specification and sets { dayNow: “Monday” }.

NEW: focus selector

It’s now possible to select an element which has focus, e.g.


Note that if you’re searching for the element which currently has focus, $(document.activeElement) is faster and more efficient.

NEW: jQuery.holdReady( hold )

The $.holdReady() method delays jQuery’s ready event. This could be used to dynamically load scripts before ready events are fired, e.g.

$.getScript("anotherScript.js", function() {
	 // ready event can now fire


CSS properties can now be modified using relative values, e.g.

// move 10px to the right
$("#item").css("left", "+=10px");


It’s now possible to map the properties of objects as well as array elements, e.g.

var obj = { p1: 1, p2: 2, p3: 3 }; obj, function( val ) { ... });

IMPROVED: find(), closest() and is()

Traversing and locating nodes in the DOM tree can now be matched against an element as well as a selector string or jQuery object.

On to jQuery 1.7…

The jQuery team are now taking proposals for version 1.7. If you’re desperate for a new or improved feature, please leave your comments on the jQuery 1.7 Roadmap Proposal form.

Tags: CSS, HTML5 Dev Center, HTML5 Tutorials & Articles, javascript, jQuery Tutorials & Articles
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Textfriend

    That’s good. Must get in to learning the details of jQuery.

  • Gozie

    This is nice…

  • Gaurav Mishra

    Relative CSS values!
    Now this is awesome!

  • Ashraf

    Thanks for the quick info Craig.

  • Halil

    I keep wondering about what can be the use of holdReady(). If you need to wait for a script, couldn’t you just include it in the head? The only possibility that comes to mind is some kind of pre-initialization, e.g. arranging something about the scripts/libraries before use, which is a case I’ve never seen.

    • Craig Buckler

      It could be used when you’re dynamically loading scripts. For example, you could detect when a browser supports canvas then load a manipulation library.

  •ễn/100001422425877 Thanh Nam Nguyễn


  •ễn/100001422425877 Thanh Nam Nguyễn

    ${Name} (${ReleaseYear})

    dataType: “jsonp”,
    url: “data2.php”,
    jsonp: “$callback”,
    success: showMovies

    // Within the callback, use .tmpl() to render the data.
    function showMovies( data ) {
    $(“#movieTemplate”).tmpl( data ).appendTo(“#movieList”);

    Is that right ? please help me


    [{ Name: “The Red Violin”, ReleaseYear: “1998” },
    { Name: “Eyes Wide Shut”, ReleaseYear: “1999” },
    { Name: “The Inheritance”, ReleaseYear: “1976” }]

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.