Как работает цепочка jquery?

Ответ 1

Если у вас есть объект с определенными методами, если каждый метод возвращает объект с помощью методов, вы можете просто вызвать метод из возвращаемого объекта.

var obj = {   // every method returns obj---------v
    first: function() { alert('first');   return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third');   return obj; }
}

obj.first().second().third();

DEMO: http://jsfiddle.net/5kkCh/

Ответ 2

Все, что он делает, возвращает ссылку на this при завершении метода. Возьмите этот простой объект, например:

 var sampleObj = function()
 {
 };

 sampleObj.prototype.Foo = function()
 {
     return this;
 };

Вы можете связать эти звонки весь день, потому что вы возвращаете ссылку на this:

var obj = new sampleObj();
obj.Foo().Foo().Foo().Foo() // and so on

jQuery просто выполняет операцию, затем возвращает this.

Ответ 3

В основном первый вызов функции $('myDiv') возвращает объект jQuery, затем каждый последующий вызов возвращает тот же.

Неплотно,

var $ = function(selector) {
   return new jQuery(selector);
};

jQuery.prototype.removeClass = function(className) {
   // magic
   return this;
}

Ответ 4

return $this;

каждая функция jQuery возвращает экземпляр класса jQuery, который затем может иметь методы, вызываемые на нем. вы можете сломать его, и этот код будет иметь тот же эффект.

jQuery_obj = $('myDiv');
jQuery_obj = jQuery_obj.removeClass('off');
jQuery_obj = jQuery_obj.addClass('on');

Ответ 5

Дело в том, что функция должна оцениваться с помощью "родительской" функции. Так, например,

foo().bar().test();

должен оценивать:

foo().test();

чтобы вы могли вызвать другую функцию на foo(). Для этого вы можете return this:

function foo() {
    // empty, nothing interesting here
}

foo.prototype.bar = function() {
    return this;
}

foo.prototype.test = function() {
    return this;
}

Затем

var something = new foo();
something.bar() === something; // true

И из-за этого:

something.bar().test() === something.test(); // true

Так как something.bar() оценивается как something, вы можете сразу вызвать вторую функцию за один раз.

Ответ 6

В цепочке родительской функции/метода возвращается объект, который затем используется дочерней функцией/методом, и все происходит таким образом. Короче говоря, jQuery или $ возвращает себя (объект), который позволяет цепочку.

Это тот же механизм ниже

var obj=$('input');    //returns jQuery object
var obj1=obj.val('a'); //returns jQuery object
var obj2=obj1.fadeOut();//returns jQuery object

Это выглядит так, если это делается с цепочкой

$('input').val('a').fadeOut();

Ответ 7

Вот пример условной цепочки обратного вызова, как и в функции $.ajax jQuery.

// conditional callback function example
myFunction = function () {

    // define event callback prototypes without function parameter
    var callback_f = new Object;
    callback_f.callback1 = function () { return callback_f; };
    callback_f.callback2 = function () { return callback_f; };

    if ([condition]){
        // redefine the callback with function parameter 
        // so it will run the user code passed in
        callback_f.ReturnPlayer = function (f) { f(); return callback_f; };
    }else{ 
        callback_f.NewPlayer = function (f) { f(); return callback_f; };
    }

    return callback_f;
}

Ответ 8

Один из способов привязки, проверьте демонстрацию.

test("element").f1().f2().f3()

Ответ 9

Цепочка используется для подключения нескольких событий и функций в селекторе.

Для запуска нескольких команд jQuery один за другим, на одном и том же элементе. Обычно цепочка использует jQuery, встроенный в функции, что делает компиляцию немного быстрее.

Это делает ваш код коротким и легким в управлении, и он дает лучшую производительность,

Eaxample

Без цепочки

$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});

С цепочкой

$(document).ready(function(){
    $('#dvContent').addClass('dummy')
          .css('color', 'red')
          .fadeIn('slow');     
});

Примечание. Цепь начинается слева направо. Поэтому большинство остальных будет называться первым и так далее.