Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups

20 корисних методів jQuery, які вам слід використовувати

by
Read Time:14 minsLanguages:

Ukrainian (українська мова) translation by Lina (you can also view the original English article)

Що ж, ви вже погралися з jQuery якийсь час, почали до неї звикати, і вона вам дуже сподобалася. Готові підвищити свій рівень знань про jQuery? Сьогодні я продемонструю вам двадцять функцій та можливостей, про які ви, певно, не знали!


1 after() / before()

Іноді ви хочете додати щось до DOM (* Document Object Model – об'єктна модель документа. Тут і надалі примітка перекладача), але у вас нема для цього ніяких відповідних засобів; методи append() і prepend() не спрацюють, і ви не хочете додавати додатковий елемент або id. Ці дві функції тут і можуть вам згодитися. Вони дозволяють додавати до DOM елементи одразу перед або після іншого елемента, так що новий елемент стає сібсом попереднього (* елементи мають спільного «батька»).

Для виконання цієї операції ви також можете скористатися іншим синтаксисом (спочатку йде контент, який хочемо вставити, потім – цільовий елемент); просто скористайтеся функцією insertAfter() або insertBefore().


2 change()

Метод change() – обробник подій, як і click() або hover(). Подія change призначена для полів з типом text, textarea і списків для вибору і генерується при зміні значення цільового елемента; зверніть увагу на відмінність обробника подій для нього від обробників для focusOut і  blur, що генеруються при втраті фокуса елементом незалежно від того, змінено його значення чи ні.

Подія change відмінно підходить для виконання перевірки даних на стороні клієнта; вона краще підходить для неї, ніж blur, оскільки ви не будете повторно перевіряти значення полів, якщо користувач їх не змінює.


3 Context

Контекст є і параметром, і властивістю в jQuery. При відборі елементів ви можете передати другий параметр до функції jQuery. Цей параметр, контекст, звичайно буде елементом DOM, і завдяки ньому кількість повернених елементів обмежується тими, що задовольняють вимогам селектора та є дочірніми елементами контексту. Подібне пояснення може трохи збити вас з пантелику, так що розгляньте цей приклад:

context example

Отже, де би це могло вам пригодитися? Наприклад, в обробнику подій. Якщо би ви захотіли отримати елемент всередині елемента, для якого було згенеровано подію, то могли би передати this у якості контексту:


4 data() / removeData()

Ви коли-небудь хотіли зберегти трохи інформації про елемент? Ви запросто можете це зробити за допомогою методу data(). Щоб встановити значення, ви можете передати два параметри (ключ і значення) або тільки один (об'єкт).

Для отримання ваших даних назад просто викличте цей метод, передавши в якості параметра ключ необхідного вам значення.

Щоб отримати всі дані, які відносяться до елемента, викличте метод data() без будь-яких параметрів; ви отримаєте об'єкт з усіма ключами та значеннями, що ви задали для цього елемента.
Якщо ви хочете видалити пару ключ/значення після її додавання до елемента, просто викличте removeData(), передавши необхідний ключ.


5 queue() / dequeue()

Функції queue() і dequeue() використовуються для роботи з анімаціями. Черга – це список анімацій, які необхідно виконати для елемента; за налаштуванням черга для елемента називається 'fx.' Давайте підготуємо сценарій:

HTML

JavaScript

Отже, ось у нас тут відбувається: у функції animateBox ми задаємо чергу анімацій; зверніть увагу, що остання – повторний виклик цієї функції (* здатність підпрограми викликати під час виконання саму себе. Розрізняють пряму та побічну (непряму) рекурсії), завдяки чому черга буде безперервно повторюватися. При клацанні по li#start ця функція викликається і починається виконання анімацій із черги.  При клацанні по li#reset поточна анімація завершується, і потім анімування елемента div припиняється. За допомогою jQuery ми задали значення черги під назвою 'fx' (пам'ятаєте, значення налаштуванням) порожній масив; по суті, ми спорожнили чергу. А що відбувається при клацанні li#add? Спочатку ми викликаємо метод queue для елемента div; завдяки цьому функція, яку ми передаємо до нього, додається у кінець черги; оскільки ми не вказали назву черги в якості першого параметра, то використовується 'fx'. У цій функції ми анімуємо елемент div і потім викликаємо для нього dequeue(), завдяки чому ця функція видаляється з черги і продовжується виконання решти анімацій для елемента, але вже без неї.


6 delay()

Коли ви задаєте чергу анімацій, ви может скористатися методом delay() для призупинення виконання анімацій на певний проміжок часу; передавайте його в якості параметра в мілісекундах.


7 bind(), unbind(), live() і die()

Чи знаєте ви, що коли ви додаєте для елемента обробник для події click, наприклад, таким чином...

... ви в дійсності використовуєте обгортку для методу bind() (* починаючи з jQuery 1.7 вважається застарілим. Замість нього варто використовувати .on())? Для того щоб скористатися самим методом bind(), ви можете передати тип події в якості першого параметра і потім у якості другого – функцію.

Якщо ви використовуєте велику кількість подій, то можете поділити їх на категорії за допомогою простору імен; просто додайте крапку після події та ваш простір імен.

Також ви можете задати той самий обробник для багатьох подій одночасно, поділивши їх пробілами. Таким чином, якщо ви хочете реалізувати ефект hover (* при якому відбувається якась дія при переміщенні курсору над текстом або зображенням), то могли би почати з цього:

Також при бажанні можете передавати дані до функції, додаючи третій параметр (у другій позиції).

Рано чи пізно ви помітите, що додаєте елемент до DOM за допомогою обробника подій; проте, ви зрозумієте, що створені вами за допомогою функції bind (або її обгорток) обробники подій не працюють для вбудованих елементів. У подібних випадках вам буде необхідно використовувати метод live() (або delegate) (* починаючи з jQuery 1.7 вважається застарілим. Замість нього варто використовувати .on()).

Для відв'язування обробника подій, доданих за допомогою bind(), скористайтеся методом unbind() (* починаючи з jQuery 1.7 вважається застарілим. Замість нього варто використовувати .off())? Якщо ви не передаєте ніяких параметрів, то будуть видалені всі обробники; ви можете передати тип події для того, щоб видалити тільки обробники цього типу; для видалення обробників подій певного простору імен додайте простір імен або передавайте тільки його. Якщо ви хочете видалити тільки певний обробник, то передайте його ім'я в якості другого параметра.

Зверніть увагу, що ви не можете прив'язувати/відв'язувати анонімні обробники (* функції без імені); видалення певного обробника можливо тільки для іменованих функцій.
Якщо ви хочете відв'язати обробник для події всередині функції, що викликається при генеруванні цієї події, то просто передайте до unbind() об'єкт event.

Ви не можете використовувати unbind() для відв'язування обробників, прив'язаних за допомогою методу live; замість нього використовуйте die() (* починаючи з jQuery 1.7 вважається застарілим. Замість нього варто використовувати .off()). Без параметрів цей метод видалить всі обробники, прив'язані за допомогою методу live, для колекції елементів; також ви можете передавати до нього тільки тип події або тип події та назву обробника, який необхідно видалити.

І тепер ви можете майстерно орудувати обробниками в jQuery!

Також вам слід розглянути метод delegate(), оскільки він має переваги з продуктивності у порівнянні з live().


8 eq()

Якщо вам необхідно отримати певний елемент із набору елементів, то ви можете передати індекс елемента до методу eq() і отримати єдиний елемент jQuery. Передавайте негативний індекс для обчислення елементів з кінця набору.

Також ви можете використовувати :eq() у ваших селекторах; так що попередній приклад можна було би реалізувати й таким чином:


9 get()

При отриманні колекції елементів jQuery повертає їх у вигляді об'єкта jQuery, завдяки чому у вас є доступ до всіх його методів. Якщо ви хочете отримати просто елементи DOM, то можете використовувати метод get().

Ви можете задати індекс для отримання тільки одного едемента.


10 grep()

Якщо ви не знайомі з командною мовою Unix/Linix, ви, скоріш за все, не чули про термін під назвою grep (* грепнути – швидко продивитися, подібно службовій програмі grep в операційній системі UNIX). Якщо ми маємо справу з командним рядком, то цим терміном позначається утиліта для пошуку тексту; проте у контексті jQuery grep – це метод для фільтрації масиву елементів. Він не є методом для колекції jQuery; ви передаєте масив у якості першого параметра і функцію для фільтрації – у якості другого. Ця функція і сама приймає два параметри: елемент із масиву та його індекс. Вона повинна виконувати свою роботу та повертати значення  true або false. За налаштуванням всі елементи, для яких функція повернула true, будуть залишені в масиві. Ви можете додати третій параметр, логічний (* у ньому може міститися 0 або 1), для зміни результату на протилежний та зберігання в масиві елементів, що повертають false.

Недавно Jeffrey Way опублікував відмінну коротку рекомендацію з використання $.grep; ознайомтеся з нею, щоб зрозуміти, як його використовувати!


11 Псевдо-селектори

Sizzle, програмний механізм jQuery для роботи з селекторами CSS, надає доволі багато псевдо-селекторів для полегшення відбору необхідних вам елементів. Ознайомтеся з цими незвичайними:

Їх, звісно ж, більше, але ці – унікальні.


12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

Іноді вам необхідно впевнитися, що переданий до функції параметр мав коректний тип; завдяки цим функціям це легко виконати. Перші три цілком говорять за себе.

Про призначення останньої не так просто здогадатися; isPlainObject() поверне true, якщо переданий параметр було створено як літерал (* літеральна (символьна константа)) об'єкта або за допомогою new Object().


13 makeArray()

При створенні колекції елементів DOM за допомогою jQuery ви отримуєте об'єкт jQuery; у деяких випадках ви можете захотити, щоб рещультатом був масив або звичайні елементи DOM; саме для цього і використовується makeArray().


14 map()

Метод map() віддалено схожий на grep(). Як ви могли би чекати, він приймає один параметр – функцію. Ця функція може приймати два параметри: індекс поточного елемента та сам елемент. Ось що відбувається при використанні цього методу: функцію, яку ви передаєте, буде виконано одного разу для кожного елемента колекції; яким би не було повернене нею значення, воно замінює елемент колекції, для якого її було викликано.


15 parseJSON()

Якщо ви використовуєте $.post або $.get – а також в  інших ситуаціях, коли ви працюєте з рядками JSON (* JavaScript Object Notation – текстовий формат обміну даними, заснований на JavaScript) – вам стане в нагоді функція parseJSON. Чудово, що ця функція використовує вбудований до браузера парсер (* синтаксичний аналізатор) JSON, якщо він в ньому є (що, звісно ж, буде працювати швидше).


16 proxy()

Якщо у вас є метод для об'єкта і він використовує інші властивості об'єкта, то у вас не вийде викликати його з інших функцій та отримати вірний результат. Розумію, що подібне пояснення прозвучало заплутано, так що давайте розглянемо короткий приклад:

При самостійному виклику person.meet() буде виводити повідомлення коректно; проте при виклику з обробника подій буде виведено повідомлення "Hi! My name is undefined." Так відбувається, оскільки функцію не було викликано у вірному контексті. Щоб це виправити, ми можемо використати функцію proxy():

Перший параметр функції proxy – метод, який нам необхідно виконати; другий – контекст, у якому нам варто його викликати.  Альтернативний варіант: можемо передати спочатку контекст, а потім – назву методу у вигляді рядка. Тепер ви побачите, що функція виводить вірне повідомлення.

Віддаєте перевагу короткій пораді про $.proxy у вигляді відео?


17 replaceAll() / replaceWith()

Якщо вам захочеться замінити елементи DOM іншими, то ось вам інструкція. Ми можемо викликати replaceAll() для елементів, що ми відібрали або створили, передаючи в якості параметра селектор для отримання елементів, які ми би хотіли замінити. У цьому прикладі всі елементи з класом error буде  замінено на створений нами span.

Метод replaceWith() використовується, щоб поміняти місцями відібрані елементи; спочатку необхідно отримати елементи, які ви хочете замінити:

Також ви можете передавати цим двом методам функції, що повернуть елементи або рядки HTML.


18 serialize() / serializeArray()

Метод serialize() – метод, що використовуються для кодування значент форми до рядка.

HTML

JavaScript

Ви можете використовувати serializeArray() для того, перетворити значення форми до масиву об'єктів замість рядка:


19 siblings()

Ви, певно, можете здогадатися, для чого застосовується метод siblings(); він поверне набір сібсів для будь-яких елементів ваших оригінальних колекцій:


20 wrap() / wrapAll() / wrapInner()

Завдяки цим трьом функціям полегшується обгортання елементів іншими елементами. Насамперед я згадаю, що всі три приймають один параметр: або елемент (рядок HTML, селектор CSS, об'єкт jQuery або елемент DOM), або функцію, що повертає елемент.
Метод wrap() обгортає кожен елемент у колекції вказаним елементом:

wrapAll() розташує всі елементи колекції до одного елемента; це означає, що всі елементи колекції будуть переміщені до нового вузла DOM; вони вишикуються на місті першого елемента колекції та будуть обгорнуті там:

HTML, до:

JavaScript

HTML, після:

Нарешті, за допомогою функції wrapInner ми можемо обгорнути всі елементи всередині кожного елемента колекції вказаним елементом:

HTML, до:

JavaScript:

HTML, після:


Завершення

Що ж, тепер у нас є більше 20 нових можливостей jQuery для випробовування у вашому наступному проекті; пограйтеся з ними!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.