1. after () / before ()
Іноді вам потрібно вставити що-небудь в DOM, але у вас немає хороших зачіпок, за допомогою яких можна це зробити; append () або prepend () не дозволяють йти навпростець, а ви не хочете додавати зайвий елемент або id. Дві ці функції могли б стати тим, що потрібно. Вони дозволяють вам вставляти елементи в DOM прямо перед, або після обраного елемента таким чином, що новий елемент поміщається на той же рівень.
Також це можна зробити, якщо ви працюєте безпосередньо з тим елементом, який хочете вставити; просто використовуйте функції insertAfter () або insertBefore.
2. change ()
Метод change () - це оброблювач подій, прямо як click () або hover (). Подія change - для текстових областей, полів введення і вікон вибору, і воно спрацює, коли зміниться значення цільового елемента; зауважте, це не те ж саме, що обробники подій focusOut () або blur (), які запускаються, коли елемент втрачає фокус, незалежно від того, змінено його значення чи ні.
Подія change () бездоганно для валідації даних на стороні клієнта; це набагато краще, ніж blur (), тому що ви не будете заново виконувати перевірку полів, якщо користувач не змінить значення.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
3. Context
Context - це і параметр, і властивість в jQuery. При обробці елементів ви можете передати його в функцію jQuery як другий параметр. Цей параметр - контекст, зазвичай є елементом DOM, і він обмежує елементи, зіставляти вашому селектору, дочірніми елементами контексту. Можливо, ви трохи спантеличені, тому подивіться ось цей приклад:
Отже, де це може бути корисним? Одна з таких ситуацій може виникати всередині функції обробника подій. Якщо вам необхідно отримати дочірній елемент всередині джерела події, ви можете передавати його властивість this в якості контексту:
4. data () / removeData ()
Ви коли-небудь мали необхідність зберігати додаткову інформацію про елемент? За допомогою методу data () можна легко це зробити. Щоб встановити значення, ви можете передати два параметри (ключ і значення) або всього один (об'єкт).
Щоб отримати назад свої дані, просто викличте метод з ключем значення, яке вам потрібно.
Щоб отримати всі дані, які співвідносяться з елементом, викличте метод data () без жодних параметрів; ви отримаєте об'єкт, що містить всі ключі і значення, які ви призначали цьому елементу.
Якщо хочете видалити пару ключ / значення після того, як додали її до елементу, просто викличте removeData (), передаючи належний ключ.
5. queue () / dequeue ()
Функції queue () і dequeue () стосуються анімації. Черга (queue) - це список анімації, виконуваної для елемента; за замовчуванням чергу елемента називається 'fx.' Давайте розглянемо ситуацію:
Отже, ось що відбувається: в функції animateBox ми налаштовуємо чергу анімації; зверніть увагу, що останній запис знову звертається до функції, так що вона буде постійно повторювати чергу. Коли ми клацаємо li # start, викликається ця функція і черга починає працювати. Коли ми клацаємо li # reset, поточна анімація закінчується, і ми повинні зупинити анімацію div. Щоб зробити це на jQuery, чергу з назвою 'fx' (пам'ятаєте, чергу за замовчуванням) встановлюється в порожній масив; по суті, ми очищаємо чергу. А що відбувається, коли ми клацаємо li # add? Перш за все, ми викликаємо функцію queue () на div'е; властивість this, що використовується в функції, передається разом з нею в кінець черги; так як ми не вказували чергу як перший параметр, використовується стандартне назва 'fx'. Усередині цієї функції ми анімуємо div, а потім викликаємо dequeue () на div'е, з тим, щоб видалити цей крок з черги і продовжити обробку; таким чином, черга буде повторюватися, але ця функція вже не буде її частиною.
6. delay ()
Перебуваючи в ланцюжку анімації, ви можете використовувати метод delay (), щоб припиняти анімацію на деякий термін; час передається як параметр в мілісекундах.
7. bind (), unbind (), live (), and die ()
Чи знаєте ви, що коли додаєте обробник клацання до елементу на кшталт цього.
в дійсності ви просто використовуєте оболонку для методу bind ()? Щоб використовувати сам метод bind (), ви можете передати тип події в якості першого параметра, а потім функцію в якості другого.
Також ви можете призначити однакову функцію кільком подіям одночасно, розділяючи їх назви пробілами. Так, якби ви захотіли зробити ефект hover, то могли б почати таким чином:
Також можливо передавати дані функції, шляхом додавання третього параметра (в другу позицію).
Рано чи пізно виявиться, що ви вставляєте елемент в DOM за допомогою обробника події; однак незабаром ви виявите, що обробники подій, які ви вже зробили за допомогою функції bind або її оболонок, не працюють для знову вставлених елементів. У подібних випадках, вам доведеться використовувати метод live () (або delegate); це дозволить додавати обробники події в відповідні вставлені елементи.
Щоб видалити обробники подій, створені за допомогою bind (), використовуйте метод unbind (). Якщо ви не передасте йому ніяких параметрів, він видалить всі обробники; ви можете передати тип події, щоб видалити тільки обробники подій цього типу; щоб видалити події з конкретного простору імен, додайте простір імен або використовуйте його окремо. Якщо хочете просто видалити певну функцію, передайте відповідно її ім'я як другий параметр.
Зауважте, що ви можете призначати / видаляти обробники подій у функціях переданих анонімно; ці методи працюють тільки з іменами функцій.
Якщо ви намагаєтеся видалити обробник події зсередини функції, викликаної подією, просто передайте unbind () посилання на об'єкт-подія.
Ви не можете використовувати unbind () для обробників подій створених функцією live (); для цього використовується функція die (). За відсутності параметрів вона видаляє всі live-обробники подій з усієї сукупності елементів; також їй можна передати тип події, або тип події та ім'я функції обробника.
Тепер ви володієте потужністю і гнучкістю механізму подій jQuery!
Вам також слід вивчити метод delegate (), так як він може мати значні переваги в продуктивності перед методом live ().
Якщо ви шукаєте певний елемент всередині набору елементів, ви можете передати його індекс в метод eq () і отримати єдиний елемент jQuery. Передача негативного індексу означає відлік у зворотному напрямку з кінця набору.
Також ви можете використовувати: eq () в своїх селекторах; так що попередній приклад міг би виглядати ось так:
Отримуючи сукупність елементів, jQuery повертає їх як об'єкт jQuery, так що ви маєте доступ до всіх методів. Якщо ж вам потрібні просто «сирі» (raw) елементи DOM, можна використовувати метод get ().
Ви можете задати індекс, щоб отримати єдиний елемент.
10. grep ()
Якщо ви не знайомі з програмними оболонками (shells) Unix / Linux, то могли і не чути термін grep. У терміналі - це утиліта текстового пошуку; але тут, в jQuery, ми використовуємо її, щоб фільтрувати масив елементів. Це не метод колекцій jQuery; ви передаєте масив в якості першого параметра і функцію фільтрації як другий параметр. Функція фільтрації приймає два параметри: елемент з масиву і його індекс. Вона повинна виконати свою роботу і повернути значення true або false. За замовчуванням, всі елементи, для яких було повернуто значення true, будуть потрапляти в результати фільтрації. Ви так само можете додати третій параметр, булево вираз, щоб інвертувати результати і вибрати елементи, для яких функція фільтрації повернула false.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
11. Псевдоселектори
Sizzle, движок CSS-селекторів всередині jQuery, пропонує кілька псевдоселекторов для полегшення роботи з відбору потрібних вам елементів. Дивіться, це цікаво:
Звичайно, є й інші, але ці - унікальні.
12. isArray () / isEmptyObject () / isFunction () / isPlainObject ()
Іноді вам потрібно впевнитися, що параметр, переданий функції, був правильного типу; ці функції дозволяють легко це зробити. Перші три самі в достатній мірі себе пояснюють:
Наступний приклад не настільки ясний; isPlainObject () поверне true, якщо переданий параметр був створений як об'єктна константа, або за допомогою new Object ().
13. makeArray ()
Коли ви створюєте колекцію елементів DOM за допомогою jQuery, ви отримуєте об'єкт jQuery; в деяких ситуаціях ви б вважали за краще, щоб це був масив або звичайні елементи DOM; функція makeArray () саме це і може зробити.
Метод map () віддалено схожий на grep (). Як ви могли б припустити, він приймає один параметр, функцію. Ця функція може мати два параметра: індекс поточного елемента і сам елемент. Ось що відбувається: функція, яку ви передаєте, будуть виконуватися один раз для кожного елемента в колекції; і кожне значення, що повертається цією функцією, буде замінювати елемент колекції, який їй передається в якості аргументу.
15. parseJSON ()
Якщо ви користуєтеся $ .post або $ .get - і в інших ситуаціях при роботі з рядками JSON - ви знайдете корисної функцію parseJSON. Хоча звичайно краще, якщо ваша функція використовує вбудований в браузери парсер JSON, коли він є (що, очевидно, буде швидше).
16. proxy ()
Якщо у вас є функція - властивість об'єкта, і вона використовує інші властивості об'єкта, ви не можете викликати таку функцію зсередини інших функцій і отримувати правильні результати. Я знаю, що це збиває з пантелику, тому давайте розглянемо дотепний приклад:
Сама по собі person.meet () буде виводити правильні дані; але коли вона викликається обробником події, вона буде видавати "Hi! My name is undefined. ". Це станеться за тим, що функція не викликається в правильному контексті. Щоб це виправити, можна використовувати функцію proxy ():
Перший параметр функції proxy - це метод, який необхідно запустити; другий - це контекст, в якому ми повинні його запустити. В іншому випадку, ми можемо першим параметром передати контекст, а ім'я методу як рядок - другим. Тепер ви виявите, що наша функція видає сигнали (alerts) правильно.
17. replaceAll () / replaceWith ()
Якщо вам необхідно замінити одні елементи DOM на інші, то ось як це зробити. Ми можемо викликати replaceAll () на елементах колекцій або новостворених елементах, вказуючи селектор тих елементів, які ми хотіли б замінити. У цьому прикладі всі елементи класу error будуть замінені створеним нами span.
Метод replaceWith () просто змінює селектори місцями; тобто спочатку ми шукаємо те, що хочемо замінити:
Також ви можете передавати цим двом методам функції в якості аргументів, які будуть повертати елементи або рядки HTML.
18. serialize () / serializeArray ()
Метод serialize () - те, що потрібно для кодування значень у формах в рядок.
Так само можна використовувати serializeArray (), щоб перетворювати значення в формах в масив об'єктів замість рядка.
19. siblings ()
Можливо, ви можете здогадатися, що робить метод siblings (); він повертає колекцію елементів того ж рівня, що і кожен елемент вихідної колекції:
20. wrap () / wrapAll () / wrapInner ()
Три цих функції полегшують обгортання одних елементів в інші. Перш за все, я згадаю, що всі три методи приймають один і той же параметр: або елемент (який може бути заданий HTML-рядком, CSS-селектором, об'єктом jQuery або елементом DOM), або функція, яка повертає елемент.
Метод wrap () обгортає кожен елемент колекції в зазначений елемент:
WrapAll () оберне в один елемент все елементи колекції; це означає, що елементи колекції будуть переміщені в DOM на нове місце; вони будуть зібрані разом з першим елементом в колекції і далі будуть обгорнуті:
У висновку, функція wrapInner обгортає весь вміст кожного елемента колекції зазначеним в параметрі елементом:
висновок
Ну що ж, тепер у вас є більше двадцяти нових методів jQuery, з якими можна погратися в своєму наступному проекті; отримуйте задоволення!
Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
