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

@closers: I think it's a real question, it allows us to share what will be the next step of jQuery, of widely used framework here on SO. For instance I missed the part about delay() and I'm glad that Doug reminded me of it ! Plus it's cw, come on — marcgg, Jan 15 '10 at 09:00
I second marcgg. I can't understand why people are trying to close it. It sounds like a perfectly valid question to me. — missingfaktor, Jan 15 '10 at 09:02
I third marcgg (is it correct to say that? :P) , If he already have it as a community wiki, he had -pretty much- put the question on the super Untouchable safe side (SUSS), the question can be argumentative, subjective and a poll..and still be safe from closing or deleting! — Madi D., Jan 15 '10 at 10:56
Just something about the bounty - will the winner still get the bounty points even if it is a Community Wiki question? — Adhip Gupta, Jan 20 '10 at 08:37

score 58 · Answer 1 · answered Jan 15 '10 at 08:53

58

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

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

answered Jan 15 '10 at 08:53

Doug Neiner

65,509
13
109
118

3

Isn't that just a wrapper for `setTimeout`? – DisgruntledGoat Jan 21 '10 at 14:20
6

@DisgruntledGoat, The fact that you can use it in method chaining like the example above though is a huge plus. – GSto Jan 21 '10 at 22:48
1

This should have been the question accepted. I don't know what went wrong ? – marcgg Jan 25 '10 at 10:22
Ok this is the problem: http://meta.stackexchange.com/questions/18944/in-a-bounty-scenario-can-an-answer-from-before-the-bounty-be-automatically-accep ... Sorry about that :\ – marcgg Jan 25 '10 at 11:11
@marcgg No worries. I actually read that Meta question (or a similar one) and understood it to mean you would manually have to pick a winner, not that it would auto accept the highest entry *since* the bounty started... LOL. Oh well :) – Doug Neiner Jan 25 '10 at 12:35

score 44 · Answer 2 · answered Jan 15 '10 at 10:50

44

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

answered Jan 15 '10 at 10:50

James

109,676
31
162
175

3

I always felt so torn between writing the raw HTML and calling attr() on the element after creation. This is much better :) – Matchu Jan 20 '10 at 20:09
Why is `$('
', { id: 'foo' })` better than `$('
')`? They both work just fine, and the latter is shorter and easier to read and write. (Honest question; I really have no idea!) – Mathias Bynens Feb 09 '10 at 09:55
2

Mathias, the point is that values of attributes are often needed to be calculated. Compare: `$('
')` and `$('
', { id : calcId() })` – thorn0 Feb 09 '10 at 20:18

score 18 · Answer 3 · edited Jan 22 '10 at 12:48

18

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/

edited Jan 22 '10 at 12:48

Mark Schultheiss

32,614
12
69
100

answered Jan 15 '10 at 08:54

Natrium

30,772
17
59
73

score 18 · Accepted Answer · answered Jan 22 '10 at 05:16

18

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.

answered Jan 22 '10 at 05:16

Eric

2,037
2
16
14

1

Could that also be `jQuery('li.selected').wrapInner()` – alex Jan 25 '10 at 05:30
see my comment on the answer bellow – marcgg Jan 25 '10 at 11:11

score 17 · Answer 5 · answered Jan 15 '10 at 13:04

17

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

answered Jan 15 '10 at 13:04

JasonDavis

48,204
100
318
537

+1'd for the incredibly speed improvements in 1.4!!! – Jarrett Meyer Jan 23 '10 at 03:06
In particular `find` and `append` were amazing for me. – Alex Bagnolini Feb 15 '10 at 12:54

James Wiseman · Answer 6 · 2010-01-21T11:26:30.240

12

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!

edited Jan 21 '10 at 11:26

answered Jan 15 '10 at 10:50

James Wiseman

29,946
17
95
158

I'm not sure what you mean, could you give an example ? – marcgg Jan 15 '10 at 10:53
2

The `live` function binds an event to a "selector", so that if you create new elements that match the selector, they get the event too. Previously it only worked with a handful of events like `click` and `mouseover`. Now it works for practically every event. – DisgruntledGoat Jan 21 '10 at 14:29

score 6 · Answer 7 · answered Jan 15 '10 at 09:02

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

score 6 · Answer 8 · edited Jan 15 '10 at 10:07

6

Event delegation for focus and bubble events:

edited Jan 15 '10 at 10:07

marcgg

65,020
52
178
231

answered Jan 15 '10 at 09:33

Luke Bennett

32,786
3
30
57

score 4 · Answer 9 · answered Jan 18 '10 at 23:49

4

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

answered Jan 18 '10 at 23:49

James Thomas

743
1
5
9

score 3 · Answer 10 · answered Jan 21 '10 at 23:25

3

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.

answered Jan 21 '10 at 23:25

jedierikb

12,752
22
95
166

score 3 · Answer 11 · answered Jan 22 '10 at 12:51

3

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

answered Jan 22 '10 at 12:51

Mark Schultheiss

32,614
12
69
100

score 3 · Answer 12 · answered Jan 24 '10 at 08:06

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>

score 3 · Answer 13 · answered Jan 25 '10 at 05:37

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

score 2 · Answer 14 · answered Jan 19 '10 at 07:37

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/

score 2 · Answer 15 · answered Jan 21 '10 at 13:22

2

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

answered Jan 21 '10 at 13:22

Prasanna

688
1
9
27

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

15 Answers15

Linked