What are you the most excited about in the new versions of jQuery?

Question

A recent new jQuery version has been released, the jQuery v1.4. You can read all about it here. It allows you to do some pretty neat stuff such as:

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

What do you like the most about this new version? What is the thing that made you go "FINALLY!"?

---

Added a bounty to get more feedback and accept an answer

Answer 1

Believe it or not, the "FINALLY" moment for me was the addition of delay():

$("#notice").slideDown('500').delay(4000).slideUp('500'); // = Pure awesome :)

Answer 2

I don't really have a favorite, here's an overview of 15 new features for those who don't know what this is all about:

http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

Answer 3

Well the performance improvements are of course something I appreciate, but I guess I can't say it's a "finally" since it's something that's subject to constant improvement :) The DOM-building (Quick Element Construction) syntax looks really convenient, and the detach method also looks quite usable: it allows you to temporarily remove an object from the DOM, but keeps all the handlers assigned to it, so that it'll work just the same way, when reinserted.

I guess there's not so much a lot of things that I've been missing, but now that these new features are out there, there's a bunch that I'm anxious to start using :)

Answer 4

Event delegation for focus and bubble events:

• http://api.jquery.com/focusin/

• http://api.jquery.com/focusout/

Answer 5

The ability to create elements on the fly in a more terse manner, by passing all attributes as the second argument to jQuery():

jQuery('<div/>', {
    id: 'foo',
    mouseenter: function() {
        // do stuff
    },
    html: jQuery('<a/>', {
        href: 'http://google.com',
        click: function() {
            // do stuff
        }
    })
});

All non-attribute properties map to the corresponding jQuery method. So having html there will call .html() and having click will bind a new click event via .click()...

Answer 6

For me it was this:

"All Events Can Be Live Events"

"We’re very proud to count some addtional events amongst those supported by live(). 1.4 introduces cross-browser support for change, submit, focusin, focusout, mouseenter, and mouseleave via the event delegation in .live()."

I've been waiting for this on the change event for ages!

Answer 7

I am a speed freak so any speed improvement is always welcomed by me

Answer 8

I really like delay() and detach() the most, to be honest. The performance improvements are a huge plus as well but delay() is probably the single most amazing part of it. Simple but ultra useful. No more setTimeouts().

Answer 9

For me, it's the ability to now write event handlers with the live() handler. I know that live was present in the last version (1.3.2) also, but it wasn't fully supported.

This makes the code infinitely simpler especially if you have most of the DOM being created on the fly or via Ajax requests.

More about live here: http://api.jquery.com/live/

Answer 10

live() calls with events such as change is a big one for me. I have been wanting this for sometime now.

Answer 11

It has been very modular since 1.3+. For example, when you don't need the ajax library, it is nice to build without it. Keep file sizes down.

Answer 12

Best feature in my opinion is allowing functions in setters:

jQuery('li.selected').html(function(i, li) {
   return "<strong>" + li + "</strong>";
});

A lot of code that required $.each can be removed now.

Answer 13

Call me crazy, but just the added number of tests gives me a warm fuzzy feeling. I almost want to upvote every answer :)_

Answer 14

I think unwrap() is simple, elegant, and you get an innerHTML present at the end!

The new unwrap method will take the children of a given parent and replace said parent with them. Like so:

<body>
    <div>
        <p>this</p> <p>is</p> <p>fun</p>
    </div>
</body>

$('div').unwrap();

<body>
   <p>this</p> <p>is</p> <p>fun</p>
</body>

Answer 15

$.proxy()

To make sure that this always means this rather than that...

Example from here

MyModule = function() {
  this.$div = $('#testdiv');
  this.myString = "Hi! I'm an object property!";

  this.$div.click($.proxy(this.handleClick, this));
};

MyModule.prototype.handleClick = function() {
  console.log(this.myString); // Hi! I'm an object property!
};

var m = new MyModule();