Dati. JQuery pasaulē viss ir saistīts ar informācijas daļām, kas ir tieši piesaistītas elementiem (nevis, piemēram, mainīgajam, kura pienākums ir tikai pats sev). Ir daudz veidu, kā saglabāt datu bitu “klienta pusē” (pārlūkprogrammā, nevis serverī). Ir jebkura veida mainīgie, sīkfaili, localStorage, indexDB un kas zina, kas cits. Dati tiek izmantoti, ja šie dati ir īpaši saistīti ar konkrētu elementu.
Tāpat kā daudzām jQuery metodēm, tam ir abi iestatītāji (divi parametri):
$("#thing").data("name", "value");un getter (viens parametrs):
$("#thing").data("name"); // "value"To var izmantot jebkurā jQuery objektā. Ja šajā objektā ir vairāki elementi, visi no tiem iegūst šo datu vērtību, kad to izmantojat kā iestatītāju. Ja šajā objektā ir vairāki elementi, kad to izmantojat kā getter, tas izmantos pirmo elementu.
Viens no veidiem, kā domāt par datiem, ir tas, ka elements ir līdzīgs vārda vietai. Daudzos elementos var izmantot tos pašus datus “nosaukums”, bet tiem ir atšķirīgas vērtības.
Vecajā CSS-Tricks demonstrācijā Google Maps Slider ir reāls lietojums. Šajā demonstrācijā ir atrašanās vietu saraksts un iegulta Google karte. Virzot kursoru virs atrašanās vietām, karte pārvietojas uz šīs vietas centru. Lai to izdarītu, kartes API ir nepieciešamas koordinātas. Ir loģiski, ka šie dati ir HTML vietnēs, taču mums tie nav jāredz. Tas ir ideāls data-*atribūtu HTML lietojums (jauns HTML5). Sarakstu vienums šajā atrašanās vietu sarakstā var būt šāds:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*ir tikai veids, kā pateikt data- anything . Jūs varat vienkārši izveidot datu atribūtus. Viss, ko vēlaties. Šajā gadījumā mēs izveidojām vienu platuma un citu garuma grādiem. Kad peles kursora kursors aktivizē šo saraksta vienumu, mēs vienkārši izmantojam jQuery getter, .data()lai izjauktu informāciju un izmantotu to kopā ar API.
Tāpēc tagad mēs esam apskatījuši datus divos veidos: dati, kas ir iestatīti un iegūti no paša JavaScript, un dati, kas sākas HTML un kurus izmanto JavaScript. Abi ir labi, un API ir vienāda. Jūs varētu domāt, izmantojot .data()rel = "jQuery"> informāciju kā getter$("#thing").attr("rel"); // or any other attribute
Jūs varat to izmantot arī tādā veidā, ja vēlaties:
$("#thing").attr("data-geo-lat");.data()Vaislas ir tikai saīsne. Un man tas patīk, jo tas ļauj jums pareizi domāt.
Tomēr ir svarīgi atzīmēt, ka izmantošana .data()par iestatītāju faktiski nemaina data-*HTML atribūtu . Tas ir labs noklusējums, jo nemainot DOM nozīmē, ka tas ir ātrāks. Ja jums noteikti ir jāmaina HTML atribūts, izmantojiet .attr()metodi kā iestatītāju. Ņemiet vērā arī to, ka .attr()jums jāpievieno prefikss “data-”, kas jums nav jāizmanto .data().
$("#thing").attr("data-name", "Chris");Jums tas var būt jādara, lai jūs varētu būt pārliecināts, ka citām lietojumprogrammas daļām ir piekļuve, vai arī, ja jūs darāt kaut ko, piemēram, rakstāt CSS atlasītājus, tos atkārtojat (piem. (data-something="whatever") ( ))