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

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

Answers


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.


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

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

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


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/


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


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!


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 :)


Event delegation for focus and bubble events:


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


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.


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


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>

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

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/


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


Need Your Help

Replace buttons with image in PHP code

php jquery html css stylesheet

I am trying to display images in place of buttons for various activities like Edit Record, Delete Record, Download, Save, Reset. I am able to show the image but the result is very output is looks v...

I have Node.js package in Meteor app, how do I call the function?

javascript node.js meteor yelp

I want to use this Node code https://arian.io/how-to-use-yelps-api-with-node/ in my Meteor app, to interface with Yelp's 2.0 API and return results that I can use.