为什么我可以在一个jQuery对象的一行上运行多个函数？

Question

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

为什么我可以在单个jQuery对象上运行多个函数？何时可以使用此功能？有关于此的任何教程/文档吗？

Answer 1

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

首先使用$('.element')创建一个jQuery实例，它返回一个jQuery对象的insance;它基本上就像一个构造函数。然后jQuery对象的每个成员函数返回对this的引用，var jQueryObj = $(".element"); jQueryObj.fadeOut(); jQueryObj.delay(500); jQueryObj.fadeIn(); 基本上是该函数的拥有实例。所以不要这样做：

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

   return this;
}

你可以在一行中完成所有这一切，因为每个函数或多或少都是这样的（这是一个非常简单的例子）：

.html()

重要的是要注意，所有 jQuery函数都不是可链接的;有些人不会返回对jQuery实例的引用，因此您无法链接它们。示例包括.text()，.val()和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); } 。它们返回您想要的实际内容（例如，HTML，文本或输入元素的值）。在这些情况下链接是没有意义的。

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

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

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

starship.print()

然后您也可以致电this，但请注意它不会返回jQuery，这意味着您之后无法连接任何内容。

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

Answer 2

在浏览器中加载jQuery网站，然后点击API Documentation。每个函数都有一个包含返回语句的表。如果这样说：

...你可以使用链接。

否则，你不能，例如：

在某些方法中，返回类型取决于传递的参数：

Answer 3

这是使用称为＆＃34; Fluent Interface＆＃34;的设计模式完成的。它也被称为＆＃39; chaining＆＃39;。

例如：

var Car = function() {

        var speed, color, doors;

        this.setSpeed = function(speed) {
                this.speed = speed;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setColor = function(color) {
                this.color = color;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setDoors = function(doors) {
                this.doors = doors;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

};

// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);

// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);

Answer 4

正如@vivinpaliath所说，这就是所谓的链接。

它的工作原理是因为几乎jQuery中的每个方法都返回对原始对象的引用（或者在少数情况下，返回已编辑的对象）。

除了返回特定值的方法之外，您可以链接任何内置方法。

例如css（＆＃34; cssProperty＆＃34;），attr（＆＃34;属性＆＃34;），prop（＆＃34;属性＆＃34;），html（），text（）和val（）

Here's a good article on jQuery chaining

Answer 5

所以你在谈论方法链。 这个link中的内容很好地解释了方法的链接，并简要说明了适当的例子。 方法链背后的内在，基本和基本逻辑是

  

启用方法链接的典型方法是在每个函数的末尾返回当前对象