What is new in jQuery 1.4. Features for a happy programming
jQuery team have done a great work in this new 1.4 release.
The new release of jQuery has come out with many new features and code optimization (http://api.jquery.com/category/version/1.4/) to ease manipulate and traversing DOM elements.
The most impressive improvement is internal calls reduction to perform jQuery methods, with a significant increase in performance:
Lets take a closest look at some useful changes
-
All setter method now accept a function as value:
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and .toggleClass().
$('div.demo-container').html(function() { var emph = '' + $('p').length + ' paragraphs!'; return 'All new content for ' + emph + ''; });
-
Quick Element Construction:
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");
- Event Multi-binding:
You can now pass an object of many events to bind to an element:$("div.test").bind({ click: function(){ $(this).addClass("active"); }, mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } });
- All Events Can Be Live Events:
Has been introduced cross-browser support for change, submit, focusin, focusout, mouseenter, and mouseleave via the event delegation in .live(). Note that if you need a live focus event, you should use focusin and focusout rather than focus and blur, because focus and blur do not bubble. Also, live() also now accepts a data object, just as bind() has:$("p").live("myCustomEvent", function(e, myName, myValue){ $(this).text("Hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000); }); $("button").click(function () { $("p").trigger("myCustomEvent"); });
- before, after, replaceWith on disconnected nodes:
You can now use before, after, and replaceWith on nodes that are not attached to the DOM. This allows you to do more complex manipulations before inserting the final structure into the DOM.jQuery(" ").before("Hello").appendTo("body")
- .offset( coords | Function )
It is now possible to set the offset of an element. Offset, like all setter methods, can now also accept a function as a second argument.$(MyEl).offset({ top: 10, left: 30 });
- New .delay() method:
The1.delay()method will delay any further elements in the queue for the specified number of milliseconds.
$("div").fadeIn().delay(4000).fadeOut();
And many other features are waiting to be used for our great new projects!
I think that this release of jQuery is a great step forward for web based applications development and their usability, as well as key tool for stimulating creativity in the web world.
Here are some graphs that show the dramatic overhauls in performance:
Don’t be afraid to update to 1.4! Backwards-Incompatible is really minimized:
- .add() no longer plainly concatenates the results together, the results are merged and then sorted in document order.
- .clone(true) now copies events AND data instead of just events.
- jQuery.data(elem) no longer returns an id, it returns the element’s object cache instead.
- jQuery() (with no arguments) no longer converts to jQuery(document).
- .val(“…”) on an option or a checkbox is no longer ambiguous (it will always select by value now, not by text value).
- jQuery.browser.version now returns engine version.
- jQuery is now strict about incoming JSON and throw an exception if we get malformed JSON. If you need to be able to evaluate malformed JSON that is valid JavaScript, you can make a text request and use eval() to evaluate the contents.
- Param serialization now happens in the PHP/Rails style by default. You can use jQuery.ajaxSettings.traditional = true; to use traditional parameter serialization. You can also set the behavior on a per-request basis by passing traditional: true to the jQuery.ajax method.
- jQuery.extend(true, …) No longer extends non-plain-objects or arrays.
- If an Ajax request is made without specifying a dataType and it is returned as text/javascript, it will be executed. Previously, an explicit dataType was required.
- Setting an Ajax request’s ifModified now takes ETags into consideration.
[…] Infografía reproducida del blog Matteo Bicocchi´s […]
[…] Infografía reproducida del blog Matteo Bicocchi´s Publicado en Tecnologías Web | Sin Comentarios […]
wonderful nice article Jqurey its is very helpful great posting.
Thanks for the heads up, it will be very interesting using the new features.
[…] JavaScript reviews: jQUery 1.4 and grid editors January 18, 2010 Pietro Polsinelli Leave a comment Go to comments A review of jQuery 1.4 by Pupunzi here. […]
Social comments and analytics for this post…
This post was mentioned on Twitter by pupunzi: What’s new in jQuery 1.4. Features for a happy programming. http://bit.ly/89TmA7…
[…] .Articulo Indexado en la Blogosfera de Sysmaya […]
Good article … tnks Matteo
[…] This post was mentioned on Twitter by Matteo Bicocchi, Pascal. Pascal said: RT @pupunzi: What's new in jQuery 1.4. Features for a happy programming. http://bit.ly/89TmA7 […]