5 Awesome New Features of jQuery 1.4

Exactly one year ago, John Resig and the jQuery team released version 1.3. This release came packed with feature upgrades, such as the new ultra-fast Sizzle selector engine, live event bindings, and more. Development has been rather quiet since then, leading many to speculate that nothing major was going on - boy were they wrong! The developers have outdone themselves again, packing alot of cool new features into yesterday's jQuery 1.4 release. Of all the new features, these are my top five favorites I can't wait to play with:

1. Assigning attributes directly through jQuery(el, ... )

If you wanted to create a new image prior to this release, your code may have looked like this:

jQuery('').attr({
     src: '/logo.jpg',
     id: 'top-logo',
     alt: 'Unleashed Technologies'
}).css({
     border: '2px solid #369'
}).bind('click', function(){
     alert('Hello World!');
});

Version 1.4 simplifies this by allowing you to pass the attribute object directly into jQuery(...) as the second parameter, keeping your code much simpler and doing everything in one step:

jQuery('', {
     src: '/logo.jpg',
     id: 'top-logo',
     alt: 'Unleashed Technologies',
     css: {
          border: '2px solid #369'
     },
     click: function(){
          alert('Hello World!');
     }
});

Did you catch what else happened? In addition to setting attributes, it lets you use things like 'css' and 'click' without having to chain those methods along later! I'm an avid fan of anything that can cut down on code complexity without sacrificing on feature-richness or performance.

2. Improved Event Management

There have been quite a few enhancements to how jQuery manages events, so I've bundled them together here.

Previous versions of jQuery allowed you to bind one function to multiple events. But in 1.4, you can now bind multiple events to their own functions (in one call) like so:

jQuery('#foo').bind({
     change: function (){
          ...
     },
     click: function (){
          ...
     },
     blur: function (){
          ...
     }
});

jQuery 1.4 also provides a new "proxy" method, which takes a function and returns a new one with a particular scope. What does that mean? Well in JavaScript, it can be kind tricky to keep track of what the variable "this" contains. Sometime's you'd like it to be the current object, and other times you want it to refer to some other object. jQuery.proxy() helps you manage the scope, reducing your headaches. The jQuery documentation provides this example:

var obj = {
     name: "John",
     test: function() {
          alert( this.name );
          $("#test").unbind("click", obj.test);
     }
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// This also works:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

Last on our Events list, jQuery 1.4 supports live delegation for "blur", "change", "focus", and "submit". One gotcha though: if you want to delegate the "blur" and "focus" events, you must use the event names "focusin" and "focusout":

jQuery('#myform input').live('focusout', function(){
     doSomething();
});

3. Callbacks for DOM Manipulation Methods

When using a DOM manipulation method, you can now pass a callback method. This function runs on every selected element, allowing you to throw in some logic instead of simply applying a static value. Most of the DOM method callbacks pass a single parameter which is the index of the element within that collection. But when using "attr" or "css", you can also pass in a second parameter containing the current value. For example, to zebra-stripe an unordered list, you can do something like this:

jQuery('#foo li').css('background-color', function(index, currentBGColor){
     return i % 2 ? '#eee' : '#ddd';
});

Yay for simplicity!

4. Unwrapping Elements

The older function "wrap" allowed you to wrap any element inside of another. "Unwrap" does the opposite, removing the inner element from whatever it's wrapped inside. If we have this HTML...

Shiny new toy

... we can "unwrap" the "shiny new toy" like so:

jQuery('p').unwrap();

Our HTML now looks like this:

Shiny new toy

5. Add Delay to Animation

jQuery 1.4 now allows you to easily add a delay to your animation queue. It basically adds a pause in between your animations without the hassle of timeouts, callbacks, etc. Here's what it looks like:

jQuery('div.foo')
     .fadeIn()
     .delay(150)  // Pause for 150ms
     .addClass('highlight')
;

6. "Has" Selector Is Also A Method

Previous versions allowed you to select an element that "has" something else, like so:

jQuery("#foo:has(.bar)");

jQuery 1.4 now provides a method that does the same thing:

jQuery("#foo").has(".bar");

Need a low-level method to check if one DOM node "contains" another? Well you're in luck, because they also added that under the jQuery namespace. Instead of returning a matching collection, it will return boolean true/false depending on if the test passes or not:

jQuery.contains(document.form.login, document.body);

Final Notes

I've only listed my favorite upgrades in jQuery 1.4, but there are many others that have been added or changed in this release. Be careful when upgrading though! The developers tried to minimize the hassle of upgrading (and things breaking), but there are still some potentially-breaking changes you should review first.

Ready to dive in? You can grab your preferred flavor here:

Enjoy!

About the Author

GoogleColin O'Dell first started programming on an old Apple II-e at the age of 8. Within four years, he mastered several BASIC variants and sold his...

 
 

On-Demand Webinar

Check out this new webinar about how to optimize your site speed with new open source technologies.

Categories

View All

Testimonials

"The Unleashed team was a lot of fun to work with - you guys have incredible talent and a great energy.

Alexander S. Martin
President, Skye Maritime

"Dear Mike - I wanted to take a moment to thank you and the Unleashed Team for such a wonderful experience with our new...

Read More
Kelly Bedsole
Metro Offices

"Unleashed Technologies came in under budget and blew us away with the quality of their work. It was refreshing!...

Read More
Lawson Owen
Proactive Dealer Solutions