JavaScript. Подробное руководство, 6-е издание

  // Отыскать все элементы <div>, затем внутри множества выбранных элементов отыскать
  // элементы <р>. Выделить элементы <р> цветом и затем окружить рамками элементы <div>.
  // Сначала рассмотрим, как это сделать без цепочек вызовов методов
  var divs = $("div");
  var paras = divs.find("p");
  paras.addClass("highlight");
  divs.css( "border", " solid black 1px");

// А теперь то же самое, составив цепочку вызовов методов
  $("div"). find("p").addClass("highlight").end.css("border", "solid black 1px");

  // To же самое можно реализовать без вызова метода end, просто переупорядочив операции
  $("div").css("border"', "solid black 1рх”).find("р").addClass("highlight”);

Если вам когда-нибудь потребуется вручную определить множество выбранных элементов и обеспечить его совместимость с методом end, передайте новое множество элементов в виде массива или в виде объекта, подобного массиву, методу pushStack. Указанные элементы будут преобразованы в новое множество выбранных элементов, а предыдущее множество будет помещено в стек, откуда его можно будет извлечь вызовом метода end:

  var sel = $("div”); // Выбрать все <div>
  sel.pushStack(document.getElementsByTagName("p")); // Заменить его множеством
   // всех элементов <р>
  sel.end; // Восстановить множество элементов <div>

Теперь, когда мы познакомились с методом end и со стеком, хранящим множества выбранных элементов, нам осталось познакомиться с еще одним методом. Метод andSelf возвращает новый объект jQuery, включающий все элементы из текущего множества выбранных элементов плюс все элементы (за исключением дубликатов) из предыдущего множества. Метод andSelf действует подобно методу add и для него больше подошло бы имя «addPrev». В качестве примера рассмотрим следующий вариант реализации предыдущего примера: он выделяет цветом элементы <р> и вмещающие их элементы <div> и затем добавляет рамки к элементам <div>:

  $("div").find("р").andSelf. // Отыскать в <div> и объединить их
  addClass("highlight"). // Выделить их все цветом
   end.end. // Вытолкнуть со стека дважды до $("div")
   css("border", "solid black 1px"); // Добавить рамки к элементам <div>

19.9. Расширение библиотеки jQuery с помощью модулей расширений

Библиотека jQuery написана так, что позволяет легко добавлять в нее новые функциональные возможности. Модули, добавляющие новые функциональные возможности, называются расширениями (plug-in), большое количество которых можно отыскать на сайтеРасширения для библиотеки jQuery являются обычными файлами с программным кодом на языке JavaScript, и, чтобы задействовать их в своих веб-страницах, достаточно просто подключить их с помощью элемента <script>, как любую другую библиотеку на языке JavaScript (разумеется, расширения должны подключаться после подключения самой библиотеки jQuery).

Создание собственных расширений для библиотеки jQuery является почти тривиальной задачей. Вся хитрость заключается в объекте-прототипе jQuery.fn, который является прототипом для всех объектов jQuery. Если добавить новую функцию в этот объект, она превратится в метод объекта jQuery. Например:

  jQuery.fn.println = function {
   // Объединить все аргументы в одну строку, разделив их пробелами
   var msg = Array.prototype.join.call(arguments, " ");

   // Обойти в цикле все элементы в объекте jQuery
   this.each(function {
   // В конец каждого из них добавить строку с простым текстом и <br/>.
   jQuery(this).append(document.createTextNode(msg)).append("<br/>");
   });
   // Вернуть объект jQuery, чтобы обеспечить возможность составления цепочек
   return this;
  };

Определив эту функцию jQuery.fn.println, мы получаем возможность вызывать метод println относительно любого объекта jQuery, как показано ниже:

  $( "#debug").println("x = ”, х, у = ", у);

В jQuery.fn постоянно добавляются новые методы. Если обнаружится, что приходится «вручную» выполнять обход элементов в объекте jQuery с помощью метода each и выполнять над ними некоторые операции, - это повод задуматься о необходимости реструктуризации программного кода, чтобы переместить вызов метода each в дополнительный метод. Если при создании такого метода следовать приемам модульного программирования и соблюдать некоторые соглашения, принятые в библиотеке jQuery, этот дополнительный метод можно назвать расширением и поделиться им с другими. Ниже приводится перечень соглашений, которым необходимо следовать при создании расширений для библиотеки jQuery:

• Не полагайтесь на идентификатор $: подключающая страница может вызывать функцию jQuery.noConflict, после чего $ уже не будет синонимом функции jQuery. В коротких расширениях, как в примере выше, можно просто использовать имя jQuery вместо $. Если вы создаете большое расширение, то вы наверняка обернете его единственной анонимной функцией, чтобы избежать создания глобальных переменных. В этом случае можно использовать распространенный прием передачи ссылки на функцию jQuery в виде аргумента и принимать это значение в параметре с именем $: