jQuery забезпечує потужні інструменти для знаходження елемента або наступних елементів та роботи з ними для отримання бажаного результату. За допомогою методів обходу та маніпуляцій можна братися за такі завдання, виконання яких через рідну маніпуляцію DOM буде дуже болючим. jQuery робить подібні завдання досить простими та інтуїтивно зрозумілими.
У цьому розділі ми розглянемо деякі (але не всі) методи обходу та маніпуляції. Попередньо ви повинні знати кілька важливих термінів. Розглянемо фрагмент HTML:
<ul> <li> <span> <i>Foo</i> </span> </li> <li>Bar</li> </ul>
- Перший елемент списку дочірній для маркованого списку.
- Маркований список є батьком обох елементів списку.
- <span> є нащадком маркованого списку.
- Маркований список є предком для всього всередині нього.
- Два елементи списку є спорідненими.
Обхід
jQuery дозволяє нам робити «обхід» або пересування HTML-Елементів, які становлять нашу сторінку. Спочатку ми робимо початкову вибірку, а потім рухаємося через DOM щодо цієї вибірки. У міру просування через DOM ми змінюємо оригінальну вибірку; у деяких випадках замінюємо оригінальну вибірку на нову, в інших випадках ми додаємо або прибираємо щось з оригінальної вибірки.
Фільтрування вибірки
Ви можете відфільтрувати існуючу вибірку, щоб вона включала тільки ті елементи , які відповідають заданому критерію Наприклад, ви можете фільтрувати вибірку такими способами:
<code data-language="javascript">var listItems=$( 'li'); //фільтрувати вибірку лише для елементів із класом special var special=listItems.filter( '.special'); //фільтрувати вибірку тільки для елементів без класу special var notSpecial=listItems.not('.special'); //фільтрувати вибірку тільки для елементів, що містять <span> var hasSpans=listItems.has( 'span');Важливо зазначити, що .not() не є протилежністю .is(). Метод .is() повертає логічне значення, тоді як метод .not() повертає новий об'єкт jQuery.
>Пошук елементів щодо вибірки
Початкова вибірка може бути базою для створення додаткових вибірок. Наприклад, у вас може бути наявна вибірка, яка містить окремий пункт списку, а потім необхідно працювати з його спорідненими елементами або батьківським маркованим списком. Ви можете легко зробити нову вибірку щодо існуючої:
<code data-language="javascript">//Отримати перший пункт списку на сторінці var listItem=$( 'li').first(); //та .last() //Отримати споріднені елементи цього пункту списку var siblings=listItem.siblings(); //Отримати наступного родича цього списку var nextSibling=listItem.next(); //та .prev() //Отримати батька цього пункту списку var list=listItem.parent(); //Отримати пункти списку безпосередніх нащадків list var listItems=list.children(); //Отримати всі пункти списку з list, включаючи вкладені var allListItems=list.find( 'li'); //Знайти всіх предків цього списку з класом module var modules=listItem.parents( '.module'); //Знайти найближчого предка цього пункту списку з класом module var module=listItem.closest('.module');Ви також можете додати щось до існуючої вибірки за допомогою методу .add(). Можна передати селектор, масив елементів, рядок HTML або об'єкт jQuery.
<code data-language="javascript">var list=$( '#my-unordered-list'); //Зробити щось зі списком, а потім... var listAndListItems=list.add('#my-unordered-list li'); p>Коли ви використовуєте один із методів обходу для пошуку деяких елементів щодо вихідної вибірки, jQuery зберігає на неї покажчик для випадку, якщо ви захочете повернутися до вихідної вибірки. Розглянемо, наприклад, ситуацію, коли ви вибираєте маркований список, вносите до його елементів деякі зміни, а потім знову бажаєте працювати зі списком. Ви можете використовувати метод jQuery <span class="var">.end()</span>, щоб повернутися до вихідної вибірки:</p> <pre><code data-language="javascript">$( '#my-unordered-list') .find('li') //Тепер ми працюємо з елементами списку .addClass('special') .end() //Тепер ми повернулися до роботи зі списком .addClass('super-special') ;Метод .end() дозволить легко робити безліч змін в одному виразі. Така практика мало що дає для розуміння коду, зате це коротко, немовби розповісти історію, не переводячи дихання. Тому ви маєте використовувати цей метод рідко. Найчастіше це призводить до коду, який важко читати, підтримувати і налагоджувати. ( '# my-unordered-list'); var listItems=list.find('li'); listItems.addClass( 'special'); list.addClass( 'super-special');
jQuery також пропонує метод .addBack(), якщо ви хочете додати свою вихідну вибірку у поточну. Наприклад:
<code data-language="javascript">$( 'li.special') .siblings() //Тепер ми працюємо з родичами вихідної вибірки .removeClass( 'important') .addBack () //Тепер ми працюємо з вихідним li І його родичами .addClass('urgent');Заплуталися? Як і .end() все це може призвести до коду, з яким важко розбиратися. .addBack(), незважаючи на його користь, може легко ускладнити код. Натомість найкращим рішенням було б використовувати метод .add(), щоб об'єднати дві вихідні вибірки:
<code data-language="javascript">var specialListItems=$ ( 'li.special'); var otherListItems=specialListItems.siblings(); otherListItems.removeClass( 'important'); specialListItems.add( otherListItems).addClass( 'urgent' ; Ви можете прочитати всі методи обходу в <a href="http://api.jquery.com/category/traversing/" rel="nofollow">документації</a>.</p> <h2>Маніпуляція</h2> <p>Методи маніпуляції jQuery дозволяють вам змінювати DOM вашої сторінки, використовуючи набагато дружній синтаксис, ніж рідні методи маніпуляції DOM. Методи маніпуляції повертають об'єкт jQuery, а значить, ви можете з'єднувати або об'єднувати їх з іншими методами jQuery, які розглядалися раніше.</p> <h3>Зміна елементів</h3> <p>Є безліч способів зміни елементів за допомогою jQuery. Ми розглянемо як вирішувати деякі найпоширеніші завдання.</p> <h4>Додавання та видалення класів</h4> <p>Атрибут class може бути використаний для додавання правил CSS, а також може бути корисним для вибору елементів через jQuery. Наприклад, до елемента може бути доданий клас <span class="class">hidden</span>, з відповідним правилом CSS, який визначає, що для цього класу встановити <span class="attribute">display</span> як <span class="value">none</span>. Використовуючи jQuery ми можемо додавати та видаляти класи і тим самим впливати на відображення елементів.</p> <pre><code data-language="javascript">$( 'li').addClass( 'hidden'); $( 'li').eq( 1).removeClass( 'hidden');
Якщо у вашому випадку постійно потрібно додавати та видаляти клас, jQuery пропонує метод .toggleClass(). Наступний код додає клас hidden якщо його немає і видаляє його, якщо він присутній.
<code data-language="javascript">$( 'li').eq( 1).toggleClass( 'hidden');
Зміна стилю
При можливості кожен раз слід використовувати класи у поєднанні з правилами CSS, щоб вплинути на оформлення елементів, а jQuery застосовувати тільки для додавання та видалення цих класів, як показано вище. У цьому розділі ми побачимо як змінити стиль елемента безпосередньо, але правила CSS у поєднанні з класами для отримання бажаного ефекту завжди краще.
Якщо ви не можете отримати результат через додавання та видалення класів, то jQuery пропонує метод .css(), який дозволяє вам встановити стиль елементів безпосередньо. Зазвичай це потрібно, якщо ви хочете встановити числові значення, що обчислюються на льоту, наприклад інформація про позиціонування. Метод .css() не повинен застосовуватися для завдання простих стилів, таких як display: none — практично у всіх випадках для цього краще використовувати класи і CSS.
Розглянемо, наприклад, ситуацію, коли ви хочете задати стиль елемента на основі ширини батьківського елемента. Для гумового макета заздалегідь дізнатися про ширину батьківського елемента може бути важко або неможливо. У цьому випадку ми можемо звернутися до методу .css().
<code data-language="javascript">var list=$('#my-unordered-list'); var width=Math.floor(list.width() * 0.1); list.find('li').each(function( index, elem) { var padding=width * index; $( elem).css( 'padding-left', padding + 'px'); });Якщо вам потрібно встановити відразу кілька властивостей, ви можете передати об'єкт методу .css() замість імені властивості та його значення. Зверніть увагу, що імена властивостей з дефісом потрібно брати в лапки.
<code data-language="javascript">$( 'li').eq( 1).css({ 'font-size' : '20px', 'padding-left': '20px' }); Зміна значень форм
jQuery пропонує метод . val() для зміни значення елементів форми, таких як <select> та <input>.
Для текстових елементів <input> ви можете встановити їх зміст передаючи рядок у метод .val() :
<code data-language="javascript">$( 'input[type="text"]').val( 'нове значення');
Для елементів <select> ви також можете встановити вибраний пункт за допомогою .val():
<code data-language="javascript">$( 'select').val( '2');
Для чекбоксів ви повинні встановити властивість check ed для елемента, використовуючи метод .prop().
<code data-language="javascript">$( 'input[type="checkbox"]').prop( 'checked', 'checked');
Метод .prop() був введений у jQuery 1.6; Попередні версії jQuery використовували для цього метод .attr(). Він, як і раніше, працює в пізніших версіях jQuery, але для якості checked в кінцевому рахунку просто викликає метод .prop(). Якщо ви застосовуєте версію jQuery пізніше 1.6, то завжди повинні використовувати метод .prop() щоб встановити властивість checked та інші властивості елементів DOM . Дивіться документацію для детального пояснення.
Зміна інших атрибутів
Ви можете використовувати метод .attr(), щоб змінити інші атрибути елементів. Наприклад, ви можете встановити новий атрибут title для посилання:
<code data-language="javascript">$( 'a'). attr( 'title', 'Натисніть мене!');
При установці атрибута ви можете передати функцію як другий аргумент. Подібно до інших встановлювальних методів ця функція отримує два аргументи: індекс елемента, з яким вона працює, та вихідне значення атрибута. Функція повинна повернути нове значення атрибута.
<code data-language="javascript">$( 'a').attr( 'href', function(index, value) { return value + '?special=true'; });Ви також можете видалити атрибути повністю через .removeAttr().
Отримання інформації з елементів
У розділі «Основи jQuery» ми обговорили поняття «встановлюючий метод» та «метод читання». Усі методи, які можуть бути використані для зміни елементів, також можуть застосовуватись і для отримання інформації з елементів. Наприклад, описаний вище метод .val() може бути як встановлюючим методом, так і методом читання.
<code data-language="javascript">var input=$( 'input[type="text"]'); input.val( 'нове значення'); input.val(); //поверне 'нове значення'
Крім того, метод .css() може бути використаний для отримання значення окремих властивостей CSS, якщо для вказати тільки ім'я властивості, а не значення.
<code data-language="javascript">var listItemColor=$( 'li').css( 'color');
Коли методи маніпуляції використовуються як установка, метод працює тільки з першим елементом у вибірці, з одним винятком: метод .text(). У цьому випадку, якщо аргумент не передається в метод, то буде повернено текст усіх вибраних елементів.
Розміщення елементів у документі
Якщо ви вибрали елемент або створили новий елемент, то можете взяти вибірку та помістити її в документ. Для цього є два основних способи: шляхом виклику методу для елемента або елементів, які ви хочете розмістити, або шляхом виклику методу для елемента, щодо якого ви хочете розмістити. Розглянемо, наприклад, ситуацію, коли ви хочете перемістити перший елемент списку на його кінець. Є кілька способів досягнення цієї мети.
Ви можете додати пункт до списку, викликаючи .appendTo() для списку:
<code data-language="javascript">var listItem=$( '#my-unordered-list li').first(); listItem.appendTo( '#my-unordered-list');
Ви можете додати пункт до списку, викликаючи .append() для списку:
<code data-language="javascript">var listItem=$( '#my-unordered-list li').first(); $( '#my-unordered-list').append( listItem);
Ви можете вставити елемент списку після останнього елемента за допомогою виклику .insertAfter() для того елемента списку, який ви хочете перемістити:
<code data-language="javascript">var listItems=$( '#my-unordered-list li'); listItems.first().insertAfter( listItems.last());
Ви також можете вставити елемент списку після останнього елемента за допомогою виклику .after() для останнього пункту списку:
<code data-language="javascript">var listItems=$( '#my-unordered-list li'); listItems.last().after( listItems.first());
Існує багато інших методів для розміщення елементів — ви можете розмістити їх навколо, всередині, зовні інших елементів, все залежить від ваших конкретних потреб.
Найбільш ефективний спосіб ґрунтується на елементах, до яких у вас вже є доступ. У наведеному вище прикладі ви можете вибрати як додати елемент до маркованого списку, якщо список був вже обраний для якоїсь іншої мети; або, якщо у вас вже є вибірка, що містить всі елементи списку, то буде простіше розмістити перший елемент списку щодо останнього. супроводжувати. Остерігайтеся розміщення, в якому робиться припущення про точну структуру HTML на вашій сторінці.
Копіювання елементів
Ви можете зробити копію елемента або набору елементів за допомогою методу . clone(). Він дозволяє робити копію елементів, але зауважте, що копія зберігається тільки в пам'яті — ви повинні самостійно помістити її в документ. Ви можете маніпулювати клонованим елементом або елементами до їхнього розміщення в документі.
<code data-language="javascript">var clones=$( 'li').clone(); clones.html(function( index, oldHtml) { return oldHtml + '!!!'; }); $( '#my-unordered-list').append( clones); jQuery не завадить вам клонувати елемент з ідентифікатором, тому ви повинні переконатися, що змінили або Видалили атрибут id перед встановленням елемента в документ, оскільки в документі не повинно бути кілька елементів з однаковим id.
Видалення елементів
Є три способи видалення елементів з документа: .remove(), .detach() та .replaceWith(). Кожен метод служить конкретної мети.
Метод .remove() слід використовувати для видалення елементів назавжди, також він прибирає будь-які обробники подій, пов'язаних з елементами. Метод .remove() повертає покажчик на віддалені елементи, але якщо ви повторно додаєте їх, то у них більше не буде пов'язаних з ними подій.
<code data-language="javascript">$( '#my-unordered-list li').click(function() { alert( $( this).text()); }); var removedListItem=$( '#my-unordered-list li').first().remove(); removedListItem.appendTo( '#my-unordered-list'); removedListItem.trigger( 'click'); //alert не працює!Метод .detach() застосовується для тимчасового видалення елементів з документа. Наприклад, якщо ви збираєтеся внести безліч змін до структури вашої сторінки через jQuery, то буде ефективно використовувати .detach() щоб видалити вибрані елементи, внести в них необхідні зміни, а потім знову прикріпити елемент, використовуючи один із методів вставки. Елементи, видалені через .detach(), зберігають свої обробники подій; ви можете повторно додати їх до документа за допомогою .appendTo() або іншим способом.
<code data-language="javascript">$( '# my-unordered-list li').click(function() { alert( $( this).text()); }); var detachedListItem=$( '#my-unordered-list li').first().detach(); //Зробити щось комплексне з елементом списку detachedListItem.appendTo( '#my-unordered-list'); detachedListItem.trigger( 'click'); //alert!Нарешті, метод .replaceWith() замінює елемент або елементи на елемент або HTML, який передається як аргумент .replaceWith(). Метод повертає замінені елементи, але як і .remove(), забираються всі обробники подій пов'язані з ними.
<code data-language="javascript">$( '#my-unordered-list li').click(function() { alert( $( this).text()); }); var replacedListItem=$( '#my-unordered-list li').first() .replaceWith( '<li>нове!</li>'); replacedListItem.appendTo( '#my-unordered-list'); replacedListItem.trigger( 'click'); //alert не працює! Резюме
У цьому розділі ми розглянули різні способи, за допомогою яких ми можемо переміщатися документом, вставляти в документ нові елементи і вносити в зміни.В наступному розділі ми розглянемо як взаємодіяти з користувачем на нашій сторінці.