1

我在一本 jQuery 书中遇到了这个问题：

$(elems).mouseenter(function(e) {
           $(this).css("opacity", 0.5);
        }).mouseout(function(e) {
           $(this).css("opacity", 1.0);
        })

我删除了大部分代码以便于阅读，然后得到了这个：

$(elems).mouseenter(function(e)).mouseout(function(e))

看起来一般你可以做到这一点？：

$(elems).mouseenter(function(e)).mouseout(function(e)).mouseSOMETHING1(function(e))

另一个词使用 . 连接函数？

另外，如果我将此代码分解为：

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

这是一样的吗？

谢谢，吉姆

4

4 回答 4

6

是的。jQuery 的关键特性之一就是可链接性。这是通过在几乎每次调用中返回 jQuery 对象本身来完成的，允许您将它传递给链的下一个方法。

于 2012-08-29T21:43:00.337 回答
2

您所说的称为方法链接，是的，它在 jQuery 中得到了很好的支持。看看这个快速演练：

方法链 - 完整的 jQuery 教程

于 2012-08-29T21:44:25.253 回答
2

它之所以有效，是因为所有这些函数都返回 jQuery 对象。

   $(elems)  //return jquery object
     .mouseenter(/* ...*/)  //return jquery object
     .mouseout(/* ..*/)     //return jquery object

通过这种方式，您可以链接尽可能多的功能。

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

这两种方法在功能上是相同的。除了第二种方法对 get 进行了不必要的 jQuery 函数调用$(elems)。

于 2012-08-29T21:44:26.653 回答
1

Yes$(elems).mouseenter(function(e)).mouseout(function(e)).mouseSOMETHING1(function(e))通常是可以接受的，因为 jquery 函数返回有问题的 jquery 对象。当你把它写成：

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

它绝对等同于写成$(elems).mouseenter().mouseout()

于 2012-08-29T21:45:13.797 回答