JQuery без цепочки?

Question

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

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

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");

Но, поверьте мне, как только вы к этому привыкнете, это станет второй натурой. Прочтите эту статью , чтобы получить еще совет ...

Answer 2

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

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

Но сделать это намного проще

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

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

Стоит упорствовать с цепочкой, посмотрите Начало работы с jQuery .

Answer 3

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

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

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');

Answer 4

Сомнительно, что вы найдете такую ​​документацию.

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

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

с

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