Вполне возможно, что вам приходилось использовать один из множества плагинов JQuery . Но если плагин не существует, его придется создать самостоятельно. Это не так сложно, как кажется. В этой статье я расскажу общие правила, которым нужно следовать при создании плагинов, а позже мы создадим собственный плагин для поиска и замены.

Основные принципы

Есть несколько моментов, которые нужно знать при разработке плагинов. В этом разделе я расскажу о них. Рассмотрим следующий фрагмент кода:

(function ($) { $.fn.functionName = function() { return this.addClass("my-class"); }; }(jQuery));

Вы, возможно, заметили, что я использую this вместо $(this) . Это потому, что $.fn делает functionName частью одного и того же объекта JQuery , что и метод .addClass() .

Использование $.fn всегда возвращает объект, который содержит все методы, которые используются в JQuery . Если вы создали свои собственные методы, они также будут частью этого объекта. Так как ваша функция уже является частью объекта JQuery , можете использовать this вместо $(this) .

При разработке нужно пытаться сделать JQuery плагин последовательным. Это одна из многих важных особенностей JQuery , которые разработчики используют все время. Чтобы реализовать цепной метод, он должен возвращать исходный объект JQuery . Этого можно добиться, добавив return , как сделал я в приведенном выше коде.

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

Создание плагина

Разобравшись с теорией, мы можем сосредоточиться на создании плагина JQuery . Начнем с простейшей версии, в которой мы будем заменять оригинальный текст заданным. Вот код, который будет это делать:

(function($) { $.fn.findReplace = function(options) { return this.each(function() { $(this).html($(this).html().replace(/Lorem Ipsum/g, "Замена")); }); }; }(jQuery));

Я использую регулярное выражение, чтобы заменить все вхождения Lorem Ipsum на «Замена «. Честно говоря, наш плагин в его нынешнем виде совершенно бесполезен. Пользователи, как минимум, должны иметь возможность найти конкретный фрагмент текста, а затем заменить его другим текстом.

Пишем плагин JQuery дальше. Мы предоставим пользователям возможность задавать три параметра: текст, который нужно найти; текст, которым нужно заменить найденный, а также возможность установить цвет фона для замененного текста. Вы также можете использовать эту функцию, чтобы установить значения по умолчанию для различных параметров, когда пользователи намеренно или случайно не задают значения сами. Вот код, который будет это делать:

var settings = $.extend({ // Значения по умолчанию. findText: null, replaceText: "", backgroundColor: "#FFF" }, options);

Я задал для findText значение null . Для replaceText имеет смысл оставить пустую строку, потому что, возможно, так хотел пользователь. Наиболее подходящее значение для backgroundColor — это цвет фона веб-страницы, который в большинстве случаев является белым.

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

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

return this.each(function() { var StringToFind = settings.findText; var regExpression = new RegExp(StringToFind, "g"); var replacement = "" + settings.replaceText + ""; $(this).html($(this).html().replace(regExpression, replacement)); });

Текст, который должен быть найден, можно получить с помощью setting.findText . Он хранится в переменной для последующего применения. Я использую конструктор RegExp , чтобы создать объект регулярного выражения. Он может применяться для динамической замены регулярных выражений.

Использование глобального модификатора гарантирует, что все вхождения StringToFind будут заменены. Я заключаю текст на замену в элемент span с встроенными стилями. И изменяю HTML-код элемента, который вызывает нашу функцию findReplace .

Посмотреть демо-версию плагина

Внесение улучшений

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

Но если пользователь решит изменить размер шрифта или произвести какие-нибудь другие изменения, он не сможет этого сделать. Кроме этого предоставлять пользователю возможность задавать все эти параметры непрактично. Вместо этого можно дать пользователям возможность добавлять к заменяемым элементам класс по своему выбору. Таким образом, они смогут вносить изменения в CSS код, а наш плагин будет по-прежнему компактным и простым.

Все, что нужно сделать, это в нашей более ранней версии плагина JQuery изменить параметр backgroundColor на customClass .

var settings = $.extend({ findText: null, replaceText: "", backgroundColor: "#FFF" }, options); // Теперь должно быть var settings = $.extend({ findText: null, replaceText: "", customClass: "" }, options); var replacement = "" + settings.replaceText + ""; // Теперь должно быть var replacement = "" + settings.replaceText + "";

Некоторые пользователи плагина возможно захотят вызвать callback-функцию после того, как плагин сделал свою работу. Сделать это довольно просто. При написании плагина JQuery нужно добавить параметр completeCallback , чтобы получить функцию обратного вызова. Тогда следующий код сделает все остальное:

if ($.isFunction(settings.completeCallback)) { settings.completeCallback.call(this); }

В приведенном выше фрагменте кода метод .isFunction проверяет, передал ли пользователь функцию, прежде чем выполнить код. Для вызова пользовательских функций необходимо вызвать функцию следующим образом:

$("a").findReplace({ findText: "Lorem Ipsum", replaceText: "I was replaced too!", customClass: "match-link", completeCallback: function() { $(".notification").text("Executed the plugin on all links").fadeOut(5000); } });

Вот скриншот плагина в действии:

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

(function($) { $.fn.findReplace = function(options) { var settings = $.extend({ findText: null, replaceText: "", customClass: "", completeCallback: null }, options); return this.each(function() { var StringToFind = settings.findText; var regExpression = new RegExp(StringToFind, "g"); var replacement = "" + settings.replaceText + ""; $(this).html($(this).html().replace(regExpression, replacement)); if ($.isFunction(settings.completeCallback)) { settings.completeCallback.call(this); } }); }; }(jQuery));

Окончательная демо-версия

Заключение

Создать JQuery плагин не трудно. Просто нужно следовать нескольким основным правилам, и все получится.

Напоследок я бы посоветовал стараться сделать ваш плагин как можно более гибким и компактным. Никто не захочет использовать плагин на 1,5 Mb, который только находит и заменяет текст.

Я надеюсь, вам понравилась эта статья. Если у вас есть какие-либо вопросы, задайте их в комментариях.

Перевод статьи «Create a Find and Replace Plugin in jQuery » был подготовлен дружной командой проекта

Сохраните эту страницу для тестирования приведенных ниже примеров.

Замена элементов

С помощью методов, описанных в таблице ниже, можно заменить один набор элементов другим:

Методы replaceWith() и replaceAll() работают одинаковым образом, за исключением того, что объект jQuery и аргумент играют в них противоположные роли. Пример использования обоих методов приведен ниже:

$(function() { var newElems= $("") ..png"/>") .append("Орхидея:") .append("") .css("border", "thick solid red"); $("#row1").children().first()..png"/>").replaceAll("#row2 img") });

В этом сценарии сначала создается набор элементов, а затем в документе выполняется поиск элемента div, атрибут id которого равен row1, и его первый дочерний элемент заменяется новым содержимым с помощью метода replaceWith() (что в конечном счете приводит к замене элементов, соответствующих астрам, элементами, соответствующими орхидеям). Наконец, с помощью метода replaceAll() все элементы img, являющиеся потомками элемента, атрибут id которого равен row2, заменяются изображениями гвоздики.

Вид страницы в окне браузера представлен на рисунке:

Передавая функцию методу replaceWith(), можно выполнять динамическую замену элементов. Аргументы этой функции не передаются, однако переменная this внутри нее ссылается на обрабатываемый элемент. Соответствующий пример приведен ниже:

$(function() { $("div.drow img").replaceWith(function() { if (this.src.indexOf("rose") >.png"/>").css("border", "thick solid red"); } else if (this.src.indexOf("peony") >.png"/>").css("border", "thick solid red"); } else { return $(this).clone(); } }); });

В этом сценарии мы выполняем замену элементов img на основании значений их атрибутов src. Если этот атрибут элемента img содержит rose, то данный элемент заменяется другим, которому соответствует изображение carnation.png. Если же атрибут src элемента содержит peony, то данный элемент заменяется другим, которому соответствует изображение lily.png. Оба замененных элемента выделяются рамкой красного цвета, чтобы сделать эффект более заметным. Страница в окне браузера показана на рисунке:

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

Удаление элементов

В дополнение к возможности вставки и замены элементов библиотека jQuery предлагает ряд методов для удаления элементов из DOM. Краткое описание этой группы методов приведено в таблице ниже:

Пример использования метода remove() для удаления элементов приведен ниже:

$(function() { $("img, img").parent().remove(); });

В этом сценарии мы выбираем элементы img, атрибуты src которых содержат daffodil и snow, получаем их родительские элементы, а затем удаляем их. Можно также отфильтровать удаляемые элементы, передав селектор методу remove():

$(function() { $("div.dcell").remove(":has(img, img)"); });

Оба сценария приводят к одному и тому же результату:

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

Удаление элементов с сохранением данных

Метод detach() работает аналогично методу remove() с тем лишь отличием, что связанные с удаляемыми элементами данные сохраняются. О связывании данных с элементами подробно говорится в одной из следующих статей, а на данном этапе вам достаточно знать лишь то, что если планируется последующая вставка удаленных элементов в другое место документа, то обычно предпочтение следует отдавать методу detach().

Пример использования метода detach() приведен ниже:

$(function() { $("#row2").append($("img").parent().detach()); });

В этом сценарии удаляется родительский элемент элемента img, атрибут src которого содержит astor. Затем элементы вновь вставляются в документ с помощью рассмотренного нами ранее метода append(). Я стараюсь избегать такого подхода, поскольку использование метода append() без вызова метода detach() дает тот же эффект.

Можно заменить один набор элементов другим, используя методы, описанные в .

Таблица 7-5: Методы для замены элементов

Методы replaceWith и replaceAll работают одинаковым образом, за исключением того, что роли объекта jQuery и аргумента меняются местами. В представлены оба метода.

Листинг 7-19: Использование методов replaceWith и replaceAll $(document).ready(function () { var newElems = $("") .append("") .append("Orchid:") .append("") .css("border", "thick solid red"); $("#row1").children().first().replaceWith(newElems); $("").replaceAll("#row2 img") .css("border", "thick solid red"); });

В этом скрипте я использую метод replaceWith , что заменить первый дочерний элемент в row1 div новым контеном (результатом этого является замена астры на орхидею). Я также использую метод replaceAll , чтобы заменить все элементы img , являющиеся потомками row2 , на рисунок гвоздики. Результат работы скрипта можно увидеть на .

Рисунок 7-14: Замена контекста при помощи методов replaceWith и replaceAll Замена элементов с использованием функции

Можно заменить элементы динамически, если методу replaceWith добавить функцию. Этой функции не передается ни один аргумент, но переменная this устанавливается для обрабатываемого элемента. В листинге 7-20 представлен пример.

Листинг 7-20: Замена элементов с использованием функции $(document).ready(function () { $("div.drow img").replaceWith(function () { if (this.src.indexOf("rose") > -1) { return $(" } else if (this.src.indexOf("peony") > -1) { return $("").css("border", "thick solid red"); } else { return $(this).clone(); } }); });

В этом скрипте я заменяю элементы img , основываясь на их src атрибуте. Если src атрибут содержит rose , тогда я заменяю элемент img другим, отображающим carnation.png . Если src атрибут содержит peony , тогда я заменяю элемент img другим, отображающим lily.png . У обоих замененных элементов есть красная рамка, чтобы была четко видна их позиция в документе.

5 лет назад

Как изменить содержимое элементов в jQuery

В этом уроке мы попробуем свои силы в изменении содержимого элементов в jQuery.

Итак, наиболее часто используемой операцией является изменение содержимого элементов. Вне библиотеки jQuery для этой цели используется свойство innerHTML объекта document. Например, чтобы вставить новый фрагмент в элемент с идентификатором divl, можно воспользоваться следующим кодом.

Новое значение&1t;/b>

Alert($("div").html());

$("div").text("Новое значение");

$("#divl").append("Новый текст"); Текст

Текст Новый Текст

Теперь добавим DOM-элемент.

$("#divl").append($("Новый текстНовый текст")) ;

Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу appendO, за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

$("#divl").prepend("Новый текст"); Текст Новый текст Текст

$("Новый текст").appendTo("#divl"); Результат будет таким же, как и при использовании метода append () . $("#divl").append("Новый текст");

$("Новый текст").prependTo("#divl"); Результат будет таким же, как и при использовании метода prepend () . $("#divl").prepend("Новый текст");

Как добавить содержимое перед элементом или после него

В предыдущем разделе мы рассмотрели изменение внутреннего содержимого элемента. Библиотека jQuery предоставляет также методы, которые позволяют добавить какое-либо содержимое перед элементом или после него. Рассмотрим эти методы.

Aftег (Выражение) - добавляет Выражение после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.

$("#divl").after("Новый текст"); текст Результат будет выглядеть следующим образом. текст Новый текст Теперь добавим DOM-элемент. $("#divl").after($("Новый текст").get(0));

А теперь добавим созданный элемент коллекции jQuery. $("#divl").after($("Новый текст"));

Before (Выражение) - добавляет Выражение перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after (), за исключением того, что добавляет Выражение не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.

$("#divl").before("Новый текст"); текст

Результат будет выглядеть следующим образом.
Новый текст текст

InsertAfter (Селектор) - добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.

$("Новый текст").insertAfter("#divl");

Результат будет таким же, как и при использовании метода after () .
$("#divl").after("Новый текст");

InsertBefore (Селектор) - добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором divl.

$("Новый текст").insertBefore("#divl");

Результат будет таким же, как и при использовании метода before () .
$("#divl").before("Новый текст");

Вложение элементов

Все элементы коллекции можно разместить в каком-либо другом элементе. Для вложения элементов предназначены следующие методы.

Wraplnner (HTML-элемент или BОМ-элемент) -вкладывает внутреннее содержимое каждого элемента коллекции в другой элемент. Для примера выделим содержимое всех тегов div.

$ (“div”) .wraplnner (“”) ; текст l текст 2 Результат будет выглядеть следующим образом. текст l Текст 2

Такого же эффекта можно достичь, передав в качестве параметра DOM-элемент.

$("div") .wraplnner(document.createElement ("b"));

Можно также передать элемент, созданный с помощью функции $ ().

$ ("div") .wraplnner ($ (MM)) ;

Wrap (HTML-элемент или BОМ-элемент) -полностью вкладывает каждый элемент коллекции в другой элемент.

$("div") .wrap("") ; Текст l Текст 2

Результат выполнения таков:
Текст l
Текст 2

WrapAll (HTML-элемент или ВОМ-элемент) - собирает все элементы коллекции в одном месте и вкладывает их в другой элемент.

$ ("div") .wrapAll ("H) ; Какой-то текст 1 Текст Какой-то текст Текст 2 Какой-то текст 3 Текст 3

Результат будет выглядеть следующим образом.
Какой-то текст 1
Текст lТекст 2Текст 3
Какой-то текст 2 Какой-то текст 3

Как видно из примера, все элементы коллекции были размещены после первого элемента и расположены внутри тега u.

Перемещение и клонирование элементов

Если в качестве параметра методов before (), prepend (), append () и after () указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before () (перед элементом), ргеpend() (в начало содержимого), append () (в конец содержимого), after () (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента.

$("ttdivl").append($("а")); Текст l

Текст1

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

Remove ([Селектор]) - полностью удаляет элементы из объектной модели документа.

Этот элемент будет полностью удален

Данный пример демонстрирует отсутствие элемента после щелчка на кнопке Удалить. Щелкнув на кнопке Количество элементов в первый раз, мы получим число 1, а если щелкнуть на ней после удаления элемента, то получим число 0.

Если коллекция состоит более, чем из одного элемента, то будут удалены все элементы. Метод remove () позволяет задать дополнительное условие, которому должны соответствовать удаляемые элементы. В качестве примера удалим все ссылки с расширением. php.

$("а") . remove (" ") ;

Изменение содержимого элементов

Получать коллекцию элементов и осуществлять доступ к отдельному ее элементу мы уже научились. Теперь рассмотрим различные методы, позволяющие изменять свойства и значения элементов коллекции. Некоторые методы мы уже использовали в наших примерах для вывода результата или изменения свойств элементов.

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

Document.getElementByld("divl").innerHTML = "Новый текст";

Библиотека jQuery также позволяет использовать это свойство. Для этого находим элемент с помощью функции $ (), а затем преобразуем коллекцию элементов jQuery в набор DOM-элементов.

$("#divl").innerHTML = "Новый текст";

Для этой цели можно также воспользоваться методом get () .

$("#divl").get(0).innerHTML = "Новый текст";

В библиотеке jQuery для изменения содержимого элементов предназначены следующие методы.

Text () - позволяет получить или задать текст элемента. Если параметр не указан, то метод возвращает текстовое значение без тегов. При наличии нескольких элементов в коллекции будут возвращены все значения в виде строки. Если необходимо получить значение только первого элемента из коллекции, то можно воспользоваться методом eq () .

Alert($("div").eq(0).text());

Можно также ограничить набор с помощью селектора:

First. alert($("div:first").text());

При указании строки в качестве параметра она заменит содержимое всех элементов коллекции. В случае наличия в строке специальных символов они будут заменены на HTML-эквиваленты.

$("div").text("Новое значение");

В этом примере строка в исходном HTML-коде будет выглядеть следующим образом.

Новое значение

Html () - позволяет получить или задать HTML-код элемента. Если параметр не указан, то метод возвращает значение вместе с тегами. При наличии нескольких элементов в коллекции будет возвращено значение только первого элемента.

Alert($("div").html());

При указании HTML-кода в качестве параметра он заменит содержимое всех элементов коллекции, и объектная модель документа будет обновлена. Выведем HTML-код во всех тегах div.

$("div").text("Новое значение");

Если необходимо изменить значение только первого элемента из коллекции, то можно воспользоваться методом eq () или селектором: first.

$("div:first").html("Новое значение");

Append (Выражение) - добавляет Выражение в конец содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код в конец элемента.

$("#divl").append("Новый текст"); Текст

Результат будет выглядеть следующим образом.

Текст Новый Текст

Теперь добавим DOM-элемент.

$("#divl").append($("Новый текст").get(0)); А теперь добавим созданный элемент коллекции jQuery. $("#divl").append($("Новый текст")) ;

Prepend(Выражение) - добавляет Выражение в начало содержимого выбранного элемента. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу append (), за исключением того, что добавляет Выражение не в конец элемента, а в его начало. Для примера добавим HTML-код в начало элемента.

$("#divl").prepend("Новый текст"); Текст

Результат будет выглядеть следующим образом.
Новый текст
Текст

AppendTo (Селектор) - добавляет коллекцию элементов jQuery в конец всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в конец элемента с идентификатором divl.

$("Новый текст").appendTo("#divl");

Результат будет таким же, как и при использовании метода append () .
$("#divl").append("Новый текст");

Как видно из примера, мы поменяли параметры местами и использовали метод append () вместо метода appendTo ().

PrependTo (Селектор) - добавляет коллекцию элементов jQuery в начало всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код в начало элемента с идентификатором divl.

$("Новый текст").prependTo("#divl");

Результат будет таким же, как и при использовании метода prepend () .
$("#divl").prepend("Новый текст");

В настоящий момент ситуация такова, что все больше и больше разработчиков приходят в мир JavaScript через ворота jQuery. И новички являются счастливчиками. Они получают доступ к изобилию новых API JavaScript, которые делают процесс работы с DOM существенно легче. Но, к сожалению, они не имеют представления об этих API! В данном уроке мы рассмотрим несколько типовых задач, которые решаются средствами jQuery, и преобразуем решения в обычный JavaScript.

В уроке будут приводиться два варианта решения - модерн и наследие. Решения типа "модерн" представляют собой новейшие методы, а "наследие" демонстрирует то, что будет нравиться старым браузерам. Выбор варианта зависит от разработчика веб проекта и целевой аудитории.

Вступление

Обратите внимание, что некоторые варианты из набора "наследие" в данной статье используют простую, кросс-браузерную функцию addEvent . Данная функция нормализует два варианта - рекомендованную W3C модель событий addEventListener и вариант для Internet Explorer attachEvent .

Когда используется функция addEvent(els, event, handler) в коде, она представляет собой следующий код:

Var addEvent = (function () { var filter = function(el, type, fn) { for (var i = 0, len = el.length; i < len; i++) { addEvent(el[i], type, fn); } }; if (document.addEventListener) { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.addEventListener(type, fn, false); } else if (el && el.length) { filter(el, type, fn); } }; } return function (el, type, fn) { if (el && el.nodeName || el === window) { el.attachEvent("on" + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { filter(el, type, fn); } }; })(); // Использование addEvent(document.getElementsByTagName("a"), "click", fn);

1 - $("#container");

Данная функция обращается к DOM для получения элемента с идентификатором container и создает новый объект jQuery .

Модерн

Var container = document.querySelector("#container");

querySelector является частью API Selectors , которая обеспечивает возможность обращения к DOM с помощью селекторов CSS.

Данный метод возвращает первый элемент, который соответствует переданному селектору.

Наследие

Var container = document.getElementById("container");

2 - $("#container").find("li");

В данном случае мы получаем любое количество пунктов списка, которые являются потомками элемента #container .

Модерн

Var lis = document.querySelectorAll("#container li");

querySelectorAll возвращает все элементы, которые соответствуют определенному CSS селектору.

Ограничения. Хотя все браузеры поддерживают API Selectors, передача определенных селекторов CSS ограничивается возможностью браузера. Например: Internet Explorer 8 поддерживает только селекторы CSS 2.1.

Наследие

Var lis = document.getElementById("container").getElementsByTagName("li");

3 - $("a").on("click", fn);

В данном примере обработчик события click привязывается ко всем ссылкам на странице.

Модерн

ForEach.call(document.querySelectorAll("a"), function(el) { // на ссылку нажали });

Выше приведенный код выглядит ужасно, но он не так уж и плох. Так как querySelectorAll возвращает NodeList , а не массив, то мы не можем непосредственно использовать метод, например, forEach . Данный момент обходится вызовом forEach для объекта Array и передачей результата querySelectorAll как this .

Наследие

Var anchors = document.getElementsbyTagName("a"); addEvent(anchors[i], "click", fn);

4 - $("ul").on("click", "a", fn);

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

Модерн

Document.addEventListener("click", function(e) { if (e.target.matchesSelector("ul a")) { // Обработка } }, false);

Технически, данный метод JavaScript не является полным соответствием примеру jQuery. Он привязывает обработчик события непосредственно к document . А затем используется метод matchesSelector для определения того факта, что цель (узел, на котором произошло нажатие кнопки) соответствует указанному селектору. Таким образом, мы привязываем единственный обработчик события.

Обратите внимание, что на момент написания урока все браузеры реализовывали matchesSelector с использованием префиксов: mozMatchesSelector , webkitMatchesSelector , и так далее. Для нормализации метода, вы можете написать:

Var matches; (function(doc) { matches = doc.matchesSelector || doc.webkitMatchesSelector || doc.mozMatchesSelector || doc.oMatchesSelector || doc.msMatchesSelector; })(document.documentElement); document.addEventListener("click", function(e) { if (matches.call(e.target, "ul a")) { // Обработка } }, false);

Наследие

Var uls = document.getElementsByTagName("ul"); addEvent(uls, "click", function() { var target = e.target || e.srcElement; if (target && target.nodeName === "A") { // Обработка } });

Для обеспечения обратной совместимости мы проверяем, что свойство nodeName (имя целевого элемента) равно нашему запросу. Обратите внимание на факт, что старые версии Internet Explorer иногда играют своими собственными правилами. Вы не захотите получать доступ к цели непосредственно из объекта event . Зазочется использовать event.srcElement .

5 - $("#box").addClass("wrap");

jQuery обеспечивает удобный API для модификации имени класса для набора элементов.

Модерн

Document.querySelector("#box").classList.add("wrap");

Новая техника использует новый API classList для добавления, удаления и переключения класса (add , remove , и toggle).

Var container = document.querySelector("#box"); container.classList.add("wrap"); container.classList.remove("wrap"); container.classList.toggle("wrap");

Наследие

Box = document.getElementById("box"), hasClass = function (el, cl) { var regex = new RegExp("(?:\\s|^)" + cl + "(?:\\s|$)"); return !!el.className.match(regex); }, addClass = function (el, cl) { el.className += " " + cl; }, removeClass = function (el, cl) { var regex = new RegExp("(?:\\s|^)" + cl + "(?:\\s|$)"); el.className = el.className.replace(regex, " "); }, toggleClass = function (el, cl) { hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl); }; addClass(box, "drago"); removeClass(box, "drago"); toggleClass(box, "drago"); // Если элемент не имеет класса "drago", добавляем его.

Обратная совместимость требует достаточно много действий.

6 - $("#list").next();

Метод jQuery next возвращает элемент, который следует непосредственно за текущим элементом наборе.

Модерн

Var next = document.querySelector("#list").nextElementSibling; // IE9

nextElementSibling ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.

Наследие

Var list = document.getElementById("list"), next = list.nextSibling; // Нам нужен следующий элемент, а не текст. while (next.nodeType > 1) next = next.nextSibling;

Есть пара способов для реализации задачи. В данном примере мы определяем тип узла nodeType , который следует на определенным элементом. Это может быть текст, элемент или, даже, комментарий. Так как нам нужен именно следующий элемент, то мы ищем nodeType равный 1 . Если next.nodeType возвращает номер больше, чем 1 , то мы пропускаем узел, так как он, вероятно, является текстом.

7 - $("").appendTo("body");

В дополнение к запросам DOM jQuery также предлагаем возможность создавать и вставлять элементы.

Модерн

Var div = document.createElement("div"); div.id = "box"; document.body.appendChild(div);

В данном примере нет ничего нового. Таким способом выполнялся процесс создания и вставки элемента в структуру DOM очень давно.

Вероятно, что вам понадобится добавить содержание в элемент. В данном случае вы можете использовать innerHTML или createTextNode .

Div.appendChild(document.createTextNode("wacka wacka")); // или div.innerHTML = "wacka wacka";

8 - $(document).ready(fn)

Метод jQuery document.ready невероятно удобен. Он позволяет нам выполнять код сразу по завершению загрузки DOM.

Модерн

Document.addEventListener("DOMContentLoaded", function() { // Наш код });

Стандартная часть HTML5, событие DOMContentLoaded генерируется после завершения анализа документа.

Наследие

// http://dustindiaz.com/smallest-domready-ever function ready(cb) { /in/.test(document.readyState) // in = loadINg ? setTimeout("ready("+cb+")", 9) : cb(); } ready(function() { // Получаем нужное из DOM });

Решение для обратной совместимости - каждые 9 миллисекунд мы проверяем значение document.readyState . Если возвращается “loading”, то документ все еще не загружен полностью (/in/.test()). Как только значение document.readyState будет равно “complete,” выполнится возвратная функция.

9 - $(".box").css("color", "red");

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

Модерн

ForEach.call(document.querySelectorAll(".box"), function(el) { el.style.color = "red"; // или добавляем класс });

Снова мы используем технику .forEach.call() для фильтрации всех элементов с классом box и придания им красного цвета с помощью объекта style .

Наследие

Var box = document.getElementsByClassName("box"), // смотрите пример 10 ниже для кросс-браузерного решения i = box.length; while (i-- > 0 && (box[i].style.color = "red"));

Мы используем трюк с циклом while . По существу, мы имитируем:

Var i = 0, len; for (len = box.length; i < len; i++) { box[i].style.color = "red"; }

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

10 - $()

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

Модерн

Var $ = function(el) { return document.querySelectorAll(el); }; // Использование = $(".box");

Это просто односимвольный указатель на document.querySelector . Сохраняет время!

Наследие

If (!document.getElementsByClassName) { document.getElementsByClassName = function(cl, tag) { var els, matches = , i = 0, len, regex = new RegExp("(?:\\s|^)" + cl + "(?:\\s|$)"); // Если не задано имен тегов, // мы будем получать все элементы из DOM els = document.getElementsByTagName(tag || "*"); if (!els) return false; for (len = els.length; i < len; i++) { if (els[i].className.match(regex)) { matches.push(els[i]); } } return matches; // массив элементов, которые имеют определённое имя класса }; } // Очень простая реализация. Проверяем id, класс и имя тега. var $ = function(el, tag) { var firstChar = el.charAt(0); if (document.querySelectorAll) return document.querySelectorAll(el); switch (firstChar) { case "#": return document.getElementById(el.slice(1)); case ".": return document.getElementsByClassName(el.slice(1), tag); default: return document.getElementsByTagName(el); } }; // Использование $("#container"); $(".box"); // Любые элементы с классом box $(".box", "div"); // Элементы div с классом box $("p"); // Получаем все элементы p

К сожалению, метод обратной достаточно большой. В данном случае лучше использовать библиотеку. jQuery оптимизирован для работы с DOM! Пример выше будет работать, но он не поддерживает сложные селекторы CSSв старых браузерах.