Данни. В света на jQuery всичко е свързано с битове информация, които са прикачени директно към елементи (а не, да речем, променлива с тежест само върху себе си). Има много начини за запазване на битове данни от „клиентска страна“ (в браузъра, а не в сървъра). Има променливи от всякакъв вид, бисквитки, localStorage, indexDB и кой знае какво друго. Данните се използват, когато тези данни са конкретно свързани с определен елемент.
Подобно на много методи на jQuery, той има и сетер (два параметъра):
$("#thing").data("name", "value");и гетер (един параметър):
$("#thing").data("name"); // "value"Можете да го използвате на всеки обект jQuery. Ако в този обект има няколко елемента, всички те получават тази стойност на данните, когато го използвате като задател. Ако в този обект има множество елементи, когато го използвате като гетер, той ще използва първия елемент.
Един от начините да се мисли за данни е, че елементът е нещо като пространство от имена. Много елементи могат да използват едно и също „име“ на данни, но имат различни стойности.
Има случай на реална употреба в стара демонстрация на CSS-Tricks, Google Maps Slider. В тази демонстрация има списък с местоположения и вградена Google Map. Докато задържите курсора на мишката над местоположенията, картата се премества в центъра на това местоположение. За да направи това, API на картата се нуждае от координати. Има смисъл да имаме тези данни в HTML за тези местоположения, но не е нужно да ги виждаме. Това е идеален случай за използване на data-*атрибути в HTML (ново в HTML5). Тогава елемент от списъка в този списък с местоположения може да бъде подобен на този:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*е просто начин да се каже data- anything . Можете просто да измислите атрибути за данни. Всичко, което искате. В този случай направихме една за географска ширина и друга за географска дължина. Когато събитие при задържане на мишката се задейства върху този елемент от списъка, ние просто използваме jQuery getter за, за .data()да изтръгнем информацията и да я използваме с API.
Така че сега разгледахме данните по два начина, данни, които са както зададени, така и получени от самия JavaScript, и данни, които започват в HTML и се използват от JavaScript. И двете са добре и API е един и същ. Може да помислите да използвате .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") ( ))