Welcome to our first edition of Stay Fresh. Every day we will be posting content about a design or development topic. Sometimes, it will be about social media, creative strategy, or a product review. Either way, count on us to deliver something new and interesting everyday.
With that said, our first edition of Stay Fresh will cover jQuery. The latest version of this popular JavaScript framework is 1.3, which was just released on January 14th 2009. (Incidentally, the new version was released 3 years to the day of the first version of jQuery). The new version of jQuery has many new improvements, which we will cover today.
Sizzle
jQuery has a new CSS selector engine nicknamed “Sizzle”. According to the website: Sizzle is “a pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.” Although there is no documentation available (yet), check out http://sizzlejs.com/ for more information. We’ll keep you posted on any Sizzle developments.
Live or Die… or in this case, both!
jQuery now supports “live events” – events that can be bound to all current – and future – elements. Using event delegation, and a seamless jQuery-style API, the result is both easy to use and very fast.
For example:
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
Live events are very similar to the .bind function, with a few small differences:
- When you bind a live event, it is bound to all current and future elements. This is not the case with with the .bind function, as future elements will need to re-bound.
- Live events do not bubble.
- Live events currently only work when used against a selector, such as:
$("li a").live(...)
Learn more about about live and die.
It’s time for a new Event
Ariel Flesler brought some serious refactoring of the jQuery event system to jQuery 1.3. The bulk of this change came down to the new jQuery.Event object. This object completely encapsulates all of the functionality normally found in a W3C-compliant event object implementation and makes it work smoothly across all browsers.
Injecting HTML into your HTML
All HTML code injection scripting has been revised.
Offset Revision
At press time, not much information was available about the recently re-written version of offset. However, the rewritten version is now 3x faster. Hat tip to Brandon Aaron for the rewrite.
Sniffing out the Culprits
As of version 1.3, jQuery no longer uses any form of browser/userAgent sniffing internally – and is the first major JavaScript library to do so. Instead, this new version of jQuery introduces a concept called “feature detection”. This is done by simulating a particular browser feature or bug to verify its existence, which is being performed by a new object: jQuery.support. Please note that jQuery.browser is still present in jQuery 1.3, but is in the process of being deprecated to encourage users to implement the new feature detection method.
We’ve spoken a bit about speed improvements, but don’t take it from us. John Resig has been kind enough to post up links to benchmark tests that you can run:
- Selector Tests: http://ejohn.org/files/jquery1.3/slick/?type=selectors
- Delegation Filtering Tests: http://ejohn.org/files/jquery1.3/slick/?type=delegation
- DOM Manipulation Tests: http://ejohn.org/files/jquery1.3/slick/?type=dom
- .offset() Tests: http://ejohn.org/files/jquery1.3/slick/?type=offset
- .hide()/.show() Tests: http://ejohn.org/files/jquery1.3/slick/?type=hideshow
One last thing: With the new version of jQuery, comes a new API browser, courtesy of Remy Sharp Also available from the API browser, is an Adobe Air application that allows you to access the API right from a desktop application.
Stay tuned for tomorrow’s “Stay Fresh”, where the topic will be a VERY cool GTD desktop/iPhone application.
