Matteo Bicocchi's Blog

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:

jquery 1.3.2 versus 1.4 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:
  The .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:

DOM Insertion

Performance of .html()

Performance of .remove() and .empty()

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.