你最期待jQuery新版本中的哪些内容?

54

最近发布了新版本的jQuery,jQuery v1.4。你可以在这里阅读有关它的所有信息。它允许您做一些非常棒的事情,例如:

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

你最喜欢这个新版本的什么?是哪件事让你感到“终于!”?


添加了赏金以获取更多反馈并接受答案。


1
绝对兴奋,不是退出。 - mauris
10
@closers:我认为这是一个真正的问题,它让我们分享jQuery下一步的计划,jQuery是SO上广泛使用的框架。例如,我错过了delay()的部分,很高兴Doug提醒了我!而且这是cw,来吧。 - marcgg
5
我赞同marcgg的意见。我不明白为什么有人试图关闭它。对我来说,这听起来是一个完全有效的问题。 - missingfaktor
2
我支持marcgg(这么说对吗?:P),如果他已经将问题设为社区维基,那么他已经将问题放在了超级安全的地方(SUSS),这个问题可以是有争议的、主观的和投票的...但仍然不会被关闭或删除! - Madi D.
@adhip: 我也这么认为。你可以在 Meta 上提出这个问题。 - marcgg
显示剩余2条评论
15个回答

58

信不信由你,但对我来说,“终于”时刻的到来是通过添加delay()实现的:

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

3
那不就是 setTimeout 的一个包装器吗? - DisgruntledGoat
6
@DisgruntledGoat,尽管像上面的例子一样可以在方法链中使用它是一个巨大的优点。 - GSto
1
这个问题本应该被接受的。我不知道出了什么问题? - marcgg
好的,这是问题链接:http://meta.stackexchange.com/questions/18944/in-a-bounty-scenario-can-an-answer-from-before-the-bounty-be-automatically-accep ... 对此很抱歉 :\ - marcgg
@marcgg 不用担心。实际上我看到那个 Meta 问题(或类似的问题),理解为你需要手动选择一个获胜者,而不是自动接受自开始悬赏以来得分最高的答案...... 哈哈。没关系 :) - Doug Neiner

44
能够更加简洁地在代码中创建元素,只需将所有属性作为第二个参数传递给jQuery()函数:
jQuery('<div/>', {
    id: 'foo',
    mouseenter: function() {
        // do stuff
    },
    html: jQuery('<a/>', {
        href: 'http://google.com',
        click: function() {
            // do stuff
        }
    })
});

所有非属性的属性都映射到相应的jQuery方法。因此,如果有html,将调用.html(),如果有click,则会通过.click()绑定新的click事件...


3
我总是在写原始的HTML代码和创建元素后调用attr()之间犹豫不决。这样做好多了 :) - Matchu
为什么$('<div/>', { id: 'foo' })$('<div id="foo"/>')更好?它们都能正常工作,而且后者更短、更易读写。(真诚提问;我真的不知道!) - Mathias Bynens
2
Mathias,关键在于属性值经常需要计算。比较一下:$('<div id="' + calcId() + '"/>')$('<div/>', { id : calcId() }) - thorn0

18

我认为最好的功能是允许在setter中使用函数:

jQuery('li.selected').html(function(i, li) {
   return "<strong>" + li + "</strong>";
});
很多需要使用$.each的代码现在可以被移除了。

1
这句话的意思是:是否也可以使用 jQuery('li.selected').wrapInner(<strong />) - alex
请参见下面答案的评论 - marcgg

18

17

我是一个速度狂人,所以任何速度提升都受到我的欢迎。


+1 为 1.4 版本中令人难以置信的速度提升点赞!!! - Jarrett Meyer
特别是 findappend 对我来说非常棒。 - Alex Bagnolini

12

对我而言,这是:

"所有事件都可以成为实时事件"

"我们非常自豪地宣布一些额外的事件已被live()支持。1.4版本通过.live()中的事件委托引入了跨浏览器支持change、submit、focusin、focusout、mouseenter和mouseleave。"

我已经等待change事件很久了!


我不确定你的意思,请举个例子吗? - marcgg
2
live 函数将事件绑定到一个“选择器”,因此如果您创建的新元素与选择器匹配,它们也会获得该事件。以前它只能处理少数事件,如 clickmouseover。现在它几乎可以处理所有事件。 - DisgruntledGoat

6

我很欣赏性能的提升,但我不能说这是“终于”发生的事情,因为它是一个不断改进的过程 :) DOM构建(快速元素构建)语法看起来非常方便,detach 方法也非常实用:它允许您暂时从DOM中删除一个对象,但保留分配给它的所有处理程序,因此在重新插入时,它将以完全相同的方式工作。

我想我一直没有太多遗漏的东西,但现在有了这些新功能,我迫不及待地想开始使用它们 :)


6

4

说实话,我最喜欢的是delay()和detach()。性能的提升也是一个巨大的优点,但delay()可能是其中最令人惊叹的部分。它简单而又非常有用。不再需要使用setTimeouts()。


3

我认为unwrap()方法简单、优雅,最终你会得到一个innerHTML的结果!

新的unwrap方法将获取给定父元素的子元素,并用它们替换该父元素。如下所示:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接