Date. În lumea jQuery, este vorba despre biți de informații care sunt atașați direct la elemente (mai degrabă decât, să zicem, o variabilă cu sarcina numai la sine). Există o mulțime de modalități de a salva biți de date pe „partea clientului” (în browser, mai degrabă decât în server). Există variabile de orice fel, cookie-uri, localStorage, indexDB și cine știe ce altceva. Datele sunt utilizate atunci când aceste date sunt relevante în mod specific pentru un anumit element.
La fel ca multe metode jQuery, are atât un setter (doi parametri):
$("#thing").data("name", "value");și un getter (un parametru):
$("#thing").data("name"); // "value"Îl puteți folosi pe orice obiect jQuery. Dacă există mai multe elemente în acel obiect, toate obțin acea valoare a datelor atunci când o utilizați ca setter. Dacă există mai multe elemente în acel obiect atunci când îl utilizați ca un getter, acesta va utiliza primul element.
O modalitate de a vă gândi la date este că elementul este cam ca un spațiu de nume. O mulțime de elemente pot utiliza același „nume” de date, dar au valori diferite.
Există un caz de utilizare din lumea reală într-o demonstrație veche CSS-Tricks, Google Maps Slider. În această demonstrație, există o listă de locații și o hartă Google încorporată. Pe măsură ce treceți cursorul peste locații, harta se deplasează spre centrul acelei locații. Pentru a face acest lucru, API-ul hărții are nevoie de coordonate. Este logic să avem aceste date în HTML pentru acele locații, dar nu este nevoie să le vedem. Acesta este un caz de utilizare perfect pentru data-*atributele în HTML (nou în HTML5). Un element de listă din lista respectivă de locații poate fi astfel:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*este doar un mod de a spune data- anything . Puteți doar compune atribute de date. Orice vrei. În acest caz, am făcut una pentru latitudine și una diferită pentru longitudine. Când un eveniment cu mouse-ul se declanșează pe acel element din listă, folosim simplu getter-ul jQuery pentru .data()a scoate informațiile și a le folosi cu API-ul.
Așadar, acum ne-am uitat la date în două moduri, date care sunt setate și obținute din JavaScript în sine și date care încep în HTML și sunt utilizate de JavaScript. Ambele sunt în regulă, iar API-ul este același. S-ar putea să vă gândiți să folosiți .data()ca getter pentru informațiile din rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Îl puteți folosi și în acest fel dacă doriți:
$("#thing").attr("data-geo-lat");.data()Getter este doar o comandă rapidă. Și îmi place cam așa cum te ajută în mentalitatea potrivită.
Cu toate acestea, este important să rețineți că utilizarea .data()ca setter nu modifică de fapt data-*atributul din HTML . Este un bun standard, deoarece nu modificați DOM înseamnă că este mai rapid. Dacă trebuie absolut să schimbați atributul în HTML, utilizați .attr()metoda ca setter. De asemenea, rețineți .attr()că trebuie să includeți prefixul „date-” pe care nu este necesar să îl utilizați .data().
$("#thing").attr("data-name", "Chris");S-ar putea să trebuiască să faceți acest lucru, astfel încât să puteți fi siguri că alte părți ale aplicației au acces sau dacă faceți ceva de genul că scrieți selectoare CSS înapoi (de exemplu (data-something="whatever") ( ))