Data. Di dunia jQuery, ini semua tentang bit informasi yang dilampirkan langsung ke elemen (daripada, katakanlah, variabel dengan tanggung jawab hanya untuk dirinya sendiri). Ada banyak cara untuk menyimpan bit data di "sisi klien" (di browser, bukan di server). Ada variabel dalam bentuk apa pun, cookie, penyimpanan lokal, indexDB, dan siapa yang tahu apa lagi. Data digunakan ketika data tersebut secara khusus relevan dengan elemen tertentu.
Seperti banyak metode jQuery, ia memiliki penyetel (dua parameter):
$("#thing").data("name", "value");dan pengambil (satu parameter):
$("#thing").data("name"); // "value"Anda dapat menggunakannya di objek jQuery apa pun. Jika ada beberapa elemen dalam objek itu, semuanya mendapatkan nilai data itu saat Anda menggunakannya sebagai penyetel. Jika ada beberapa elemen dalam objek itu saat Anda menggunakannya sebagai pengambil, itu akan menggunakan elemen pertama.
Salah satu cara untuk memikirkan data adalah bahwa elemennya seperti namespace. Banyak elemen dapat menggunakan "nama" data yang sama tetapi memiliki nilai yang berbeda.
Ada kasus penggunaan dunia nyata dalam demo CSS-Tricks lama, Google Maps Slider. Dalam demo itu, ada daftar lokasi dan Google Map yang disematkan. Saat Anda mengarahkan kursor ke atas lokasi, peta bergerak ke tengah lokasi itu. Untuk melakukan ini, API peta membutuhkan koordinat. Masuk akal untuk memiliki data tersebut dalam HTML untuk lokasi tersebut, tetapi kita tidak perlu melihatnya. Itu kasus penggunaan yang sempurna untuk data-*atribut di HTML (baru di HTML5). Item daftar dalam daftar lokasi itu mungkin seperti ini:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*hanyalah cara untuk mengatakannya data- anything . Anda tinggal membuat atribut data. Apa pun yang Anda inginkan. Dalam hal ini kami membuat satu untuk garis lintang dan satu lagi untuk garis bujur. Saat peristiwa mouse hover menyala pada item daftar itu, kita cukup menggunakan getter jQuery for .data()untuk menarik informasi dan menggunakannya dengan API.
Jadi sekarang kita telah melihat data dalam dua cara, data yang ditetapkan dan didapat dari JavaScript itu sendiri, dan data yang dimulai di HTML dan digunakan oleh JavaScript. Keduanya baik-baik saja dan API-nya sama. Anda mungkin berpikir menggunakan .data()sebagai pengambil informasi di rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Anda juga dapat menggunakannya dengan cara itu jika Anda suka:
$("#thing").attr("data-geo-lat");The .data()pengambil hanya jalan pintas. Dan saya menyukainya karena itu membuat Anda memiliki pola pikir yang benar.
Namun, penting untuk dicatat bahwa menggunakan .data()sebagai penyetel tidak benar-benar mengubah data-*atribut di HTML . Itu default yang bagus karena tidak mengubah DOM berarti lebih cepat. Jika Anda benar-benar perlu mengubah atribut di HTML, gunakan .attr()metode sebagai penyetel. Perhatikan juga penggunaan .attr()Anda perlu menyertakan awalan "data-" yang tidak perlu Anda gunakan .data().
$("#thing").attr("data-name", "Chris");Anda mungkin perlu melakukannya agar Anda dapat yakin bagian lain dari aplikasi memiliki akses, atau jika Anda melakukan sesuatu seperti menulis pemilih CSS lagi (mis. (data-something="whatever") ( ))