Бібліотека jQuery дозволяє легко маніпулювати кодом HTML після його відображення в браузері. Вона також надає інструменти, які допоможуть користувачеві взаємодіяти з вашою сторінкою; інструменти, які допоможуть вам створювати анімацію; і інструменти, які дозволяють вам спілкуватися з сервером без перезавантаження сторінки. Ми незабаром до всього цього доберемося. Для початку розглянемо деякі основи jQuery, а також застосуємо jQuery для його основної роботи: отримати якісь елементи і щось з ними зробити.
Це керівництво припускає, що ви знайомі з HTML і селекторами CSS. Якщо ви не знаєте, як застосовувати селектори до певних елементів, то повинні витратити деякий час і швидко увійти в курс справи, перш ніж приступати до роботи з цим керівництвом.
Чому $, а не щось ще?
Бібліотека jQuery надає функцію jQuery. яка дозволяє вам вибирати елементи за допомогою селекторів CSS.
Звичайно, якщо ви вже бачили будь jQuery-код, то, ймовірно, більше звикли до чогось на кшталт цього:
$ (Document) .ready ()
Перед безпечним використанням jQuery для виконання чого-небудь на сторінці, ви повинні переконатися, що сторінка знаходиться в стані, коли вона готова до маніпуляцій. З jQuery ми повинні помістити наш код в функцію, а потім цю функцію в $ (document) .ready (). Як ви можете бачити ми використовуємо анонімну функцію.
Як тільки документ буде готовий, виконається функція, яку ми передали в .ready (). Що тут відбувається? Ми використовуємо $ (document) для створення jQuery-об'єкта document. а потім викликаємо функцію .ready () для цього об'єкта, передаючи йому функцію, яку ми хочемо виконати.
Оскільки таке часто де зустрічається, можете при бажанні використовувати скорочений метод - функція $ () робить подвійну роботу як псевдонім для $ (document) .ready (). якщо ви передаєте функцію:
Далі в цьому посібнику будемо мати на увазі, що розглянутий код укладений в $ (document) .ready (function ()). але для стислості цю частину не вказуємо.
Отримуємо деякі елементи
Найпростіше, що ми можемо робити з jQuery - це отримати деякі елементи і щось ними виконати. Якщо ви знайомі з селекторами CSS, отримати довільні елементи дуже легко: ви просто передаєте відповідний селектор в $ ().
Важливо розуміти, що будь-яка зроблена вибірка буде містити тільки ті елементи, які існували на сторінці на момент вибору. Іншими словами, якщо ви пишете var anchors = $ ( 'a'). а потім пізніше додасте ще один елемент на свою сторінку, то змінна anchors нічого очікувати утримувати цей новий елемент.
Інші способи створення об'єкта jQuery
Крім передачі простого селектора в $ (). ви можете створювати об'єкти jQuery і іншими способами:
Моя вибірка містить що-небудь?
Іноді вам потрібно щось зробити, тільки коли вашим вибором відповідає кілька елементів. Оскільки функція $ () завжди повертає об'єкт jQuery і він завжди істинний. ви повинні перевірити вміст вашої вибірки, щоб визначити, чи було щось знайдено.
Увага! помилковий код
Ми можемо скоротити перевірку ще більше, якщо згадаємо, що 0 це помилкове значення:
Отримання окремих елементів з вибірки
Якщо вам потрібно працювати з вихідним елементом DOM з вибірки, то слід отримати доступ до елементу з об'єкта jQuery. Наприклад, якщо ви хочете безпосередньо отримати доступ до властивості value елемента . то повинні працювати з вихідним елементом DOM.
Зауважте, що ви не можете викликати методи jQuery для вихідних елементів DOM. Тому наступний приклад працювати не буде:
Якщо вам потрібно працювати з одним елементом у вибірці і ви хочете використовувати методи jQuery для цього елемента, то можете отримати новий об'єкт jQuery, що містить єдиний елемент, через .eq (). передаючи йому індекс елемента.
Створення нових елементів
У функції $ є також остання роль: створення нових елементів. Якщо в $ () передається фрагмент HTML, то це створить новий елемент в пам'яті - іншими словами, елемент буде створений, але не доданий на сторінку, поки ви цього не зробите.
Ви також можете створити елемент, передаючи об'єкт з інформацією про його створення:
Ми розглянемо як додавати створені елементи на сторінку в наступному розділі, в якому розповідається про пересування по документу і маніпуляції c ним.
Робота з вибіркою
Після створення об'єкта jQuery містить вашу вибірку, ви, ймовірно, хочете щось з нею зробити. Але до цього розглянемо кілька принципів, які є ключовими для розуміння того, що робить jQuery.
Перевірка вибірки
Ми можемо визначити, чи відповідає вибірка певного критерію, за допомогою методу .is (). Цей метод найбільш часто використовується, щоб надати селектор в якості єдиного аргументу. Він повертає true або false залежно від того, чи відповідає вибірка селектору:
Ви також можете передати в метод .is () об'єкт jQuery, вихідний елемент DOM або навіть функцію, якщо вам потрібна комплексна перевірка. Дивіться документацію для отримання докладної інформації.
Отримання, установка і неявний перебір
Неявний перебір означає, що jQuery автоматично перебирає всі елементи в вибірці, коли ви викликаєте для вибірки встановлює метод. Це означає, що якщо ви хочете зробити щось для всіх елементів у вибірці, то не повинні викликати метод для кожного елемента в вашій вибірці - просто викликаєте метод для самої вибірки і jQuery обробить елементи для вас.
Припустимо, що ви хочете змінити HTML у всіх пунктів списку на сторінці. Щоб зробити це ми повинні використовувати метод .html (), який змінить HTML у всіх обраних елементів списку.
Ви також можете передати функцію в метод установки jQuery. Значення, що повертається цієї функції використовується в якості нового значення і воно отримує два аргументи: індекс елемента в вибірці і старе значення, яке ви намагаєтеся змінити. Це корисно, коли вам необхідна інформація про поточний стан елемента, щоб правильно встановити новий стан.
явний перебір
Іноді завдання, яке ви намагаєтеся вирішити, не вписуються ні в один з існуючих методів jQuery і тоді ви повинні зробити явний перебір вибірки за допомогою методу .each (). У наступному коді в початок пункту списку ми додаємо тег що містить індекс елемента списку.
Однією з найбільш вигідних частин jQuery є здатність «зчіплювати» методи разом. Це означає, що ми можемо викликати набір методів для вибірки без її повторення або збереження вибірки в змінної. Ми навіть можемо зробити нові вибірки на основі попередніх і все без розриву ланцюжка.
Ланцюжки можливі, тому що кожен встановлює метод в jQuery повертає вибірку, з якої він був викликаний. Це надзвичайно потужна особливість і багато бібліотек взяли її на озброєння. Тим не менш, вона повинна застосовуватися з обережністю. Великі ланцюжка можуть зробити код надзвичайно важким для читання, зміни і налагодження. Немає жорстких правил, наскільки довгою повинна бути ланцюжок, але навіть для простої ланцюжка вище, ймовірно, слід провести рефакторинг для зручності читання.
У нас вийшов відмінний огляд як цокає jQuery. У наступному розділі ми розглянемо як на ділі почати виконувати з ним різні штуки!