Advertisement
JavaScript & AJAX

What You Need to Know About jQuery 1.3

by

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

jQuery Screenshot

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

Sizzle Screenshot

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.

Graph Data

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.

Graph Data

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.

API Screenshot
API Screenshot
API Screenshot

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.

jQuery Screenshot

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().

jQuery Screenshot

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.

Graph Data

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.

Graph Data

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.

Graph Data

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

  • Thumbnail Image

    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.

    Visit Website

  • Thumbnail Image

    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.

    Visit Website

  • Thumbnail Image

    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!

    Visit Website

Related Posts
  • Code
    Web Development
    Componentizing the WebJavascript wide retina preview
    Follow along with Krasimir, learning how to componentize your web applications.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Code
    Creative Coding
    Using Selector-Query for Responsive, Column-Driven LayoutsSelector query 400
    We've all heard about media queries. We've used them extensively in our themes to make them responsive. They're great for most purposes, but when it comes to column-driven layouts, we sometimes need more control to make our designs stand out. In this article, you will learn about the Selector-Query jQuery plugin, and how to use it in your WordPress themes.Read More…
  • Code
    Articles
    Interview With Bruce Lawson of OperaBlawsonretina
    There's a perception that being in developer relations for a browser maker is all glamor and glitz involving lots of jet setting and rockstar-like experiences. So far I haven't personally found that to be the case but in looking at the life of Opera evangelist Bruce Lawson, I think he may be fitting that description.Read More…
  • Code
    jQuery
    The State of jQuery in 2013Code
    A long time ago, in a galaxy far, far away, JavaScript was a hated language. In fact, “hated” is an understatement; JavaScript was a despised language. Consequently, developers generally treated it as such, only tipping their toes into the JavaScript waters when they needed to sprinkle a bit of flair into their applications. Some form validation here, an image slider there. Despite the fact that there is a whole lot of good in the JavaScript language, due to widespread ignorance, few took the time to properly learn it.Read More…