Цілком можливо, що вам доводилося використовувати один із безлічі плагінів 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, "Заміна")); ));

Я використовую регулярний вираз, щоб замінити всі входження 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));

Остаточна демо-версія

Висновок

Створити 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(), можна виконувати динамічну заміну елементів. Аргументи цієї функції не передаються, проте змінна цявсередині неї посилається на оброблюваний елемент. Відповідний приклад наведено нижче:

$(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"); .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 додати функцію. Цю функцію не передається жоден аргумент, але змінна цявстановлюється для оброблюваного елемента. У лістингу 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, можна скористатися наступним кодом.

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

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() дозволяє задати

додаткова умова

Отримувати колекцію елементів та здійснювати доступ до окремого її елемента ми вже навчилися. Тепер розглянемо різні методи, що дозволяють змінювати властивості та значення елементів колекції. Деякі методи ми вже використовували в прикладах для виведення результату або зміни властивостей елементів.

Найчастіше використовуваною операцією є зміна вмісту елементів. Поза бібліотекою 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());

Також можна обмежити набір за допомогою селектора:

Перший. 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.

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 підтримує лише 2.1.

Спадщина

селектори CSS

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 як це.

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

Зверніть увагу, що на момент написання уроку всі браузери реалізовували 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 = функція (el, cl) ( var regex = new RegExp("(?:\\s|^)" + cl + "(?:\\s|$) "); return !!el.className.match(regex); ), addClass = function (el, cl) (el.className +=" " + cl; new RegExp("(?:\\s|^)" + cl + "(?:\\s|$)"); el.className = el.className.replace(regex, " "); 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 || "*"); 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)); // Використання $("#container"); $(".box"); // Будь-які елементи з класом box $(".box", "div"); // Елементи divіз класом box $("p"); // Отримуємо всі елементи p

На жаль, метод зворотного досить великий. У цьому випадку краще використати бібліотеку. jQuery оптимізовано для роботи з DOM! Приклад вище буде працювати, але він не підтримує складні селектори CSS у старих браузерах.