Отже Ви спробували використовувати jQuery, і він Вам сподобався! Пора перейти на наступний щабель на сходах майстерності. В даному уроці будуть продемонстровані 20 функцій і способів jQuery, про яких Ви може бути раніше не чули.
1. after () / before ()
Іноді потрібно вставити що-небудь в DOM, але у Вас немає ніякої підходящої посилання, щоб зробити вставку за допомогою append () або prepend (). і Ви не хочете додавати зайві елементи або id. Функції after () / before () можуть допомогти в цьому випадку. Вони вставляють елементи в DOM відразу після і безпосередньо перед іншим елементом, причому новий елемент буде мати того ж батька, що і використовується.
Ви можете зробити те ж саме якщо використовуєте в своїй роботі елементи, але потрібно використовувати функції insertAfter () або insertBefore ().
2. change ()
Метод change () є обробником подій, так само як і click () або hover (). Подія change генерується об'єктами текстових полів, полів введення тексту, полями вибору, і відбувається воно при зміні значення цільового елемента на відміну від обробників подій focusOut () або blur (). які викликаються, коли елемент втрачає фокус введення незалежно від того, змінилося значення чи ні.
Подія change () відмінно підходить для перевірки на стороні клієнта. Його краще використовувати замість blur (). так як Вам не потрібно буде повторно перевіряти ті поля, в яких користувач не міняв значення.
3. Контекст
Контекст - це і параметр і властивість в jQuery. При виборі елементів, Ви можете передавати його другим параметром в функцію jQuery. Даний параметр, контекст, в загальному випадку буде елементом DOM, і він обмежує список елементів, які повертаються відповідно до вашим селектором, набором нащадків елемента контексту. Звучить заплутано, але погляньте на приклад:
Як же це може бути корисним? Наприклад в функції обробнику події. Якщо Ви хочете отримати елемент, в якому відбулася подія, то Вам слід передати this в якості контексту:
4. data () / removeData ()
Чи хотілося Вам коли-небудь зберегти деяку інформацію про елемент? Ви можете легко зробити це за допомогою методу data (). Щоб встановити значення Вам потрібно передати два параметри (ключ і значення) або один (об'єкт).
Щоб отримати дані, потрібно викликати метод з відповідним ключем.
Щоб отримати всі дані відповідні елементу, потрібно викликати data без параметрів. Ви отримаєте об'єкт з усіма ключами і значеннями, які ви задавали для елемента.
Якщо Ви хочете видалити пару ключ / значення після того, як Ви додали її до елементу, потрібно викликати метод removeData (). передавши йому правильний ключ.
5. queue () / dequeue ()
Функції queue () і dequeue () працюють з елементом. Черга - це список анімацій, які повинні бути виконані для елемента. За замовчуванням чергу елемента має ім'я 'fx'. Давайте подивимося на приклад:
Отже, що тут відбувається? Функція animateBox ми встановлюємо чергу анімацій. Відзначимо, що останній пункт знову викликає функцію animateBox. таким чином ми постійно повторюємо чергу. Коли відбувається натискання миші на li # start. функція викликається і починається виконання черзі анімацій. Коли ми натискаємо на li # reset. поточна анімація завершується, а потім div зупиняє анімацію. За допомогою jQuery ми встановлюємо чергу під ім'ям 'fx' (пам'ятаєте, чергу за замовчуванням) на порожній масив; в дійсності ми очищаємо чергу. А що відбувається, коли ми натискає li # add. Спочатку ми викликаємо функцію queue елемента div. Дана дія додає функцію в кінець черги, а так як ми не задали ім'я черги як перший параметр, то іспользцется 'fx'. У даній функції ми анімуємо div. а потім викликаємо функцію dequeue () для елемента div. яка удалаяет цю функцію з черги. Черга залишиться активним, але функція в ній не присутня.
6. delay ()
Коли виконується чергу анімацій, Ви можете використовувати метод delay (). щоб зупинити на деякий час анімацію. Час передається в мілісекундах.
7. bind (). unbind (). live (). і die ()
Чи знаєте Ви, що коли додається подія після натискання миші до елемента, наприклад, так:
Ви насправді використовуєте оболонку для методу bind (). Щоб використовувати метод bind (). Вам потрібно передати тип події в якості першого параметра і функцію в якості другого параметра.
Ви також можете призначати одну й ту ж саму функцію кільком подіям в одне і теж час, розділяючи їх пробілами. Так, щоб отримати ефект спливання, Ви можете почати наступним чином:
Ви можете передати ці функції, додаючи третій параметр (на другій позиції):
Рано чи пізно Ви зіткнетеся з ситуацією, коли при вставці елементу в DOM за допомогою процесора подій, обробник подій, який зроблений за допомогою bind (або його оболонки), не працює для вставленого елемента. В цьому випадку Вам потрібно використовувати метод live () (делегувати). Таким чином додається оброблювач події додається відповідному вставленого елементу.
Для видалення обробника подій, створених методом bind (). використовуйте метод unbind (). Якщо йому не передаються ніякі параметри, то він видаляє всі обробники. Ви можете передати йому тип події, і він видалити обробники подій тільки зазначеного типу. Щоб видалити події з потрібного простору імен, додайте цей простір імен. Якщо Ви хочете видалити певну функцію, передайте її ім'я як другий параметр.
Ви можете використовувати методи bind / unbind анонімно. В цьому випадку методи будуть працювати тільки з ім'ям функції.
Якщо Вам треба відв'язати подія з функції, яка викликана самою подією, просто передайте методу unbind () об'єкт event.
Ви не можете використовувати unbind () для події live. Використовуйте метод die (). Без параметрів він видалить всі події live з колекції елемента. Ви можете також передавати йому тип події або тип і функцію.
Якщо Вам потрібен конкретний елемент в наборі, то можна передати індекс елемента методу eq () і отримати один елемент jQuery. Передача негативного індексу виробляє відлік в зворотному порядку від кінця до початку набору.
Ви також може використовувати: eq () в вашому селекторі. Так попередній приклад може бути виконаний так:
При отриманні колекції елементів, jQuery повертає її як об'єкт jQuery. Таким чином у Вас є доступ до всіх методів. Якщо Ви хочете отримати просто елементи DOM, слід використовувати метод get ().
Ви можете задати індекс, щоб отримати тільки один елемент.
10. grep ()
Якщо Ви не знайомі з Unix / Linix, може бути Ви ніколи не чули grep. У терміналі це утиліта для пошуку тексту. Але в jQuery ми використовуємо її для фільтрації масиву елементів. Це не метод колекції jQuery. Ви передаєте масив в якості першого параметра і функцію фільтрації в якості другого параметра. Функція фільтрації також отримує два параметри: елемент з таблиці і його індекс. Потім функція фільтрації виконує обробку і повинна повернути значення true або false. За замовчуванням, всі елементи, для яких повертається true. зберігаються. Ви можете додати третій параметр типу boolean. щоб інвертувати результат і зберігати елементи, для яких повертається значення 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-and в різних ситуаціях, то Ви працюєте з рядками JSON. У цьому випадку функція parseJSON буде корисною для Вас. Ця функція використовує вбудований в браузер парсер JSON, есл іон є (що значно прискорює обробку).
16. proxy ()
Якщо у Вас є функція як властивість об'єкта, і ця функція використовує інша властивість об'єкта, то Ви не можете викликати цю функцію з іншої функції і отримати правильний результат. Давайте подивимося на приклад, щоб розібратися:
Сама по собі, person.meet () виконує alert правильно. Але коли вона викликається обробником події, то виводить "" Привіт! Мене звати undefined ". Відбувається так тому, що функція викликається з іншого контексту. Щоб виправити ситуацію, ми можемо використовувати функцію proxy ().
Перший параметр функції proxy - метод для виконання. Другий параметр - контекст, в якому слід її виконувати. Альтернативно ми можемо передати спочатку передати контекст, а потім рядок з ім'ям методу. Тепер функція виконується правильно.
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. Вони будуть підняті вгору до місця, де зустрічається перший елемент колекції і потім будуть обгорнуті:
HTML перед використання методу wrapAll ()
HTML після використання методу wrapAll ()
Метод wrapInner обертає все всередині кожного елемента колекції в заданий елемент:
HTML до використання методу wrapInner
HTML після використання методу wrapInner
Сподіваюся, що урок був корисний для Вас!
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
Та й блог теж заробив
Заради інтересу - метод "data ();" псує валідність станиці? І куди взагалі зберігається інформація.
Місцями код урізаний, що не є добре і деякі моменти від цього незрозумілі. будь ласка виправте
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!