The web development community became intensely excited on January 14, 2009 when jQuery version 1.3.0 was officially released. jQuery 1.3 brings with it significant improvements, especially when it comes to speed. In addition, the developers were able to keep jQuery as small as ever while adding some great and often requested features. Today, we will have an in depth look at the new features, and how you can squeeze the most out of it.
Getting Started and Upgrading
If you are new to jQuery and need to download the latest version, visit the jQuery homepage and click the download link to get started. If you are upgrading from an earlier version, you'll be happy to note that the API has stayed consistent and compatible with older versions. To upgrade, simply update the jQuery version on your server and link to it properl.y Later on in this article we will discuss any changes that might cause problems with any current code you have.
Sizzle CSS Selector Engine
The developers of jQuery have taken a giant step forward with their css selector engine and have started a standalone project known as 'Sizzle'. Sizzle is now the css selector engine for jQuery and is run by the Dojo Foundation. Sizzle is already looking promising for more frameworks than just jQuery, as it is open and available to any developers that wish to use it in their projects. You can learn more about sizzle on the jQuery release page and at Sizzle's home page. jQuery is currently collaborating with Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE, and many more libraries to make this engine even more powerful.
Much Faster Selector Performance
With the release of a new engine comes much faster performance; in some cases over 400% faster, depending on the browser used. jQuery released their test results using selectors people actually use (which we have charted in the next section). See the graph directly below for the new selector performance results.
Common Selectors and Their Speed
As mentioned above, the selector performance tests were based on the selectors that people actually used. I found this data in itself to be interesting, and you can find it here. However, it is in a text only format and I like graphs and charts. One of the things that stuck out to me, was how such a small percentage of people were taking advantage of the :visible selector. Below you will find the selectors that developers are most commonly using in the jQuery scripts today.
jQuery API by Remy Sharp
Another really exciting thing about the release of jQuery 1.3 is the release of a new jQuery API Browser, created by Remy Sharp. You can access it via the internet to search any jQuery method or function you wish. Even better, it is available to download as an offline browser using the Adobe Air Flash installer. Basically, the jQuery API makes any information or documentation accessible within a few clicks, with or without an internet connection.
Above:offline browser up and running.
No More Browser Sniffing!
Up until now, jQuery has been performing a process known as browser sniffing to determine the action the code should take. The downside of this is making the assumption a bug or a feature will always exist. jQuery overcomes this by using a single object known as jQuery.support, and no longer singles out a singer user agent. John explains how jQuery.support works best himself:
We use a technique called feature detection where we simulate a particular browser feature or bug to verify its existence. We've encapsulated all the checks that we use in jQuery into a single object: jQuery.support. More information about it, feature detection, and what this feature provides can be found in the jQuery.support documentation.
So what does this mean in the end? It means that jQuery and jQuery plugins will over time become much more reliable, as we no longer have to depend on browser sniffing to determine a specific browser/user agent. John also notes that jQuery.browser still remains in jQuery and will remain for quite a while. It is deprecated and you are encouraged to use feature detection instead.
New Live Events and Event Delegation
An exciting and certainly useful feature released with 1.3 is the new 'live events' feature. Live event delegation means that if an element has an event handler attached, any further elements created will also have that event handler attached. Take the code below found on the live() documentation.
1 |
|
2 |
$("p").live("click", function(){ |
3 |
$(this).after("<p>Another paragraph!</p>"); |
4 |
});
|
At first glance you might wonder, 'Why wouldn't I just attach a click event handler to the p tag?'. With further inspection we realize that any p elements inserted after the current paragraph will also have the event handler attached to them, giving the effect unlimited use. You can read more about the live events and check out the demo at the jQuery docs.
Introducing closest()
Piling on another great feature of 1.3, the developers gave us closest(), which does just what you think it would do. The closest() function can be used to find the closest element withing a given set of parameters. Again, let's take a look at the demo.
1 |
|
2 |
$(document).bind("click", function (e) { |
3 |
$(e.target).closest("li").toggleClass("highlight"); |
4 |
});
|
In the code above, we bind a click function to the current document and add/remove the class 'highlight' to the closest li element upon a user click. If no element is found, it continues to traverse up the document until it finds a match. If no match is found, nothing is executed. Find out more about traversing using closest().
Faster DOM Manipulation and HTML Insertion
jQuery saw a significant improvement in speed when it comes to DOM manipulation and inserting/creating new HTML elements. This would apply to using methods such as .insertBefore() and append() etc. To gain a better idea of the speed changes, we will look at another super amazing graph.
Faster Hide/Show Results
It makes sense that the developers took time to focus on increasing the speed of the hide/show effects. These are two of the most frequently used jQuery effects. Speed results seen below.
Quicker offset() Results
If you find yourself using offset() frequently in your jQuery scripts, you'll be happy to hear that offset speed has also improved greatly. In case you were wondering, offset() simply gets the current offset of the matched element relative to the document. Results seen below.
Other Features Worth Noting
- The ready() method no longer waits for the css to load. The script should be placed after css files.
- The '@' in [@attr] has been removed in 1.3 and has been deprecated long before. To upgrade, you simply need to remove the @.
- John recommends doing your best to make sure your pages run in standard mode, if running in quirks mode you run the risk of encountering some bugs, especially in Safari.
- Safari 2 is no longer being supported.
- Directly from the documentation:"As of jQuery 1.3, if you specify an animation duration of 0 then the animation will synchronously set the elements to their end state (this is different from old versions where there would be a brief, asynchronous, delay before the end state would be set)."
- Toggle() now accepts a boolean value.
- From the documentation: "Complex :not() expressions are now valid. For example: :not(a, b) and :not(div a)."
Additional Resources
-
jQuery 1.3 Release Documentation
Your first stop to find out everything and anything that was included in this release. And if you're still craving more graphs and charts you can find them there as well.
-
jQuery API
Don't forget to check out the new jQuery API/offline browser, it will save you a ton of time and questions when you get stuck.
-
jQuery for Absolute Beginners Video Series
Jeffrey did an excellent 15 part series on the ThemeForest Blog covering a vast amount of jQuery tips, tricks, and techniques. Don't miss it!
