jQuery без цепи?

Question

Я знаю, что можно написать jQuery более похожим на синтаксис, а не на всю цепочку (что здорово). Трудно найти кусочек учебника, который поможет понять людей, которые хотят использовать сценарий с цепочкой, поэтому, где я могу найти любой учебник (ы)?

Хотя цепь была неплохой, для ее эффективности требуется кривая обучения &. У меня есть некоторый опыт работы с JavaScript, поэтому было бы здорово, если бы я мог повторно использовать существующие знания (a.k.a лень, чтобы узнать что-то новое в строгой и быстрой рабочей среде).

PS: Обычно я использую менее целую структуру, такую ​​как Adobe Spry Framework (мертв, к сожалению), поэтому я надеюсь, что смогу нарисовать какой-либо подобный подход при написании кода на jQuery.

Answer 1

Поскольку каждая часть цепи возвращает объект jQuery, вы можете разбить цепочку на отдельные части.

Итак, это ...

$("<div>inner</div>") 
    .appendTo("<div>outer</div>") 
    .appendTo("body"); 

точно так же, как:

var myDiv = $("<div>inner</div>"); 
myDiv.appendTo("<div>outer</div>"); 
myDiv.appendTo("body"); 

Но поверьте, как только вы привыкнете к нему, она станет второй натурой. Выезд this article для получения дополнительной информации ...

Answer 2

Вряд ли вы найдете такую ​​документацию.

Просто замените прикованные вызовы соответствующими селекторами.

$('#myId').call(blah) 
      .chain(blah) 
      .chain(blah) 

с

var $obj = $('#myId'); 
$obj.call(blah); 
$obj.chain(blah); 
... 

Answer 3

Самое замечательное JQuery является то, что большинство функций core jQuery object будет возвращать объект JQuery с теми же функциями, доступными. Таким образом, вы можете сделать это

var image = $("#myImage").attr("alt", "The Logo"); 
image = image.css("logoImage"); 

Но это гораздо легче сделать это

$("#myImage").attr("alt", "The Logo").css("logoImage"); 

, потому что вы вырезали промежуточные шаги.

Это стоит настойчиво с цепочкой, ознакомьтесь с учебником Getting Started with jQuery.

Answer 4

Цепочки просто используют результат одного выражения в качестве входного сигнала в другом. Их можно легко сгладить до отдельных утверждений.

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

var links = $('a.popup'); 
var handler = function(e){ window.open(this.href,this.target); e.preventDefault(); }; 
links.click(handler); 
links.css('color', 'red'); 

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

var links = $('a.popup'); 
links = links.filter('[target=_blank]'); 
links.css('font-weight', 'bold');