Метод data в jQuery

Метод data в jQuery дає нам можливість пов'язати довільні дані з будь-яким об'єктом документа або JavaScript, що дозволяє зробити ваш код більш коротким та читаним. Починаючи з версії jQuery 1.4.3, з'явилася можливість використовувати цей метод для об'єктів JavaScript, а також відстежувати зміни цих даних.

Основи

Почнемо з того, що можна викликати метод data для jQuery об'єкта, а також використовувати функцію $.data() безпосередньо.

Функція data – це низькорівнева реалізація, яка насправді використовується як джерело http://yapro.ru. Метод об'єкта jQuery набагато зручніший, він також дозволяє включати себе як ланцюжок викликів.

Також, зверніть увагу, що як перший параметр у функцію $.data вам необхідно передавати DOM-елемент, а не об'єкт jQuery.

Метод об'єкта вимагає двох параметрів – ключ та значення. Ключ – рядкова константа, а значення – будь-яка структура даних, включаючи функції масиви та об'єкти. Існує альтернативний синтаксис, в якому можна передавати об'єкт як один параметр:

Тепер, якщо вам необхідно отримати збережені дані, ви можете викликати функцію data, передавши їй ключ як параметр:

Доступ до цих даних відкритий у будь-якому місці скрипту. Ви отримуватимете збережені дані, доки існує елемент, що отримується за заданим селектором.

У jQuery 1.4.3 також доступні HTML5-дані, що зберігаються в атрибутах. Це сайт джерело http://yapro.ru Tue Nov 16 2010 10:26:08 GMT+0300 означає, що якщо у вас є елемент, оголошений таким чином:

У цьому випадку ви можете отримати дані з атрибуту data-internal-id, викликавши метод $("#img1").data("internal-id"), що безперечно зручнопри AJAX-запитах.

Використання методу data для JavaScript-об'єктів

Можливо, ви будете здивовані, але метод data також можна використовувати для звичайних об'єктів JavaScript. Ця функціональність офіційно з'явилася у jQuery 1.4.3.

Наведений приклад насправді створює властивість city для заданого об'єкта. Чому б у такому разі не написати просто myObj.city="Springfield"? А відмінність у тому, що метод data додає об'єкту кілька корисних подій, що спрощують роботу з цим об'єктом. Наприклад:

У наведеному прикладі ми використовуємо метод data, щоб створити найпростіший API, за допомогою якого ми можемо оновлювати елемент.

Існує ще дві події, які можуть бути використані для об'єкта javaScript:

• getData - спрацьовує перед читанням даних. Ви можете використовувати його для попередньої обробки отриманих даних. Наприклад, для перерахунку значення.
• changeData – спрацьовує коли дані встановлюються чи змінюються. Ця подія використовується у плагіні jQuery datalink. З його допомогою можна пов'язати дані форми з об'єктом JavaScript і працювати з полями форми як із властивостями об'єкта.

За лаштунками

jQuery створює порожній об'єкт (для цікавих, він називається $.cache), який і сайт джерело http://yapro.ru . Кожному елементу з DOM, який використовується з методом data, присвоюється унікальний ідентифікатор, який є ключем для доступу до даних в об'єкті $.cache.

jQuery зберігає в цьому кеші не тільки дані користувача, туди потрапляють також внутрішні дані, обробники подій, які ви навішуєте за допомогою функцій live(), bind() і delegate().Використання центрального сховища робить jQuery більш надійним.

Висновок

Метод data – це лише одна з численних можливостей jQuery, яка робить життя веб-розробників простішим. У поєднанні з іншими можливостями бібліотеки вона доповнює міцну основу, на яку ми можемо покластися.

---