Дані. У світі jQuery вся справа в бітах інформації, які приєднуються безпосередньо до елементів (а не, скажімо, до змінної, яка покладається лише на неї саму). Існує маса способів збереження бітів даних на «стороні клієнта» (у браузері, а не на сервері). Існують будь-які змінні, файли cookie, localStorage, indexDB, і хто знає, що ще. Дані використовуються, коли ці дані мають особливе відношення до певного елемента.
Як і багато методів jQuery, він має обидва сеттера (два параметри):
$("#thing").data("name", "value");і геттер (один параметр):
$("#thing").data("name"); // "value"Ви можете використовувати його на будь-якому об’єкті jQuery. Якщо в цьому об'єкті є кілька елементів, всі вони отримують це значення даних, коли ви використовуєте його як сеттер. Якщо в цьому об'єкті є кілька елементів, коли ви використовуєте його як геттер, він буде використовувати перший елемент.
Один із способів подумати про дані - це те, що елемент нагадує простір імен. Багато елементів можуть використовувати одне й те саме «ім’я» даних, але мають різні значення.
У старій демонстраційній версії CSS-Tricks, Google Maps Slider, є реальний випадок використання. У цій демонстрації є список місць та вбудована карта Google. Коли ви наводите курсор на місце розташування, карта переміщується до центру цього місця. Для цього API карт потребує координат. Має сенс мати ці дані в HTML для цих місць, але нам не потрібно їх бачити. Це ідеальний варіант використання data-*атрибутів у HTML (новий у HTML5). Тоді елемент списку в цьому списку місць може виглядати так:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*це просто спосіб сказати data- anything . Ви можете просто скласти атрибути даних. Все, що ви хочете. У цьому випадку ми склали одну для широти та іншу для довготи. Коли подія наведення курсора миші спрацьовує на цьому елементі списку, ми просто використовуємо jQuery getter for, .data()щоб вирвати інформацію та використовувати її з API.
Отже, ми розглянули дані двояко, дані, які одночасно встановлені та отримані з самого JavaScript, а також дані, які починаються в HTML і використовуються JavaScript. І те, і інше - однаково. Ви можете подумати про використання .data()як геттера для інформації в rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Ви також можете використовувати його таким чином, якщо хочете:
$("#thing").attr("data-geo-lat");.data()Здобувач це просто ярлик. І мені це якось подобається, оскільки це призводить вас до правильного мислення.
Однак важливо зазначити, що використання .data()в якості сеттера фактично не змінює data-*атрибут у HTML . Це хороший за замовчуванням, оскільки не змінюючи DOM означає, що це швидше. Якщо вам абсолютно потрібно змінити атрибут у HTML, використовуйте .attr()метод як сеттер. Також зверніть увагу, що при використанні .attr()вам потрібно включити префікс “data-”, який вам не потрібно використовувати .data().
$("#thing").attr("data-name", "Chris");Можливо, вам доведеться це зробити, щоб ви могли бути впевнені, що інші частини програми мають доступ, або якщо ви робите щось на зразок написання селекторів CSS проти них (наприклад (data-something="whatever") ( ))