Gegevens. In de wereld van jQuery gaat het allemaal om stukjes informatie die rechtstreeks aan elementen zijn gekoppeld (in plaats van bijvoorbeeld een variabele met alleen de verantwoordelijkheid voor zichzelf). Er zijn talloze manieren om gegevensbits aan de "clientzijde" (in de browser, in plaats van op de server) op te slaan. Er zijn variabelen van welke soort dan ook, cookies, localStorage, indexDB en wie weet wat al het andere. Gegevens worden gebruikt wanneer die gegevens specifiek relevant zijn voor een specifiek element.
Zoals veel jQuery-methoden, heeft het zowel een setter (twee parameters):
$("#thing").data("name", "value");en een getter (één parameter):
$("#thing").data("name"); // "value"U kunt het op elk jQuery-object gebruiken. Als er meerdere elementen in dat object zitten, krijgen ze allemaal die gegevenswaarde wanneer u deze als setter gebruikt. Als er meerdere elementen in dat object zitten wanneer u het als een getter gebruikt, zal het het eerste element gebruiken.
Een manier om mogelijk aan gegevens te denken, is dat het element een soort naamruimte is. Veel elementen kunnen dezelfde gegevens "naam" gebruiken, maar hebben verschillende waarden.
Er is een real-world use-case in een oude CSS-Tricks-demo, de Google Maps Slider. In die demo is er een lijst met locaties en een ingesloten Google Map. Terwijl u over de locaties beweegt, wordt de kaart verplaatst naar het midden van die locatie. Om dit te kunnen doen, heeft de kaart-API coördinaten nodig. Het is logisch om die gegevens in de HTML voor die locaties te hebben, maar we hoeven deze niet te zien. Dat is een perfecte use case voor data-*attributen in HTML (nieuw in HTML5). Een lijstitem in die lijst met locaties kan er dan als volgt uitzien:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*is gewoon een manier om te zeggen data- anything . U kunt gewoon gegevensattributen verzinnen. Alles wat je wilt. In dit geval hebben we er een gemaakt voor de breedtegraad en een andere voor de lengtegraad. Wanneer een mouse-hover-gebeurtenis op dat lijstitem wordt geactiveerd, gebruiken we eenvoudig de jQuery-getter om .data()de informatie af te rukken en te gebruiken met de API.
We hebben nu dus op twee manieren naar gegevens gekeken: gegevens die zowel zijn ingesteld als verkregen uit JavaScript zelf, en gegevens die beginnen in de HTML en worden gebruikt door JavaScript. Beide zijn prima en de API is hetzelfde. Je zou kunnen denken .data()om de informatie in rel = "jQuery"> als een getter te gebruiken$("#thing").attr("rel"); // or any other attribute
U kunt het ook op die manier gebruiken als u houdt van:
$("#thing").attr("data-geo-lat");De .data()getter is slechts een kortere weg. En ik vind het een beetje leuk omdat het je in de juiste mindset brengt.
Het is echter belangrijk op te merken dat het gebruik .data()als setter het data-*attribuut in de HTML niet echt verandert . Dat is een goede standaard, want het niet wijzigen van de DOM betekent dat het sneller is. Als je het attribuut in de HTML absoluut moet wijzigen, gebruik dan de .attr()methode als een setter. Merk ook op dat .attr()u het voorvoegsel "data-" moet gebruiken dat u niet nodig hebt .data().
$("#thing").attr("data-name", "Chris");Mogelijk moet u dat doen om er zeker van te zijn dat andere delen van de applicatie toegang hebben, of als u iets doet zoals het schrijven van CSS-selectors tegen hen (bijv. (data-something="whatever") ( ))