Data. Dalam dunia jQuery, ini semua berkaitan dengan maklumat yang dilampirkan secara langsung pada elemen (daripada, katakanlah, pemboleh ubah dengan tanggungjawab hanya pada dirinya sendiri) Ada banyak cara untuk menyimpan sedikit data di "sisi pelanggan" (di penyemak imbas, bukannya pelayan). Terdapat pemboleh ubah dalam bentuk apa pun, kuki, penyimpanan tempatan, indexDB, dan siapa yang tahu apa yang lain. Data digunakan apabila data tersebut secara khusus berkaitan dengan elemen tertentu.
Seperti banyak kaedah jQuery, ia mempunyai setter (dua parameter):
$("#thing").data("name", "value");dan penerima (satu parameter):
$("#thing").data("name"); // "value"Anda boleh menggunakannya di mana-mana objek jQuery. Sekiranya terdapat banyak elemen dalam objek itu, semuanya akan mendapat nilai data apabila anda menggunakannya sebagai setter. Sekiranya terdapat banyak elemen dalam objek tersebut semasa anda menggunakannya sebagai pengambil, ia akan menggunakan elemen pertama.
Salah satu cara untuk memikirkan data adalah bahawa elemennya seperti ruang nama. Banyak elemen dapat menggunakan "nama" data yang sama tetapi mempunyai nilai yang berbeza.
Terdapat kes penggunaan dunia nyata dalam demo CSS-Tricks lama, Slaid Peta Google. Dalam demo itu, terdapat senarai lokasi dan Peta Google yang tersemat. Semasa anda mengarahkan kursor ke lokasi, peta bergerak ke tengah lokasi tersebut. Untuk melakukan ini, API peta memerlukan koordinat. Adalah masuk akal untuk memiliki data tersebut dalam HTML untuk lokasi tersebut, tetapi kami tidak perlu melihatnya. Ini adalah kes penggunaan yang sempurna untuk data-*atribut dalam HTML (baru dalam HTML5). Item senarai dalam senarai lokasi mungkin seperti ini:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*hanyalah kaedah untuk mengatakan data- anything . Anda hanya boleh membentuk atribut data. Apa sahaja yang anda mahu. Dalam kes ini kita membuat satu untuk garis lintang dan yang lain untuk garis bujur. Apabila peristiwa tetikus tetikus menyala pada item senarai itu, kami menggunakan jQuery getter untuk menarik .data()maklumat dan menggunakannya dengan API.
Jadi sekarang kami telah melihat data dengan dua cara, data yang ditetapkan dan diperoleh dari JavaScript itu sendiri, dan data yang dimulai dalam HTML dan digunakan oleh JavaScript. Kedua-duanya baik dan API sama. Anda mungkin berfikir menggunakan .data()sebagai pengambil maklumat di rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Anda boleh menggunakannya juga jika anda suka:
$("#thing").attr("data-geo-lat");The .data()getter merupakan jalan pintas. Dan saya agak menyukainya kerana membuat anda berada dalam pemikiran yang betul.
Namun, penting untuk diperhatikan bahawa penggunaan .data()sebagai penyetel sebenarnya tidak mengubah data-*atribut dalam HTML . Itu adalah lalai yang baik kerana tidak mengubah DOM bermaksud lebih pantas. Sekiranya anda benar-benar perlu mengubah atribut dalam HTML, gunakan .attr()kaedah sebagai setter. Perhatikan juga bahawa .attr()anda perlu memasukkan awalan "data-" yang tidak perlu anda gunakan .data().
$("#thing").attr("data-name", "Chris");Anda mungkin perlu melakukannya supaya anda dapat memastikan bahagian lain dari aplikasi mempunyai akses, atau jika anda melakukan sesuatu seperti menulis pemilih CSS kembali (misalnya (data-something="whatever") ( ))