Бібліотека jQuery дозволяє легко маніпулювати HTML кодом після його відображення в браузері. Вона також надає інструменти, які допоможуть користувачеві взаємодіяти зі сторінкою; інструменти, що допоможуть вам створювати анімацію; та інструменти, які дозволяють вам спілкуватися із сервером без перезавантаження сторінки. Ми незабаром до цього дістанемося. Для початку розглянемо деякі основи jQuery, а також застосуємо jQuery для його основної роботи: отримати якісь елементи і щось з ними зробити. Це керівництво припускає, що ви знайомі з HTML та селекторами CSS. Якщо ви не знаєте, як застосовувати селектори до певних елементів, то повинні витратити деякий час і швидко увійти в курс справи, перш ніж приступати до роботи з цим керівництвом. Чому $, а не щось ще?
Бібліотека jQuery надає функцію jQuery, яка дозволяє вам вибирати елементи за допомогою селекторів CSS.
<code data-language="javascript">var listItems=jQuery('li');Звичайно, якщо ви вже бачили будь-який jQuery-код, то, ймовірно, більше звикли до чогось на кшталт цього:
><code data-language="javascript">var listItems=$( 'li');
Як обговорювалося у розділі Основи JavaScript, коректні імена JavaScript можуть бути досить довільні, якщо тільки вони не починаються з цифри і не включають дефіс. Таким чином, $ у коді просто більш коротке та зручне ім'я для функції jQuery. Насправді наприкінці вихідного коду jQuery ви знайдете:
<code data-language="javascript">window.jQuery=window.$=jQuery;
При викликі функції $() та передачі в неї селектора ви створюєте новий об'єкт jQuery. Звичайно, в JavaScript функції теж об'єкти, це означає, що у $ (і jQuery, природно) також є властивості та методи. Наприклад, ви можете звернутися до властивості $.support за інформацією про те, що підтримує поточний браузер, а за допомогою методу $.ajax зробити запит через AJAX.
Далі в посібнику ми будемо використовувати $ замість jQuery для стислості. Зверніть увагу, що якщо ваша сторінка містить більше однієї бібліотеки JavaScript, $ може застосовуватися іншою бібліотекою і це може призвести до того, що jQuery перестане працювати. Якщо ви зіткнулися з подібним, ви повинні розглянути використання jQuery.noConflict перед завантаженням інших бібліотек.
$(document).ready()
Перед безпечним використанням jQuery для виконання чогось на сторінці, ви повинні переконатися, що сторінка перебуває в стані, коли вона готова до маніпуляцій. З jQuery ми повинні помістити наш код у функцію, а потім цю функцію $(document).ready(). Як ви можете бачити ми використовуємо анонімну функцію.
Як тільки буде готовий документ, виконається функція, яку ми передали в .ready(). Що тут відбувається? Ми використовуємо $(document) для створення об'єкта jQuery document, а потім викликаємо функцію . ready() для цього об'єкта, передаючи йому функцію, яку ми хочемо виконати.
Оскільки таке часто де зустрічається, можете за бажання використати скорочений метод — функція $() робить подвійну роботу як псевдонім для $(document).ready(), якщо ви передаєте функцію:
<code data-language="javascript">$(function() { console.log( 'готов!'); }); Далі в цьому посібнику будемо мати на увазі, що розглядається код укладено в $(document).ready(function() { ... }), але для стислості цю частину не вказуємо.
Отримуємо деякі елементи
Найпростіше, що ми можемо робити з jQuery — це отримати деякі елементи і щось ними виконати. Якщо ви знайомі з селекторами CSS, отримати довільні елементи дуже легко: ви просто передаєте відповідний селектор у $().
<code data-language="javascript">$( '#header'); //вибрати елемент із ідентифікатором header $( 'li'); //вибрати всі пункти списків на сторінці $('ul li'); //вибрати всі пункти маркованого списку $('.person'); //вибрати всі елементи з класом personВажливо розуміти, що будь-яка зроблена вибірка міститиме тільки ті елементи, які існували на сторінці на момент вибору. Іншими словами, якщо ви пишете var anchors=$( 'a'), а потім додайте ще один елемент <a> на свою сторінку, змінна anchors не міститиме цей новий елемент.
Інші способи створення об'єкта jQuery
Крім передачі простого селектора в $(), ви можете створювати об'єкти jQuery та іншими способами:
<code data-language="javascript">//створити jQuery-об'єкт із елемента DOM $( document.body.children[0]); //Створити jQuery-об'єкт із списку елементів DOM $([ window, document ]); //зробити вибірку у контексті елемента DOM var firstBodyChild=document.body.children[0]; $('li', firstBodyChild); //зробити вибірку із попередньої var paragraph=$( 'p'); $( 'a', paragraph); Моя вибірка містить щось?
Іноді вам потрібно щось зробити, тільки коли вашому вибору відповідає кілька елементів. Оскільки функція $() завжди повертає об'єкт jQuery і він завжди істинний, ви повинні перевірити вміст вашої вибірки, щоб визначити, чи було щось знайдено.
Увага! Помилковий код
<code data-language="javascript">if ( $( '#nonexistent')) { //Невірно! Цей код буде виконуватись завжди! }
if ( $( '#nonexistent').length > 0) { //Правильно! Цей код буде виконуватися тільки якщо на сторінці //є елемент з ідентифікатором nonexistent }Ми можемо скоротити перевірку ще більше, якщо пригадаємо, що 0 це хибне значення:
<code data-language="javascript">if ( $( '#nonexistent').length) { //Цей код буде працювати тільки, якщо є відповідний елемент } Отримання окремих елементів з вибірки
Якщо вам потрібно працювати з вихідним елементом DOM з вибірки, слід отримати доступ до елемента з об'єкта jQuery. Наприклад, якщо ви хочете отримати доступ до властивості value елемента <input>, то повинні працювати з вихідним елементом DOM.
<code data-language="javascript">var listItems=$( 'li'); var rawListItem=listItems[0]; //або listItems.get( 0) var html=rawListItem.innerHTML;
Зверніть увагу, що ви не можете викликати методи jQuery для вихідних елементів DOM. Тому наступний приклад не працюватиме:
<code data-language="javascript">var listItems=$( 'li'); var rawListItem=listItems[0]; var html=rawListItem.html(); //Об'єкт #<HTMLInputElement> не містить метод html
Якщо вам потрібно працювати з одним елементом у вибірці і ви хочете використовувати методи jQuery для цього елемента, то можете отримати новий об'єкт jQuery, що містить єдиний елемент, через .eq(), передаючи йому індекс елемента.
<code data-language="javascript">var listItems=$( 'li'); var secondListItem=listItems.eq(1); secondListItem.remove();
Створення нових елементів
У функції $ є також остання роль: створення нових елементів . Якщо в $() передається фрагмент HTML, то це створить новий елемент у пам'яті — іншими словами, елемент буде створений, але не доданий на сторінку, поки ви цього не зробите.
<code data-language="javascript">$( '<p>'); //Створення нового елемента <p> без вмісту $( '<p>Привіт!</p>'); //Створення нового елемента <p> з текстом $( '<p class="greet">Привіт!</p>'); //Створення нового елемента <p> з текстом та класом
Ви також можете створити елемент, передаючи об'єкт з інформацією про його створення:
<code data-language="javascript">$( '< ;p>', { html: 'Привіт!', 'class': 'greet' });Зверніть увагу, що ми повинні вказати властивість class у лапках, оскільки class це зарезервоване слово JavaScript і написання без лапок викликає помилки в деяких браузерах. Дивіться документацію jQuery для отримання детальної інформації про різні властивості, які можна включати в об'єкт.
>Ми розглянемо як додавати створені елементи на сторінку в наступному розділі, в якому розповідається про пересування по документу та маніпуляції з ним.
Робота з вибіркою
Після створення об'єкта jQuery, що містить вашу вибірку, ви, мабуть, хочете щось з нею зробити. Але до цього розглянемо кілька принципів, які є ключовими для розуміння того, що робить jQuery.
Перевірка вибірки
Ми можемо визначити, чи вибірка відповідає певному критерію, за допомогою методу .is(). Цей метод найчастіше використовується, щоб надати селектор як єдиний аргумент. Він повертає true або false залежно від того, чи відповідає вибірка селектору:
<code data-language="javascript">$( 'li').eq( 0).is( '.special'); //false $( 'li').eq( 1).is( '.special'); //true
Ви також можете передати метод .is() об'єкт jQuery, вихідний елемент DOM або навіть функцію, якщо вам потрібна комплексна перевірка. Дивіться документацію для отримання детальної інформації.
Отримання, встановлення та неявний перебір h3>
Є багато методів, які можна викликати після створення вибірки. Ці методи, як правило, поділяються на дві категорії: метод читання (гетер) та встановлюючий метод (сеттер). Методи читання витягують фрагмент інформації з вибірки, а методи установки певною мірою змінюють вибірку. Практично у всіх випадках методи читання оперують лише першим елементом у вибірці (.text() є відомим винятком); методи установки працюють для всіх елементів у вибірці використовуючи те, що відомо як неявний перебір.
Неявний перебір означає, що jQuery автоматично перебирає всі елементи у вибірці, коли ви викликаєте для вибірки встановлює метод. Це означає, що якщо ви хочете зробити щось для всіх елементів у вибірці, то не повинні викликати метод для кожного елемента у вашій вибірці — просто викликає метод для самої вибірки і jQuery обробить елементи для вас.
Припустимо , що ви хочете змінити HTML у всіх пунктах списку на сторінці. Щоб зробити це, ми повинні використовувати метод .html(), який змінить HTML у всіх вибраних пунктів списку.
<code data-language="javascript">$( 'li').html( 'Новий HTML ');
Ви також можете передати функцію в метод установки jQuery. Значення цієї функції, що повертається, використовується як нове значення і воно отримує два аргументи: індекс елемента у вибірці і старе значення, яке ви намагаєтеся змінити. Це корисно, коли вам потрібна інформація про поточний стан елемента, щоб правильно встановити новий стан.
<code data-language="javascript">$( 'li').html(function( index, oldHtml) { return oldHtml + '!!!' }); Явний перебір
Іноді завдання, яке ви намагаєтеся вирішити, не вписуються в жодний з існуючих методів jQuery та тоді ви повинні зробити явний вибір вибірки за допомогою методу .each(). У наступному коді на початок пункту списку ми додаємо тег <b> містить індекс елемента списку.
<code data-language="javascript">$( 'li').each(function( index, elem) { //this: поточний, вихідний елемент DOM //index: індекс поточного елемента у вибірці //elem: поточний, вихідний елемент DOM (також як this) .prepend( '<b>' + index + ':
</b>'); }); Зверніть увагу, що всередині функції, яку ми передаємо у .each(), ми маємо два способи доступу до поточного вихідного елементу DOM: через this і через elem. Як обговорювалося в розділі «Основи JavaScript», this — спеціальне ключове слово JavaScript, вказівник на об'єкт, який є поточним контекстом функції. У jQuery майже завжди відноситься до вихідного елемента DOM, з яким функція в даний момент працює. Так, у випадку .each(), this відноситься до поточного елемента в наборі елементів, які ми перебираємо.
Ланцюжки
Однією з найвигідніших частин jQuery є здатність «зчіплювати» методи разом. Це означає, що ми можемо викликати набір методів для вибірки без її повторення або збереження вибірки змінної. Ми навіть можемо зробити нові вибірки на основі попередніх і все без розриву ланцюга.
<code data-language="javascript">$( 'li') .click(function() { $( this). addClass( 'clicked'); }) .find( 'span') .attr( 'title', 'Наведи на мене');Ланцюжки можливі, тому що кожен встановлюючий метод в jQuery повертає вибірку, з якої він був викликаний. Це надзвичайно потужна особливість і багато бібліотек взяли її на озброєння. Тим не менш, вона повинна застосовуватись з обережністю. Великі ланцюжки можуть зробити код надзвичайно важким для читання, зміни та налагодження. Немає жорстких правил, наскільки довгим має бути ланцюжок, але навіть для простого ланцюжка вище, ймовірно, слід провести рефакторинг для зручності читання.
<code data-language="javascript">var listItems=$( 'li '); var spans=listItems.find('span'); listItems .click(function() { $( this).addClass( 'clicked'); }); spans.attr( 'title', 'Наведи на мене'); Резюме
У нас вийшов чудовий огляд як тикає jQuery.У наступному розділі ми розглянемо як на справі почати виконувати з ним різні штуки!