Δεδομένα. Στον κόσμο του jQuery, όλα αφορούν κομμάτια πληροφοριών που συνδέονται άμεσα με στοιχεία (και όχι, για παράδειγμα, μια μεταβλητή με ευθύνη μόνο για τον εαυτό της). Υπάρχουν πολλοί τρόποι για να αποθηκεύσετε κομμάτια δεδομένων στην «πλευρά του πελάτη» (στο πρόγραμμα περιήγησης και όχι στο διακομιστή). Υπάρχουν μεταβλητές οποιουδήποτε είδους, cookie, localStorage, indexDB και ποιος ξέρει τι άλλο. Τα δεδομένα χρησιμοποιούνται όταν αυτά τα δεδομένα σχετίζονται ειδικά με ένα συγκεκριμένο στοιχείο.
Όπως πολλές μέθοδοι jQuery, έχει και τους δύο ρυθμιστές (δύο παραμέτρους):
$("#thing").data("name", "value");και ένα getter (μία παράμετρος):
$("#thing").data("name"); // "value"Μπορείτε να το χρησιμοποιήσετε σε οποιοδήποτε αντικείμενο jQuery. Εάν υπάρχουν πολλά στοιχεία σε αυτό το αντικείμενο, όλα αυτά λαμβάνουν αυτήν την τιμή δεδομένων όταν το χρησιμοποιείτε ως ρυθμιστής. Εάν υπάρχουν πολλά στοιχεία σε αυτό το αντικείμενο όταν το χρησιμοποιείτε ως getter, θα χρησιμοποιήσει το πρώτο στοιχείο.
Ένας τρόπος πιθανής σκέψης δεδομένων είναι ότι το στοιχείο μοιάζει με χώρο ονομάτων. Πολλά στοιχεία μπορούν να χρησιμοποιούν τα ίδια δεδομένα «όνομα» αλλά έχουν διαφορετικές τιμές.
Υπάρχει μια πραγματική περίπτωση χρήσης σε μια παλιά επίδειξη CSS-Tricks, το Google Maps Slider. Σε αυτήν την επίδειξη, υπάρχει μια λίστα τοποθεσιών και ένας ενσωματωμένος χάρτης Google. Καθώς τοποθετείτε το δείκτη του ποντικιού πάνω από τις τοποθεσίες, ο χάρτης μετακινείται στο κέντρο της τοποθεσίας. Για να γίνει αυτό, το 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 selectors να τους επαναφέρει (π.χ. (data-something="whatever") ( ))