javascript - 为什么我可以在单个 jQuery 对象的一行中运行多个函数？

Question

例如:$(".element").fadeOut().delay(500).fadeIn();

为什么我可以在一个 jQuery 对象上运行多个函数，我什么时候可以使用这个特性？有这方面的教程/文档吗？

Answer 1

这被称为 chaining并帮助您创建 fluent interface .每个函数都返回对当前 jQuery 实例的引用，这就是您可以将调用链接在一起的原因。

您首先使用$('.element') 创建一个jQuery 实例，它返回一个jQuery 对象的实例；它本质上就像一个构造函数。然后 jQuery 对象的每个成员函数返回对 this 的引用，它基本上是该函数的拥有实例。所以不要这样做:

var jQueryObj = $(".element");
jQueryObj.fadeOut();
jQueryObj.delay(500);
jQueryObj.fadeIn();

您可以在一行中完成所有操作，因为每个函数或多或少看起来像这样(这是一个非常简单的示例):

function fadeOut() {
   //jQuery code
   //...

   return this;
}

重要的是要注意，并非所有 jQuery 函数都是可链接的；有些不返回对 jQuery 实例的引用，因此您不能链接它们。示例包括 .html()、.text() 和 .val()。这些返回您想要的实际内容(例如 HTML、文本或输入元素的值)。在这些情况下链接是没有意义的。

这是一个非常简单的示例，向您展示了链接的工作原理:

var Starship = function() {
    this.name = "USS Enterprise";
    this.registry = "NCC-1701";
    this.shipClass = "Constitution";
};

Starship.prototype.name = function(name) {
    this.name = name;
    return this;
};

Starship.prototype.registry = function(registry) {
    this.registry = registry;
    return this;
}

Starship.prototype.shipClass = function(shipClass) {
    this.shipClass = shipClass;
    return this;
}

Starship.prototype.print = function() {
    console.log(this.name + " " + this. registry + " " + this.shipClass);
}

现在你可以像这样创建一个实例:

var starship = new Starship()
    .name("USS Enterprise")
    .registry("NCC-1701-E")
    .shipClass("Sovereign");

然后您还可以调用 starship.print()，但请注意它不会返回 this，这意味着您不能在此之后链接任何内容。

jQuery 的文档将讨论哪些方法是可链接的，哪些不是。如果文档说该函数返回 jQuery，那么它是可链接的；否则它不是。另请注意，某些方法是可链接的，具体取决于传递的参数。例如，让您设置属性的 .attr 函数只有在通过 .attr(attrName, attrValue)设置 属性时才可链接>。当仅提供一个参数 (.attr(attrName)) 时，它返回属性的值，因此不可链接。