In celebration of jQuery’s 4th birthday, the jQuery team is pleased to release the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone into this release, and we’re really quite proud of it.
I want to personally thank Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Katić, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint who put a lot of work into fixing bugs and getting the release out the door.
Downloading
As usual, we provide two copies of jQuery, one minified (we now use the Google Closure Compiler as the default minifier) and one uncompressed (for debugging or reading).
NOTE: jQuery 1.4.1 has already been released. Please use that instead of the 1.4 release.
- jQuery Minified (23kb Gzipped)
- jQuery Regular (154kb)
Additionally, Google has provided us with a copy of jQuery hosted on their servers. This copy of jQuery is automatically minified and gzipped – and served from Google’s fast edge cache servers.
You can feel free to include the above URL directly into your site and you will get the full performance benefits of a quickly-loading jQuery.
With jQuery 1.4 we attempted to minimize any large upgrade hassles – maintaining the signatures of all public functions. That being said, please read through the list of potentially-breaking changes to be aware of what might cause problems in your applications.
Features
Below is an overview of all the changes and functionality added to jQuery 1.4. Additionally all of the changes have been documented in the jQuery 1.4 docs.
Performance Overhaul of Popular Methods
Many of the most popular and commonly used jQuery methods have seen a significant rewrite in jQuery 1.4. When analyzing the code base we found that we were able to make some significant performance gains by comparing jQuery against itself: Seeing how many internal function calls were being made and to work to reduce the complexity of the code base.
In jQuery 1.4 we’ve significantly reduced the complexity of the most popular methods in jQuery. The full performance details can be found below.
Easy Setter Functions
For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and .toggleClass().
Addtionally, for the following options, the current value of the item is passed into the function as the second argument: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), and .toggleClass().
This enables code like:
// find all ampersands in A's and wrap with a span
$('a').html(function(i,html){
return html.replace(/&/gi,'<span class="amp">&</span>');
});
// Add some information to the title of the anchors
$('a[target]').attr("title", function(i,title){
return title + " (Opens in External Window)";
});Ajax
Nested param serialization (jQuery.param() Documentation, Commit 1, Commit 2)
jQuery 1.4 adds support for nested param serialization in jQuery.param, using the approach popularized by PHP, and supported by Ruby on Rails. For instance, {foo: ["bar", "baz"]} will be serialized as “foo[]=bar&foo[]=baz”.
In jQuery 1.3, {foo: ["bar", "baz"]} was serialized as “foo=bar&foo=baz”. However, there was no way to encode a single-element Array using this approach. If you need the old behavior, you can turn it back on by setting the traditional Ajax setting (globally via jQuery.ajaxSettings.traditional or on a case-by-case basis via the traditional flag).
There are three ways to enable the traditional way of serialization:
// Enables for all serialization
jQuery.ajaxSettings.traditional = true;
// Enables for a single serialization
jQuery.param( stuff, true );
// Enables for a single Ajax requeset
$.ajax({ data: stuff, traditional: true });More information: jQuery.param() Documentation, jQuery.ajax() Documentation, Commit, Code
JSON and script types auto-detected by content-type (jQuery.ajax Documentation, Commit 1, Commit 2)
If the response to an Ajax request is returned with a JSON mime type (application/json), the dataType defaults to “json” (if no dataType is specified). Additionally, if the response to an Ajax request is returned with a JavaScript mime type (text/javascript or application/x-javascript) , the dataType defaults to “script” (if no dataType is specified), causing the script to automatically execute.
Etag support has been added (jQuery.ajax() Documentation, Commit)
By default, jQuery ignores the Last-Modified header for Ajax requests, preferring to make request and ignore the browser cache. Specifying ifModified: true causes jQuery to use the browser cache if available. jQuery 1.4 will also send the If-None-Match header (for ETag support) if you specify ifModified.
Strict JSON parsing, using native JSON.parse (jQuery.ajax() Documentation, Commit 1, Commit 2, Commit 3)
jQuery 1.3 and earlier used JavaScript’s eval to evaluate incoming JSON. jQuery 1.4 uses the native JSON parser if available. It also validates incoming JSON for validity, so malformed JSON (for instance {foo: "bar"}) will be rejected by jQuery in jQuery.getJSON and when specifying “json” as the dataType of an Ajax request.
Serialize HTML5 elements (jQuery.param() Documentation, Commit)
The new HTML5 input types (such as `datetime` and `range`) will be included when you .serialize() a form.
Context for Ajax Request (jQuery.ajax() Documentation, Commit)
You can now specify a context for an Ajax request, and all callbacks will have that context set (allowing you to simplify your code and possibly avoid having to use closures, or use other objects).
jQuery.ajax({
url: "test.html",
context: document.body,
success: function(){
jQuery(this).addClass("done");
}
});Success callback receives XHR object as third argument (jQuery.ajax() Documentation, Commit)
The success callback for any ajax request now receives the XMLHttpRequest object as the third argument. Previously this XHR object was only accessible as the return value for $.ajax and the like.
Explicitly set a content-type (jQuery.ajax() Documentation, Commit)
In jQuery 1.3, the contentType setting was ignored in jQuery.ajax if no data was sent. In jQuery 1.4, the contentType is always sent. This fixes an issue with some backends that used the Content-Type header to decide what kind of response to send.
Explicitly specify a JSONP callback name (jQuery.ajax Documentation, Commit)
You can now specify the name of the JSONP callback in jQuery.ajax() using the jsonpCallback option.
Avoid pre-flighting cross-domain XHR (Commit)
Cross-domain ajax (for the browsers that support it) is smoother with jQuery as preflighting is avoided by default.
jQuery.ajax() is now using onreadystatechange instead of a timer (Commit)
Ajax requests should now take fewer resources by using onreadystatechange instead of polling.
Attributes
The performance of .css() and .attr() has been improved.
The .attr() takes a function setter (.attr() Documentation)
Not only can you use a function with .attr(), but you can also use the current value of the attribute with the function.
jQuery('<img src="enter.png" alt="enter your name" />')
.attr("alt", function(index, value) {
return "Please, " + value;
});.val( Function ) (.val() Documentation)
<input class="food" type="text" />
<input class="food" type="text" />jQuery("input:text.food").hide();
jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>")
.sortable()
.bind("endsort", function() {
$(":text.food").val(function() {
return $("ul.sortable li:eq(" + $(this).attr("data-index") + ")").text();
});
});</li>.text() works on text and CDATA nodes (.text() Documentation, Commit)
Core
Quick Element Construction (jQuery() Documentation, Commit)
When you create a single element with the jQuery function, you can now pass in an object to add attributes and events at the same time:
jQuery("<div>", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");The keys of the object are functions that will be called with each value passed as an argument.
.eq(-N), .get(-N) (.eq() Documentation, .get() Documentation, Commit)
You can now pass in negative numbers for .get() and .eq(). For example, you can select the second-to-last div or, you can access the DOM element for the same:
$("div").eq(-2);
$("div").get(-2);New .first() and .last() methods (.first() Documentation, .last() Documentation, Commit)
For convenience, .first() and .last() are aliases of .eq(0) and .eq(-1).
New .toArray() method (.toArray() Documentation, Commit)
.get() has historically returned an Array from the jQuery set. For further clarity, you can use .toArray() to achieve the same thing in jQuery 1.4. Unlike, .get(), however, .toArray() does not take an argument.
jQuery() returns empty set (jQuery() Documentation, Commit)
In jQuery 1.3, jQuery() returned a jQuery set containing just the document. in jQuery 1.4, it returns an empty jQuery set. This can be useful for creating an empty set and adding elements to it dynamically. Note: The jQuery().ready() technique still works in 1.4 but it has been deprecated. Please use either jQuery(document).ready() or jQuery(function(){}).
jQuery(“TAG”) (Element Selector Documentation, Commit)
A faster path is used when passing in a single tag name.
jQuery(“<div>”) jQuery(“<div/>”) and jQuery(“<div></div>”) (jQuery() Documentation, Commit)
All three now use the same code path (using document.createElement), improving performance for jQuery("<div></div>"). Note that if you specify attributes, we use the browser’s native parsing (using innerHTML).
CSS
The performance of the .css() method has seen a 2x performance improvement.
The performance of the .addClass(), .removeClass(), and .hasClass() methods has seen a 3x performance improvement.
.toggleClass() can toggle multiple classes (.toggleClass() Documentation, Commit)
You can now call .toggleClass() with multiple selectors and they will all be toggled.
$("div").toggleClass("current active");Big News: jQuery 1.4 has been released! Head on over to the 14 Days of jQuery site to see the full details:
Also Media Temple has just started their 15 prizes for 14 days of jQuery contest. Submit cool uses of jQuery and enter to win free hosting or even a laptop!
Originally published at 14 Days of jQuery (archived).
