Деякі приховані особливості jQuery
jQuery не завжди такий, яким здається. Існує багато цікавих штучок, прихованих від першого погляду, і методів, які очікують відкриття, а також потенційних особливостей jQuery API, які ніколи раніше Вами не використовувалися. У цій статті відкривається завіса над деякими неочевидними особливостями jQuery.
1. Розглянемо jQuery ближче!
Що відбувається, коли Ви викликаєте jQuery?
Функція jQuery сама по собі дуже проста:
Під цією оболонкою, функція jQuery просто повертає присвоєний об'єкт jQuery - тобто екземпляр конструктора jQuery.fn.init.
Дуже корисно знати, що кожного разу, коли ми викликаємо jQuery, насправді створюється унікальний об'єкт з набором властивостей. jQuery надає об'єкт, який може бути оброблений як масив. Кожен Ваш елемент (усі разом вони зазвичай називаються "колекцією") має посилання у вигляді числового індексу, як і в масиві. jQuery також надає об'єкту властивість 'length', що схоже на масив. Такий підхід відкриває світ можливостей. Це означає, що ми можемо використовувати деяку функціональність Array.prototype. Метод jQuery 'slice' є добрим прикладом такого використання:
Оригінальний метод 'slice' не турбується про те, що 'this' не є насправді масивом - він працює з тим, що має властивість 'length' та індекси [0], [1], [2] і т.д.
Інші цікаві властивості об'єкта jQuery - '.selector' та '.context'. У більшості випадків вони відображають аргументи, які Ви передаєте у jQuery(…).
Також слід зазначити, що jQuery іноді повертає новий екземпляр об'єкта для подальшої роботи. Якщо Ви викликаєте метод, який змінює колекцію будь-яким чином, наприклад '.parents()', jQuery не будемодифікувати поточний об'єкт. Він просто передасть Вам новий екземпляр:
Усі методи, які призводять до зміни колекції у будь-який спосіб повертають новий екземпляр об'єкта jQuery. Ви можете отримати доступ до старого об'єкта за допомогою функції '.end()' або '.prevObject'.
2. Бутербродне створення елементів
Центральна властивість DOM jQuery – це синтаксис створення елементів. Версія 1.4 має новий спосіб для того, щоб створювати Ваші елементи швидко та коротко:
Ви можете передати другий аргумент функції jQuery, коли створюєте новий елемент — об'єкт, який Ви передаєте, здебільшого діятиме так, начебто Ви його передали методом '.attr(…)'. Однак jQuery встановлює відповідність деяких властивостей своїм власним методам, наприклад, властивість 'click' відповідає методу jQuery 'click' (який прив'язаний до обробки події 'click'), а 'css' відповідає методу jQuery 'css' і т.д.
Щоб перевірити, які властивості відповідають методам jQuery, відкрийте консоль і наберіть 'jQuery.attrFn'.
3. Зробіть введення послідовним
jQuery має метод, який можна використовувати для перетворення введення до послідовного вигляду в рамках однієї або декількох форм. Такі дії корисні, коли відбувається передача даних за допомогою XHR (Ajax). Ця функція присутня в jQuery вже давно, про неї не так часто згадується, і багато розробників її не використовують. Передача всієї форми повністю через Ajax з використанням jQuery не може бути простим процесом:
jQuery також має метод 'serializeArray', який розроблений для використання з множинними формами, та функцію 'param' (у просторі імен jQuery), яка отримує звичайний об'єкт і перетворює його на рядок запиту:
4.Анімуємо все поспіль
Метод jQuery 'animate' - ймовірно найгнуткіший метод jQuery. Його можна використовувати для анімування будь-чого, не тільки властивостей CSS, але і елементів DOM. Приклад того, як можна використовувати 'animate':
Коли Ви задаєте властивість для анімації (наприклад, 'top'), jQuery перевіряє, чи щось анімується зі властивостями стилю ('element.style'), а також перевіряє, чи визначено задану властивість ('top') в 'style' — якщо ні, jQuery просто оновлює 'top' на самому елементі. Приклад:
'top' - це дійсна властивість CSS, і jQuery оновить 'element.style.top'. Але 'foo' не є властивістю CSS, і jQuery просто оновить 'element.foo'.
Ми можемо використовувати описане для наших цілей. Наприклад, Ви хочете анімувати квадрат у просторі зображення. Спочатку визначимо просту конструкцію та метод 'draw', який буде викликатись на кожному кроці анімації:
Ми створили конструктор нашого 'Square' і один з його методів. Створення простору зображення та анімування виконується просто:
Це дуже простий ефект, але він ясно показує можливості.
5. jQuery.ajax повертає об'єкт XHR
Усі функції jQuery Ajax ('jQuery.ajax', 'jQuery.get', 'jQuery.post') повертають об'єкт 'XMLHttpRequest', який можна використовувати для виконання наступних операцій над будь-яким запитом. Наприклад:
Тут ми запитуємо, коли натискається кнопка 'makeRequest'. А при натисканні на кнопку 'cancelRequest' відбувається збір поточного активного запиту.
Також цю особливість можна використовувати для синхронізації запитів:
6. Черга користувача
jQuery має вбудований механізм черги, який використовується всім методів анімації. Черга може бути легко продемонстрована за допомогоюпростий анімації:
Метод 'queue' за допомогою виклику схожий на добре відомий метод 'each'. Ви виконуєте функцію, яка буде викликана для кожного елемента в колекції:
Передача функції методом 'queue' призводить до того, що функція додається до черги 'fx', яка використовується всіма анімаціями jQuery. Таким чином, ця функція не буде викликана доти, доки всі поточні анімації на кожному елементі колекції (у разі нашого прикладу – для всіх посилань) не будуть завершені.
Зазначимо, що ми додали клас 'all-done' у функцію нашого прикладу. Цей клас буде додано лише тоді, коли всі поточні анімації будуть завершені. Також викликається метод 'dequeue'.Це дуже важливо, оскільки дозволяє jQuery продовжувати виконання черги (тобто дана дія повідомляє jQuery про те, що Ви завершили те, що робили). jQuery 1.4 має інший спосіб продовжити виконання черги. Замість виклику методу 'dequeue' можна просто викликати перший аргумент, переданий Вашій функції:
Ця операція робить те саме, хоча вона і значно зручніша у використанні, оскільки може бути викликана будь-де у Вашій функції, навіть у мішанині завершальних дій (що зазвичай призводить до руйнування 'this' ). Звичайно, для версій jQuery до 1.4 вам слід зберігати посилання на 'this', але це може бути дуже стомлюючим процесом.
Для того, щоб додати функцію до черги користувача, просто передайте ім'я Вашої черги як перший аргумент і функцію, як другий аругмент:
Відзначимо також, так як ми не використовуємо чергу 'fx', то ми повинні передати ім'я нашої черги методу 'dequeue', щоб дозволити jQuery продовжувати виконання нашої черги.
7. Простір імен події
Щобдодати простір імен при реєстрації обробника події, просто додайте до імені події суфікс, який буде вказувати на область дії (наприклад, '.fooPlugin'):
Передача назви простору імен методом 'unbind' призведе до відв'язування всіх обробників подій у цьому просторі імен.
Даний урок підготовлений для вас командою сайту.
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.