What You Need to Know About jQuery 1.3
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.
$("p").live("click", function(){
$(this).after("
Another paragraph!
");
});
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.
$(document).bind("click", function (e) {
$(e.target).closest("li").toggleClass("highlight");
});
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Drew Douglass
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Such a wealth of information on any/every topic! Thanks, great article.
Thanks! didn’t know that the jQuery API browser existed!
Great info. Thanks!
Thanks!
API browser looks great :)
Very good read thx
Thanks for the Post.
good post … very useful…
Thanks Drew, I also didn’t know that jQuery API browser existed. Thanks for some useful info.
Essentially the same content as http://docs.jquery.com/Release:jQuery_1.3, but hey, some people might not be familiar with the jQuery website :)
Nice article but isn’t this pretty much a rip of Johns release article for jQuery 1.3?
This is picky, but the data presented in the last two graphs should be columns or otherwise indicate discrete data points. There is no reason to connect the points with a line because there is no actual progression or relationship between points along the X axis.
Yeah, this is just a rip off of the release notes. =/
Thanks. Good Stuff.
The jQuery API browser is great. It’s useful to keep it open when working on a project that uses some jQuery magic.
Interesting to see all that stats. Though I’ve seen some (with jQuery 2) that show MooTools having faster selectors. And I’d like to see the other frameworks (which I prefer) face this competition and improve their speeds.
Very good, thank you!
Great post, thank you for your time writing it.
The addition of “Sizzle” and the statistics that are being boasted are extremely misleading, so much so actually, that you can’t really even fairly compare it to other frameworks because REALLY its doing something completely different.
Mootools founder actually has an excellent post here:
http://mootools.net/blog/2008/12/04/sizzle/
Which provides a fair test of “Sizzle” with the Mootools framework when functioning on the same level, as well as outlines several bad ideas that come with its adoption.
I don’t mean to destroy the thunder surrounding “Sizzle,” I’m sure its a great addition to jquery, and probably very well written. But–as often is the case–a lot of the advertising surrounding jquery and its pros are typically a bit skewed, and its treated like more of a product that needs to be marketed to the masses in whatever means seems most appealing.
Food for thought.
i totally agree with Jeremy!! you shouldn’t compare “Sizzle” with other frameworks!!
the way u combine grafix with tech speak is awesome. u make the article very inviting to read.
@Jeremy and crysfel: You’re mistaken – a lot has changed in the past month and a half. Virtually none of the concerns that were outlined by Valerio exist anymore (Sizzle no longer uses caching and we only measured the performance of Sizzle integrated into a framework, not standalone). Additionally, a ton of performance improvements have since landed – jQuery (and Sizzle) are faster than most other frameworks – especially so for selectors that people actually use.
@Shane-C’mon now, I put a lot of time and effort into this article and charting all the data as well. Of course my main point of reference was the docs, because the change logs were very well documented. I assure you other resources were utilized ;)
Very cool! I can’t wait to use this!
@Jeremy-It’s ok, I don’t mind picky. Thanks for the info, I am not graph expert so I’ll keep your advice in mind for next time. Appreciate it.
@other Jeremy – I would have to set aside some time to check out the link you provided and find more independent tests, but I have a hard time believing the founder of mootools test is any more fair than that of jQuerys and Dojos. Either way, I appreciate the link. I think the competition between mootools and jQuery ends up improving both frameworks.
Oh and also, jQuery is great and so is mootools, I wasn’t trying to market a jQuery product as you said. Just providing an update to what is new with the latest version.
@everyone Thanks for commenting, I appreciate it!
Just so you know, I’ve had to downgrade from 1.3.1 to 1.2.6 due to a Safari bug: http://dev.jquery.com/ticket/4002
“One of the things that stuck out to me, was how such a small percentage of people were taking advantage of the :visible selector.”
I find that line really intriguing. Is #id:visible faster than #id? Could you please go into more detail about it?
If you’re going to use charts, make them informative. E.g. either indicate the meaning of the scales used (ops/second, duration/100 iterations, etc) and indicate whether smaller numbers are better or worse than larger numbers (where not obvious from scale meaning).
A good (bad!) example is the DOM Manipulation chart…couldn’t make heads or tails of this one. What do the numbers along the X axis mean? If smaller numbers are better, then it would appear that jQuery 1.2.6 is better than 1.3; conversely, if larger numbers mean better performance then both versions of jQuery are waaay worse than all the other products charted.
Awesome stuff. Just make sure you get jQuery 1.3.1 and keep checking for updates. The jQuery team is hard at work, and there are daily improvements.
http://www.webgyver.com/web-design-and-development/jquery-131-to-the-rescue-%E2%80%94-thank-you/
Great stuff, looking forward to implementing this on a few sites…
Thanks for the statistics :D
you guys rock, thanks for the info!!!
Nice post drew…. and by the way it is dugg!
Great, just what the doctor ordered.
@Drew – The blog post by Valerio simply points out that for one, Sizzle is an ENGINE, its not a framework. Its sole purpose is selecting. Frameworks, like Mootools and probably every other one, do some form of post-processing to elements that get returned from a selection to “extend” them and provide other methods/functionality. For this fact alone, Sizzle will beat everything by a pretty big margin.
On top of it, SlickSpeed (the tool used to benchmark Sizzle vs frameworks) caches results and unintentionally will cause Sizzle results to be about 5x faster because of it.
Sizzle is also a very beefy script.
The test set up on Mootools removes post-processing to show a fair test, where they actually are virtually identical in speeds in all browsers.
JQuery itself is a fantastic framework, the fact that their advertising approach involves leaving out these key bits of information to mislead the unknowing user is what turns me away from using it at all. And you see this done in many ways. Their landing page, for example, advertises the size of the framework gzipped. If you know what that means then you’d ask “Why would anyone advertise the size of the framework gzipped?!” So the actual framework, not gzipped, is the same size as most of the others (and likewise, the other frameworks when gzipped, are largely all the same size as jquery).
Sorry for the rant, but certain things just manage to get under my skin!
@Jeremy-No worries, that wasn’t a rant, just an in depth comment :)
I don’t really feel comfortable arguing one way or another for sizzle yet, I think time will tell if the decision to move to a/an selector engine was a good one. Also, I think I did note it was an engine in the article, if not I meant to.
I hope you didn’t misconstrue this post to be a huge jQuery advertisement? It was simply meant to bring some of the new features and data (albeit you and others have disputed some, which is just fine and healthy) to light.
Like I said, I like jQuery and I like mootools, I can even manage some Prototype although it’s not my favorite. Point being that all frameworks have their advantages and it one needs to make a judgment call as to which is the best to use for the project at hand. I’m not looking to debate which is a better framework, as there is no correct answer.
Best Regards,
Drew
BTW, has anyone actually downloaded and used the jQuery API Browser I mentioned? It’s pretty sweet :)
Nice roundup of the changes in the new version.
needless to say that this framework is so awesome.
Very useful post, thanks!
I used Mootools until yet…can someone tell my WHY Mootools is so much bigger (ca. 90kb ca. 20kb). It works in the same way, or?
Why you are still usuing 1.2.6? :P
Great Information shared, thanks.
@Chukki – Like i said in an earlier post, JQuery advertises their script’s size gzipped (which is a compression type a server would serve the file up in if available by the visitor). If you download the actual jquery library minified, its about 54kb.
Mootools is a modular library, so if you were to download the entire core, it would be around 62-64kb, whereas a typical download for me is more in-line with jquery.
The “more” category on mootools download section is a listing of generic plugins, just like you would download for jquery.
I’m not sure what the other frameworks are up to as far as file size goes.
@Drew – wasn’t saying your post was some big advertisement for jquery, its quite useful really =P
Great article on jQuery! This really outlines the updates. Thanks!
@ Jeremy i know what gzip is and what the mootools-more is used for. but thanks for rest of the information ;)
I am planning to start using JQuery.
Now I am reading a book about AJAX, but I will need some JQuery back up, when the time to write my diploma work comes.
Very good review.
Many thanks to nettuts.com
Thanks for the summary of the changes, very helpful!
nice article….
Thanks a lot for the exciting topic. Really helped a lot !