Dane. W świecie jQuery chodzi o bity informacji, które są dołączane bezpośrednio do elementów (a nie, powiedzmy, zmienne, które obciążają tylko siebie). Jest mnóstwo sposobów zapisywania bitów danych po „stronie klienta” (w przeglądarce, a nie na serwerze). Istnieją zmienne dowolnego rodzaju, pliki cookie, localStorage, indexDB i kto wie, co jeszcze. Dane są wykorzystywane, gdy są one szczególnie istotne dla określonego elementu.
Podobnie jak wiele metod jQuery ma zarówno metodę ustawiającą (dwa parametry):
$("#thing").data("name", "value");i getter (jeden parametr):
$("#thing").data("name"); // "value"Możesz go użyć na dowolnym obiekcie jQuery. Jeśli w tym obiekcie znajduje się wiele elementów, wszystkie z nich uzyskują tę wartość danych, gdy używasz go jako ustawiającego. Jeśli w tym obiekcie jest wiele elementów, gdy używasz go jako metody pobierającej, użyje pierwszego elementu.
Jednym ze sposobów myślenia o danych jest to, że element jest czymś w rodzaju przestrzeni nazw. Wiele elementów może używać tej samej „nazwy” danych, ale mieć różne wartości.
Istnieje prawdziwy przykład użycia w starej wersji demonstracyjnej CSS-Tricks, Google Maps Slider. W tym demo znajduje się lista lokalizacji i osadzona mapa Google. Gdy najedziesz kursorem na lokalizacje, mapa przesunie się do środka tej lokalizacji. Aby to zrobić, interfejs API mapy potrzebuje współrzędnych. Sensowne jest posiadanie tych danych w kodzie HTML dla tych lokalizacji, ale nie musimy ich widzieć. To doskonały przypadek użycia data-*atrybutów w HTML (nowość w HTML5). W takim przypadku element listy na liście lokalizacji może wyglądać następująco:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*to tylko sposób na powiedzenie data- anything . Możesz po prostu stworzyć atrybuty danych. Cokolwiek chcesz. W tym przypadku utworzyliśmy jeden dla szerokości geograficznej, a inny dla długości geograficznej. Kiedy zdarzenie najechania myszą jest uruchamiane na tym elemencie listy, po prostu używamy metody pobierania jQuery, .data()aby usunąć informacje i użyć ich z interfejsem API.
Więc teraz przyjrzeliśmy się danym na dwa sposoby: dane, które są zarówno ustawione, jak i pobrane z samego JavaScript, oraz dane, które zaczynają się w HTML i są używane przez JavaScript. Oba są w porządku, a interfejs API jest taki sam. Możesz pomyśleć o użyciu .data()jako metody pobierającej informacje w rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Możesz go również użyć w ten sposób, jeśli chcesz:
$("#thing").attr("data-geo-lat");.data()Getter jest tylko skrót. I trochę mi się to podoba, ponieważ wprowadza cię we właściwy sposób myślenia.
Należy jednak zauważyć, że użycie .data()jako setera w rzeczywistości nie zmienia data-*atrybutu w kodzie HTML . To dobre ustawienie domyślne, ponieważ brak zmiany DOM oznacza, że jest szybszy. Jeśli absolutnie musisz zmienić atrybut w kodzie HTML, użyj .attr()metody jako ustawiającej. Zwróć również uwagę, .attr()że używanie musi zawierać przedrostek „data-”, którego nie potrzebujesz .data().
$("#thing").attr("data-name", "Chris");Być może będziesz musiał to zrobić, aby mieć pewność, że inne części aplikacji mają dostęp lub jeśli robisz coś takiego, jak pisanie selektorów CSS przeciwko nim (np. (data-something="whatever") ( ))