What’s New in jQuery 1.6

Tweet

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

http://code.jquery.com/jquery-1.6.js
http://code.jquery.com/jquery-1.6.min.js

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.


$("input:focus").addClass("focused");

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.


$.holdReady(true);
$.getScript("anotherScript.js", function() {
     $.holdReady(false);
	 // ready event can now fire
});

IMPROVED: Relative CSS

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


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

IMPROVED: jQuery.map()

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 };
jQuery.map( 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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

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

    • http://www.optimalworks.net/ 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.

  • http://www.facebook.com/people/Thanh-Nam-Nguyễn/100001422425877 Thanh Nam Nguyễn

    te

  • http://www.facebook.com/people/Thanh-Nam-Nguyễn/100001422425877 Thanh Nam Nguyễn

    ${Name} (${ReleaseYear})

    $.ajax({
    dataType: “jsonp”,
    url: “data2.php”,
    jsonp: “$callback”,
    success: showMovies
    });

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

    Is that right ? please help me

    data2.php

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