HTML5 Development Center

Developed for you in part by
 
435-jquery-143

What’s New in jQuery 1.6

By | | HTML5 | JavaScript

8

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.

The Ultimate JavaScript Bundle: 2 books + 1 course

Buy now $39 Normally $117 - save 66%

Or get access to all SitePoint's Premium Content with a Learnable membership

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

{ 8 comments }

Thanh Nam Nguyễn June 23, 2011 at 8:10 am

${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" }]

Thanh Nam Nguyễn June 23, 2011 at 8:08 am

te

Halil May 12, 2011 at 4:44 am

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 May 13, 2011 at 8:13 am

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.

Ashraf May 11, 2011 at 7:58 am

Thanks for the quick info Craig.

Gaurav Mishra May 6, 2011 at 12:02 am

Relative CSS values!
Now this is awesome!

Gozie May 5, 2011 at 8:50 pm

This is nice…

Textfriend May 5, 2011 at 5:56 pm

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

Comments on this entry are closed.