Jauh di masa XHTML/HTML4, pengembang hanya memiliki beberapa opsi yang dapat mereka gunakan untuk menyimpan data terkait DOM secara sewenang-wenang. Anda dapat menciptakan atribut Anda sendiri, namun hal ini berisiko - kode Anda tidak akan valid, browser mungkin mengabaikan data Anda, dan hal ini dapat menimbulkan masalah jika namanya cocok dengan atribut HTML standar.

Oleh karena itu, sebagian besar pengembang tetap menggunakan atribut class atau rel karena itulah satu-satunya cara yang masuk akal untuk menyimpan baris tambahan. Misalnya, kita membuat widget untuk menampilkan pesan seperti timeline pesan Twitter. Idealnya, JavaScript harus dapat dikonfigurasi tanpa harus menulis ulang kodenya, jadi kita mendefinisikan ID pengguna di atribut class, seperti ini:

Kode JavaScript kita akan mencari elemen dengan ID msglist . Dengan menggunakan skrip, kami akan mencari kelas yang dimulai dengan user_ , dan “bob” dalam kasus kami akan menjadi ID pengguna, dan kami akan menampilkan semua pesan dari pengguna tersebut.

Katakanlah kita juga ingin menetapkan jumlah maksimum pesan, dan melewatkan pesan yang lebih lama dari enam bulan (180 hari):

Atribut kelas kita menjadi berantakan dengan sangat cepat - lebih mudah untuk membuat kesalahan, dan penguraian string dalam JavaScript menjadi semakin sulit.

Atribut Data HTML5

Untungnya, HTML5 memperkenalkan kemampuan untuk menggunakan atribut khusus. Anda dapat menggunakan nama huruf kecil apa pun yang diawali dengan data- , misalnya:

Atribut data khusus:

• ini adalah string - Anda dapat menyimpan informasi apa pun di dalamnya yang dapat direpresentasikan atau dikodekan sebagai string, seperti JSON. Type casting harus dilakukan menggunakan JavaScript
• harus digunakan jika tidak ada elemen atau atribut HTML5 yang sesuai
• merujuk hanya ke halaman. Tidak seperti mikroformat, format ini harus diabaikan oleh sistem eksternal seperti mesin pencari dan crawler

Contoh Pemrosesan JavaScript #1: getAttribute dan setAttribute

Semua browser memungkinkan Anda mendapatkan dan mengubah atribut data menggunakan metode getAttribute dan setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("ukuran-daftar-data"); msglist.setAttribute("ukuran-daftar data", +tampilan+3);

Ini berfungsi, tetapi sebaiknya hanya digunakan untuk menjaga kompatibilitas dengan browser lama.

Contoh No. 2 pemrosesan dalam JavaScript: metode data() dari perpustakaan jQuery

Pada jQuery 1.4.3, metode data() menangani atribut data HTML5. Anda tidak perlu menentukan awalan data- secara eksplisit, sehingga kode seperti ini akan berfungsi:

Var msglist = $("#msglist"); var show = msglist.data("ukuran daftar"); msglist.data("ukuran daftar", tampilkan+3);

Namun perlu diketahui bahwa jQuery mencoba mengonversi nilai atribut tersebut ke tipe yang sesuai (boolean, angka, objek, array, atau null) dan akan memengaruhi DOM. Tidak seperti setAttribute , metode data() tidak akan secara fisik menggantikan atribut data-list-size - jika Anda memeriksa nilainya di luar jQuery - nilainya akan tetap 5.

Contoh No. 3 pemrosesan JavaScript: API untuk bekerja dengan kumpulan data

Terakhir, kami memiliki API untuk bekerja dengan kumpulan data HTML5 yang mengembalikan objek DOMStringMap. Penting untuk diingat bahwa atribut data dipetakan ke objek tanpa awalan data-, tanda hubung dihapus dari nama, dan nama itu sendiri diubah menjadi camelCase, misalnya:

Nama atribut	Nama API kumpulan data
pengguna data	pengguna
data-maxage	maksimal
ukuran daftar data	daftarUkuran

Kode baru kami:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +tampilkan+3;

API ini didukung oleh semua browser modern, tetapi tidak pada IE10 dan yang lebih rendah. Ada solusi untuk browser ini, tetapi mungkin lebih praktis menggunakan jQuery jika Anda menulis untuk browser lama.

22 jawaban

Kualifikasi

JavaScript hanya memiliki satu tipe data yang dapat menampung banyak nilai: Objek. Array adalah bentuk objek khusus.

(Biasa) Benda terlihat seperti

(kunci: nilai, kunci: nilai, ...)

Array mempunyai bentuk

Baik array maupun objek menampilkan struktur kunci -> nilai. Kunci dalam array harus berupa numerik, sedangkan string apa pun dapat digunakan sebagai kunci dalam objek. Pasangan kunci-nilai juga disebut "properti".

Properti dapat diakses baik menggunakan notasi titik

Nilai konstanta = obj.someProperty;

atau notasi jika nama properti bukan nama pengidentifikasi JavaScript yang valid, atau nama adalah nilai variabel:

// spasi bukan karakter yang valid dalam nama pengenal const value = obj["some Property"]; // nama properti sebagai variabel const name = "some Property"; nilai const = objek;

Oleh karena itu, elemen array hanya dapat diakses menggunakan tanda kurung:

Nilai konstanta = arr; // arr.5 akan menjadi kesalahan sintaksis // nama properti/indeks sebagai variabel const x = 5; nilai konstan = arr[x];

Tunggu... bagaimana dengan JSON?

JSON adalah representasi data secara tekstual, seperti XML, YAML, CSV, dan lainnya. Untuk bekerja dengan data tersebut, Anda harus terlebih dahulu mengonversinya ke tipe data JavaScript, yaitu array dan objek (dan seperti yang dijelaskan). Bagaimana cara mengurai JSON dijelaskan dalam pertanyaan Parse JSON di JavaScript? .

Bahan Bacaan Tambahan

Cara mengakses array dan objek adalah pengetahuan dasar JavaScript, oleh karena itu disarankan untuk membaca Panduan JavaScript MDN, terutama bagiannya

Mengakses Struktur Data Bersarang

Struktur data bersarang adalah array atau objek yang berhubungan dengan array atau objek lain, mis. nilainya adalah array atau objek. Struktur seperti itu dapat dicapai dengan menerapkan titik atau tanda kurung secara berurutan.

Berikut ini contohnya:

Const data = ( kode: 42, item: [( id: 1, nama: "foo" ), ( id: 2, nama: "bar" )] );

Katakanlah kita ingin mengakses nama elemen kedua.

Inilah cara kita melakukannya langkah demi langkah:

Seperti yang bisa kita lihat, data adalah sebuah objek, jadi kita bisa mengakses propertinya menggunakan notasi titik. Properti item diakses sebagai berikut:

Data.item

Nilainya adalah array, untuk mengakses elemen kedua kita harus menggunakan notasi tanda kurung:

Data.item

Nilai ini adalah sebuah objek, dan kita kembali menggunakan notasi titik untuk mengakses properti nama. Oleh karena itu kita berakhir dengan:

Const nama_item = data.item.nama;

Alternatifnya, kita bisa menggunakan notasi untuk salah satu properti, terutama jika namanya mengandung karakter yang membuatnya tidak valid untuk penggunaan notasi titik:

Const item_name = data["item"]["nama"];

Saya mencoba mengakses properti tetapi tidak terdefinisi kembali?

Dalam kebanyakan kasus, ketika Anda mendapatkan undefinisi , objek/array tidak memiliki properti dengan nama itu.

Const foo = (batang: (baz: 42)); konsol.log(foo.baz); // belum diartikan

Sebagai alternatif untuk...in dengan hasOwnProperty, Anda dapat menggunakan Object.keys untuk mendapatkan array nama properti:

Object.keys(data).forEach(function(prop) ( // `prop` adalah nama properti // `data` adalah nilai properti ));

Array

Untuk mengulangi semua elemen array data.items, kita menggunakan perulangan for:

For(misalkan i = 0, l = data.items.length; i< l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`. }

Dimungkinkan juga untuk menggunakan for...in untuk mengulangi array, tetapi ada alasan mengapa hal ini harus dihindari: Mengapa "for (elemen var dalam daftar)" dengan array dianggap praktik buruk dalam JavaScript? .

Dengan meningkatnya dukungan browser untuk ECMAScript 5, metode array forEach menjadi alternatif yang menarik:

Data.items.forEach(function(value, index, array) ( // Callback dijalankan untuk setiap elemen dalam array. // `value` adalah elemen itu sendiri (setara dengan `array`) // `index` akan menjadi indeks elemen dalam array // `array` adalah referensi ke array itu sendiri (yaitu `data.items` dalam hal ini) ));

Di lingkungan yang mendukung ES2015 (ES6), Anda juga dapat menggunakan perulangan for...of, yang tidak hanya berfungsi untuk array, namun juga untuk iterable apa pun:

For (const item of data.items) ( // `item` adalah elemen array, **bukan** indeks )

Dalam setiap iterasi, for...of secara langsung memberi kita elemen iterasi berikutnya, tidak ada "indeks" untuk diakses atau digunakan.

Apa yang harus saya lakukan jika “kedalaman” struktur data tidak saya ketahui?

Selain kunci yang tidak diketahui, "kedalaman" struktur data (misalnya berapa banyak objek yang disarangkan) yang dimilikinya mungkin juga tidak diketahui. Cara mengakses properti bertingkat dalam biasanya bergantung pada struktur data sebenarnya.

Namun jika struktur data mengandung pola berulang, mis. Representasi pohon biner, solusinya biasanya melibatkan pengaksesan setiap level struktur data secara rekursif.

Berikut adalah contoh untuk mendapatkan simpul daun pertama dari pohon biner:

Fungsi getLeaf(node) ( if (node.leftChild) ( return getLeaf(node.leftChild); // x > 0)) // false, karena 3^2 lebih besar dari 5 console.log(arr.every(x = > Matematika.pow(x, 2)< 5)) // true, because 2 is even (the remainder from dividing by 2 is 0) console.log(arr.some(x =>x % 2 === 0)) // salah, karena tidak ada satu pun elemen yang sama dengan 5 console.log(arr.some(x => x === 5))

Array.prototype.find() dan Array.prototype.filter()

Metode find() mengembalikan elemen pertama yang memenuhi fungsi panggilan balik yang disediakan. Metode filter() mengembalikan array berisi semua elemen yang dipenuhi oleh fungsi panggilan balik yang disediakan.

Const arr = // 2, karena 2^2 !== 2 console.log(arr.find(x => x !== Math.pow(x, 2))) // 1, karena merupakan elemen pertama console .log(arr.find(x => true)) // tidak terdefinisi, karena tidak ada elemen yang sama dengan 7 console.log(arr.find(x => x === 7)) // , karena elemen ini lebih besar dari 1 console.log(arr.filter(x => x > 1)) // , karena fungsinya mengembalikan nilai true untuk semua elemen console.log(arr.filter(x => true)) // , karena tidak ada satu pun elemen tidak sama dengan 6 atau 7 console.log(arr.filter(x => x === 6 || x === 7))

Array.prototipe.peta()

Metode map() mengembalikan array dengan hasil pemanggilan fungsi callback yang disediakan pada elemen array.

Const arr = console.log(arr.map(x => x + 1)) // console.log(arr.map(x => String.fromCharCode(96 + x))) // ["a", " b", "c"] console.log(arr.map(x => x)) // (tanpa operasi) console.log(arr.map(x => Math.pow(x, 2))) / / console.log(arr.map(String)) // ["1", "2", "3"]

Array.prototipe.reduce()

Metode pengurangan() mengurangi array menjadi satu nilai dengan memanggil fungsi panggilan balik yang disediakan dengan dua elemen.

Const arr = // Jumlah elemen array. console.log(arr.reduce((a, b) => a + b)) // 6 // Angka terbesar dalam array. konsol.log(arr.reduce((a, b) => a > b ? a: b)) // 3

Metode pengurangan() mengambil parameter opsional kedua, yang merupakan nilai awal. Ini berguna ketika array yang Anda panggil pengurangan() mungkin memiliki nol atau satu elemen. Misalnya, jika kita ingin membuat fungsi sum() yang menggunakan array sebagai argumen dan mengembalikan jumlah semua elemen, kita dapat menuliskannya seperti ini:

Jumlah konstan = arr => arr.reduce((a, b) => a + b, 0) console.log(sum()) // 0 console.log(sum()) // 4 console.log(sum ()) // 7

Pertanyaan ini sudah cukup lama, begitu pula pembaruan modern. Dengan hadirnya ES2015, terdapat alternatif untuk memperoleh data yang dibutuhkan. Saat ini ada fitur yang disebut penghancuran objek untuk mengakses objek bersarang.

const data = ( kode: 42, item: [( id: 1, nama: "foo" ), ( id: 2, nama: "bar" )] ); const ( item: [, ( nama: nama kedua )] ) = data; console.log(Namakedua);

Contoh di atas membuat variabel bernama secondName dari nama kunci dari array yang disebut item, yang satu-satunya mengatakan melewatkan objek pertama dalam array.

Khususnya, ini mungkin terlalu besar untuk contoh ini karena array akses sederhana lebih mudah dibaca, namun akan berguna ketika memecah objek secara umum.

Ini adalah pengenalan yang sangat singkat untuk kasus penggunaan spesifik Anda, destrukturisasi mungkin merupakan sintaksis yang aneh untuk membiasakan diri. Saya menyarankan Anda membaca dokumentasi Penugasan Penghancuran Mozilla untuk mempelajari lebih lanjut.

Untuk mengakses atribut bertingkat, Anda harus menentukan namanya dan kemudian mencari objeknya.

Jika Anda sudah mengetahui jalur pastinya, Anda dapat mengkodekannya secara keras di skrip Anda seperti ini:

Data["item"]["nama"]

ini juga berfungsi -

Data.item.nama data["item"].nama data.item["nama"]

Ketika Anda tidak mengetahui nama pastinya sebelumnya, atau pengguna memberi Anda nama tersebut. Maka diperlukan pencarian dinamis melalui struktur data. Beberapa orang menyarankan bahwa pencarian dapat dilakukan menggunakan perulangan for, tetapi ada cara yang sangat sederhana untuk melintasi jalur menggunakan Array.reduce.

Const data = ( kode: 42, item: [( id: 1, nama: "foo" ), ( id: 2, nama: "bar" )] ) const path = [ "item", "1", "nama "] biarkan hasil = path.reduce((a,v) => a[v], data)

Path adalah cara untuk mengatakan: pertama ambil objek dengan key items , yang kebetulan berupa array. Kemudian ambil 1 elemen -st (0 array indeks). Terakhir, ambil objek dengan kunci nama di elemen array ini, yaitu string bar .

Jika Anda memiliki jalur yang sangat panjang, Anda bahkan dapat menggunakan String.split untuk mempermudah semuanya -

"item.1.nama".split(".").reduce((a,v) => a[v], data)

Ini hanyalah JavaScript biasa, tanpa menggunakan perpustakaan pihak ketiga seperti jQuery atau lodash.

Menggunakan JSONPath akan menjadi salah satu solusi paling fleksibel jika Anda ingin menyertakan perpustakaan: https://github.com/s3u/JSONPath (node ​​​​dan browser)

Untuk kasus penggunaan Anda, jalur json adalah:

$..item.nama

Var secondName = jsonPath.eval(data, "$..items.name");

Var ourStorage = ( "meja": ( "laci": "stapler" ), "kabinet": ( "laci atas": ( "folder1": "file", "folder2": "rahasia" ), "laci bawah ": "soda" ) ); ourStorage.cabinet["laci atas"].folder2; // Keluaran -> "rahasia"

//parent.subParent.subsubParent["hampir sampai"]["properti akhir"]

Pada dasarnya, gunakan titik di antara setiap anak yang melebar di bawahnya, dan bila Anda memiliki nama objek yang panjangnya dua baris, Anda harus menggunakan notasi ["Nama objek"] Jika tidak, satu titik saja sudah cukup;

Mari kita tambahkan bahwa akses ke array bersarang akan terjadi seperti ini:

Var ourPets = [ ( animalType: "cat", nama: [ "Meowzer", "Fluffy", "Kit-Cat" ] ), ( animalType: "dog", nama: [ "Spot", "Bowser", "Frankie " " ] ) ]; namaHewan Peliharaan kami; // Menampilkan "Fluffy" ourPets.names; // Keluaran "Titik"

Dokumen berguna lainnya yang menjelaskan situasi di atas: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation

Mengakses properti menggunakan dot berjalan: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation

Jika Anda mencari satu atau lebih objek yang memenuhi kriteria tertentu, Anda memiliki beberapa opsi menggunakan query-js

//akan mengembalikan semua elemen dengan id lebih besar dari 1 data.items.where(function(e)(return e.id > 1;)); //akan mengembalikan elemen pertama dengan id lebih besar dari 1 data.items.first(function(e)(return e.id > 1;)); //akan mengembalikan elemen pertama dengan id lebih besar dari 1 //atau argumen kedua jika tidak ditemukan data.items.first(function(e)(return e.id > 1;),(id:-1,name :""));

Ada juga singleOrDefault dan singleOrDefault yang berfungsi sama seperti firstOrDefault. Satu-satunya perbedaan adalah mereka akan melempar jika ditemukan lebih dari satu kecocokan.

untuk penjelasan lebih lanjut tentang query-js Anda bisa memulai dari postingan ini

Pertanyaan lama, tapi sepertinya tidak ada yang menyebutkan lodash (hanya garis bawah).

Jika Anda sudah menggunakan lodash di proyek Anda, menurut saya ini adalah cara elegan untuk melakukannya dalam contoh yang kompleks:

Dapatkan(respons, ["output", "dana", "data", "0", "anak", "0", "grup", "nilaisaya"], "")

sama seperti:

Respon.output.fund.data.children.group.myValue

Perbedaan antara opsi pertama dan kedua adalah di Optim 1, jika Anda memiliki salah satu properti yang hilang (tidak terdefinisi) di jalur, Anda tidak akan mendapatkan kesalahan, opsi ini mengembalikan Anda parameter ketiga.

Untuk filter array lodash ada _.find() , tapi saya lebih suka menggunakan filter() biasa. Namun menurut saya metode _.get() di atas masih sangat berguna saat bekerja dengan data yang sangat kompleks. Saya pernah menemukan API yang sangat kompleks di masa lalu dan ini berguna!

Saya harap ini dapat bermanfaat bagi mereka yang mencari opsi untuk menangani data yang sangat kompleks seperti yang tersirat dalam judulnya.

Apa itu pustaka JavaScript yang menyediakan banyak pembantu pemrograman fungsional yang berguna tanpa memperluas objek bawaan apa pun.

Solusi: var data = ( kode: 42, item: [( id: 1, nama: "foo" ), ( id: 2, nama: "bar" )] ); var item = _.findWhere(data.items, ( id: 2 )); if (!_.isUndefinisi(item)) ( console.log("NAME =>", item.name); ) //menggunakan find - var item = _.find(data.items, function(item) ( kembalikan item .id === 2; if (!_.isUndefinisi(item)) ( console.log("NAMA =>", item.nama); )

Akses ke objek multi-level secara dinamis.

Var obj = ( nama: "salut", subobj: ( subsubobj: ( nama: "Saya sub sub obj" ) ) ); var level = "subobj.subobj.nama"; level = level.split("."); var currentObjState = obj; untuk (var saya = 0; saya< level.length; i++) { currentObjState = currentObjState]; } console.log(currentObjState);

Sebelum HTML5, bekerja dengan atribut dalam elemen HTML tidaklah menyenangkan, secara halus. Saya harus menggunakan atribut seperti rel atau class . Dan beberapa pengembang bahkan membuat atributnya sendiri.

Namun segalanya berubah secara dramatis ketika HTML5 memberi kita kesempatan untuk menggunakan atribut datanya. Sekarang Anda dapat dengan mudah menyimpan data tambahan menggunakan alat standar.

Bagaimana cara kerja atribut tanggal?

Nama itu berbicara sendiri. Atribut tanggal menyimpan beberapa data yang Anda tentukan. Mereka selalu dimulai dengan awalan data- dan diakhiri dengan sesuatu yang lebih mudah dipahami oleh pengembang (sesuai spesifikasi, hanya karakter huruf kecil dan tanda hubung yang diperbolehkan). Sebuah elemen dapat berisi sejumlah atribut tanggal.

Contoh penggunaan atribut untuk menyimpan data pengguna:

Calvin

Tentu saja, data ini tidak terlalu berguna bagi pengguna akhir, karena ia tidak melihatnya, namun atribut tanggal sangat banyak digunakan dalam teknologi web modern.

Berikut ini contoh tombol untuk menghapus sesuatu di halaman Anda:

Menghapus

Semua parameter yang diperlukan ada di ujung jari Anda dan siap dikirim ke skrip backend. Tidak ada lagi atribut rel atau penanganan ID atau tindakan yang diperlukan dari atribut lainnya.

Apa yang bisa Anda simpan?

Hanya ada satu aturan yang perlu diingat: objek tidak dapat disimpan dalam atribut tanggal. Artinya, mungkin saja jika diserialkan terlebih dahulu. Untuk saat ini, ingatlah bahwa pada prinsipnya Anda hanya dapat menyimpan data string.

Atribut membaca/menulis menggunakan javascript

Mari kembali ke contoh tombol dan lihat bagaimana kita dapat mengakses atribut yang diperlukan.

// Ini adalah tombol var button = document.getElementById("ID-tombol-Anda"); // Dapatkan nilai var cmd = button.getAttribute("data-cmd"); var id = tombol.getAttribute("data-id"); // Ubah nilainya button.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id",IdBaruAnda);

Cukup sederhana, bukan? Sekarang cukup berikan parameter cmd dan id ke aplikasi Anda dan lakukan permintaan ajax yang diperlukan.

Atribut tanggal baca/tulis menggunakan jQuery.

Berikut ini analog di jQuery:

// Dapatkan nilai var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#id-tombol-anda").attr("id-data"); // Ubah nilainya $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

Jangan bingung dengan metode data(). Meskipun mereka memiliki beberapa kesamaan, secara umum keduanya adalah hal yang sangat berbeda. Meskipun Anda belum sepenuhnya paham dengan metode ini, gunakan saja attr() .

Menggunakan API kumpulan data

HTML5 bahkan menawarkan API untuk bekerja dengan atribut data, meskipun IE10 dan di bawahnya tidak mendukungnya.

Sekali lagi, contoh dengan tombol, tapi kali ini menggunakan API dataset:

// Ini adalah tombol var button = document.getElementById("ID-tombol-Anda"); // Dapatkan nilai var cmd = button.dataset.cmd; var id = tombol.dataset.id; // Ubah nilainya button.dataset.cmd = yourNewCmd; button.dataset.id = IdBaru Anda;

Harap perhatikan tidak adanya awalan data dan tanda hubung. Sama seperti saat bekerja dengan properti CSS di JavaScript, Anda memerlukan case "bungkuk". Dataset API menerjemahkan nama atribut sehingga data-some-attribute-name dalam HTML menjadi dataset.someAttributeName dalam JavaScript.

Apa yang dapat Anda lakukan dengan atribut tanggal?

Contoh yang diberikan hanyalah landasan. Anda dapat melakukan operasi yang jauh lebih kompleks dengan atribut tanggal. Mari kita lihat beberapa contoh.

Penyaringan

Katakanlah Anda sedang mengerjakan daftar elemen dan Anda perlu memfilternya berdasarkan kata kunci. Tempatkan kata kunci di atribut data dan gunakan skrip iteratif kecil untuk memprosesnya.

• Mengarungi
• Chevrolet
...

Contoh “berlutut”:

$("#filter").on("keyup", function() ( var kata kunci = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(this).toggle(kata kunci.panjang< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

Penyesuaian dgn mode

Tentu saja, lebih baik menerapkan gaya menggunakan kelas, tetapi hal yang sama dapat dilakukan dengan menggunakan atribut data. Ini adalah bagaimana Anda bisa menerapkan gaya ke elemen yang memiliki atribut data tertentu, berapa pun nilainya. Mari kita lihat HTMLnya terlebih dahulu:

Dan sekarang CSSnya:

(latar belakang: merah;)

Namun bagaimana kita memperhitungkan nilai suatu atribut? Ini adalah bagaimana Anda bisa menerapkan gaya ke semua elemen dengan atribut peringatan data yang nilainya mengandung kata kesalahan:

( warna merah; )

Pengaturan

Kerangka kerja Bootstrap yang terkenal menggunakan atribut data untuk mengonfigurasi plugin JavaScript-nya. Contoh pop-up:

Popover di atas

Cara terbaik untuk menyimpan data

Atribut tanggal sangat umum dalam teknologi web. Namun yang paling penting adalah mereka didukung penuh oleh browser lama dan menembus lebih dalam ke standar web. Dan karena standar HTML telah disetujui, Anda dapat menggunakannya hari ini dan tidak takut standar tersebut akan tiba-tiba hilang besok.

Metode data di jQuery memberi kita kemampuan untuk mengikat data arbitrer ke dokumen atau objek javaScript apa pun, sehingga memungkinkan kami membuat kode Anda lebih ringkas dan mudah dibaca. Dimulai dengan jQuery 1.4.3, metode ini dapat digunakan pada objek JavaScript, serta melacak perubahan pada data ini.

Dasar-dasar

Untuk memulainya, Anda bisa memanggil metode data pada objek jQuery, dan Anda juga bisa menggunakan fungsi $.data() secara langsung.

// Menggunakan metode: $("#myDiv").data("key","arbitrary value"); // Menggunakan fungsi secara langsung: $.data($("#myDiv").get(0),"key","arbitrary value");

Fungsi data adalah implementasi tingkat rendah yang sebenarnya digunakan saat memanggil metode. Metode objek jQuery jauh lebih nyaman, dan juga memungkinkan Anda memasukkan diri Anda sendiri sebagai rantai panggilan.

Perhatikan juga bahwa Anda harus meneruskan elemen DOM sebagai parameter pertama ke fungsi $.data, bukan objek jQuery.

Metode objek memerlukan dua parameter - kunci dan nilai. Kuncinya adalah konstanta string, dan nilainya adalah struktur data apa pun, termasuk fungsi dan objek array. Ada sintaks alternatif di mana Anda bisa meneruskan objek sebagai parameter tunggal:

// Anda dapat meneruskan objek: $("#myDiv").data(("name":"Stevie","age":21)); // Hal yang sama: $("#myDiv").data("name","Stevie").data("age",21);

Sekarang, jika Anda perlu mengambil data yang disimpan, Anda dapat memanggil fungsi data, meneruskannya dengan kunci sebagai parameter:

Var theValue = $("#myDiv").data("usia"); // 21

Akses ke data ini tersedia di mana saja dalam skrip. Anda akan menerima data yang disimpan selama elemen yang diambil oleh pemilih tertentu ada.

Var theValue = $("div:pertama").data("nama"); // Stevie $("div:first").click(function())( alert($(ini).data("usia"); // 21 ));

jQuery 1.4.3 juga mendukung data HTML5 yang disimpan dalam atribut. Artinya jika Anda memiliki elemen yang dideklarasikan seperti ini:

Dalam hal ini, Anda bisa mendapatkan data dari atribut data-internal-id dengan memanggil metode $("#img1").data("internal-id") yang tentunya nyaman untuk permintaan AJAX.

Menggunakan metode data pada objek JavaScript

Anda mungkin terkejut, tetapi metode data juga dapat digunakan pada objek JavaScript biasa. Fungsionalitas ini secara resmi diperkenalkan di jQuery 1.4.3.

Var myObj =(); $(myObj).data("kota","Lapangan Musim Semi");

Contoh di atas sebenarnya menciptakan properti kota untuk objek tertentu. Mengapa tidak menulis myObj.city = "Springfield" saja dalam kasus ini? Perbedaannya adalah metode data menambahkan beberapa peristiwa berguna ke objek, membuatnya lebih mudah untuk bekerja dengan objek tersebut. Misalnya:

Var bilah kemajuan =(); $(progressBar).bind("setData",function(e,key,value)( switch(key)( case "persen": $("#progress").width(value+"%"); $("# persenTeks").teks(nilai+"%"); break; case "color": $("#progress").css("color",value); break; case "enabled": $("#progress") .toggleClass("aktif",nilai istirahat; $(progressBar).data("enabled",true).data("persen",21).data("warna","hijau"); console.log(progressBar.enabled);

Dalam contoh di atas, kita menggunakan metode data untuk membuat API sederhana yang dapat digunakan untuk memperbarui suatu elemen.

Ada dua event lagi yang bisa digunakan pada objek javaScript:

• getData - diaktifkan sebelum membaca data. Anda dapat menggunakannya untuk memproses data yang diterima terlebih dahulu. Misalnya untuk menghitung ulang suatu nilai.
• changeData - aktif ketika data disetel atau diubah. Acara ini digunakan dalam plugin datalink jQuery. Dengan itu, Anda bisa mengikat data formulir ke objek javaScript dan bekerja dengan bidang formulir sebagai properti objek.

Di balik layar

jQuery membuat objek kosong (bagi yang penasaran namanya $.cache) yang merupakan tempat penyimpanan semua nilai yang Anda simpan menggunakan metode data. Setiap elemen dari DOM yang digunakan dengan metode data diberi pengenal unik, yang kemudian menjadi kunci untuk mengakses data di objek $.cache.

jQuery tidak hanya menyimpan data pengguna dalam cache ini, tetapi juga menyimpan data internal, pengendali kejadian yang Anda lampirkan menggunakan fungsi live(), bind(), dan delegasi(). Menggunakan toko pusat membuat jQuery lebih dapat diandalkan.

Kesimpulan

Metode data hanyalah salah satu dari banyak fitur jQuery yang membuat hidup lebih mudah bagi pengembang web. Dikombinasikan dengan fitur-fitur perpustakaan lainnya, ini menambah landasan kokoh yang dapat kita andalkan.

Artikel di mana kita akan melihat metode apa yang ada di jQuery untuk bekerja dengan atribut data dan penyimpanan data internal.

Tujuan atribut data HTML 5

Di HTML5, Anda dapat menambahkan atribut khusus ke elemen dokumen apa pun. Tujuan dari atribut ini ditentukan oleh pengembang web secara independen, namun dalam banyak kasus atribut tersebut dimaksudkan untuk menyimpan beberapa informasi, yang kemudian dapat digunakan dalam skrip JavaScript. Atribut khusus selalu dimulai dengan data-* :

Bekerja dengan atribut data menggunakan metode attr dan deleteAttr

Melakukan tindakan pada atribut data di jQuery biasanya dilakukan dengan menggunakan metode attr dan deleteAttr.

// dapatkan nilai atribut data dari elemen pertama dari himpunan saat ini $("selector").attr("data-*"); // menambah atau mengubah nilai atribut data untuk semua elemen yang dipilih $("selector").attr("data-*","value"); // menghapus nilai atribut data dari semua elemen yang ditemukan dengan 1 cara - menggunakan attr $("selector").attr("data-*",null); Metode 2 - menggunakan deleteAttr $("selector").removeAttr("data-*");

Sebagai contoh, mari kita tampilkan nilai atribut data elemen div dengan id="phone-1" ke konsol browser:

// dapatkan nilai atribut data var phoneInfo = "Nama: " + $("#telepon-1").attr("nama-data") + "; Harga: " + $("#telepon- 1").attr("harga-data"); // mencetak nilai ke konsol console.log(phoneInfo);

Metode ini (attr) mengembalikan nilai atribut data sebagai string.

Misalnya, tambahkan atribut data-year ke elemen di atas:

$("#telepon-1").attr("tahun data", 2016);

Anda dapat memahami lebih detail cara bekerja dengan metode ini di artikel jQuery - Bekerja dengan atribut elemen HTML.

jQuery - atribut data dan metode data

Metode data di jQuery tidak digunakan untuk berkomunikasi dengan atribut data. Tujuan utamanya adalah untuk membaca data dari penyimpanan internal jQuery ($.cache) atau menulis beberapa informasi ke dalamnya.

penyimpanan internal jQuery adalah sejenis wadah tempat Anda dapat menempatkan informasi arbitrer yang terkait dengan elemen DOM tertentu pada halaman saat ini.

Namun, metode ini dapat membaca atribut data HTML5 dan menempatkannya di penyimpanan internal. Ini hanya terjadi jika tidak ada kunci di toko jQuery dengan nama yang sama dengan nama atribut data. Jika tidak, Anda akan mendapatkan nilai dari penyimpanan $.cache.

Jadi, bekerja dengan atribut data menggunakan metode data hanya masuk akal jika pekerjaan lebih lanjut dengannya akan dilakukan melalui toko jQuery.

Contoh di mana kita akan melihat bagaimana metode data bekerja dengan atribut data:

// tindakan ini akan menempatkan atribut data harga di penyimpanan (jika tidak ada di penyimpanan) $("#book-1").data("price"); //nilai 420 gosok. // mengubah nilai atribut data harga elemen menggunakan attr $("#book-1").attr("data-price","513 rub."); // baca nilai harga (karena nilai ini ada di penyimpanan $.cache, maka akan diambil darinya) $("#book-1").data("price"); //nilai 420 gosok. // menghapus kunci harga, yang dikaitkan dengan elemen buku-1, dari penyimpanan $("#book-1").removeData("price"); // membaca nilai harga (karena nilai ini tidak ada di penyimpanan jQuery, maka akan diambil dari atribut data dan ditempatkan di $.cache) $("#book-1").data("price"); //nilai 513 gosok.

Dalam metode data, kuncinya sesuai dengan nama atribut data tanpa awalan data-.

// jika elemen div dengan id="pencil" tidak memiliki kunci warna di penyimpanan jQuery, maka baca nilai atribut data-pencil dan tempatkan nilainya di $.cache $("#pencil").data ("warna");

Selain itu, jika di akhir nama atribut data (setelah data-) terdapat tanda hubung ("-"), maka pada saat mengaksesnya menggunakan metode data, huruf sebelum tanda hubung harus diganti dengan huruf kapital, dan tanda hubung itu sendiri harus Dihilangkan. Misalnya, nama atribut data-last-name harus ditentukan dalam metode data sebagai lastName .

Hal lain tentang bekerja dengan metode data adalah ketika jQuery mem-parsing nilai atribut data, ia mencoba untuk memberikan nilainya (string) ke tipe JavaScript yang sesuai (boolean, angka, objek, array, atau null). Misalnya nilai “420” diubah menjadi angka 420. Jika nilai atribut data berupa objek (dimulai dengan “(”) atau array (dimulai dengan “[”), maka jQuery menggunakan metode parseJSON untuk mengurai nilainya. Ini berarti bahwa konten atribut harus memiliki sintaks JSON yang valid (termasuk menentukan nama properti dalam tanda kutip ganda). Namun jika upaya untuk mengurai nilai atribut data tidak berhasil, maka nilai tersebut akan tetap dalam bentuk aslinya (yaitu , sebagai string).

Singkatnya, metode data digunakan untuk melakukan operasi berikut (bergantung pada argumen yang ditentukan):

1. Mengambil nilai kunci yang terkait dengan elemen dari penyimpanan internal jQuery:

$("pemilih").data("kunci");

Varian metode data ini melakukan salah satu hal berikut:

• Membaca atribut data (yang namanya sesuai dengan kunci yang ditentukan) dari elemen pertama kumpulan saat ini, menempatkannya di penyimpanan, dan mengembalikan nilai kunci ini sebagai hasilnya. Metode ini melakukan tindakan ini hanya jika elemen memiliki elemen data yang sesuai dengan kunci dan dalam wadah $.cache elemen ini tidak memiliki entri dengan kunci yang ditentukan.
• Mendapatkan nilai kunci yang ditentukan dari penyimpanan jQuery. Metode data melakukan tindakan ini hanya jika elemen memiliki kunci yang ditentukan di $.cache.
• mengembalikan objek yang tidak terdefinisi atau kosong jika tidak ada tindakan di atas yang dilakukan.

Jika $("selector") mengembalikan beberapa elemen, metode ini hanya mengembalikan elemen pertama dalam kumpulan hasil.

2. Mengambil semua data sebagai objek JavaScript dari penyimpanan jQuery yang terkait dengan elemen tertentu:

// metode data dipanggil tanpa argumen $("selector").data();

Secara lebih rinci, varian metode data ini melakukan hal berikut:

Secara otomatis menempatkan atribut data ke dalam penyimpanan internal jQuery. Ia melakukan tindakan ini hanya untuk atribut data yang namanya (kunci) saat ini tidak ada di toko jQuery.

Mengembalikan objek yang terdiri dari pasangan nilai kunci yang terkait dengan elemen saat ini.

3. Metode data digunakan tidak hanya untuk membaca nilai, tetapi juga untuk menulis data (nilai kunci) yang terkait dengan beberapa elemen DOM ke penyimpanan internal jQuery.

// Opsi 1 (simpan pasangan nilai kunci yang ditentukan untuk setiap elemen yang dipilih): $("selector").data(key, value); // kunci (string) // nilai (data jenis apa pun) // Opsi 2 (menetapkan sekumpulan pasangan nilai kunci (objek) untuk semua elemen yang ditemukan): $("selector").data(obj); // obj adalah objek JavaScript yang berisi pasangan nilai kunci

Contoh bekerja dengan metode data:

//tempatkan kunci harga dengan nilai 550 di penyimpanan jQuery $("#book-js").data("price",550); // membaca informasi yang terkait dengan elemen #book-js dari penyimpanan (secara otomatis menempatkan atribut data nama ke dalam penyimpanan) $("#book-js").data(); // dapatkan nilai kunci harga elemen #book-js $("#book-js").data("price"); // 550 // dapatkan nilai kunci harga elemen #book-js $("#book-js").data("name"); // "JavaScript"

Metode untuk bekerja dengan penyimpanan data jQuery

Mari kita lihat metode lain apa yang ada di jQuery untuk bekerja dengan penyimpanan data selain data .

hapus metode Data

Metode ini dirancang untuk menghapus data yang terkait dengan elemen tertentu dari penyimpanan internal jQuery. Metode ini tidak bekerja dengan atribut data, sehingga semua atribut data yang terkait dengan kunci tidak akan dihapus.

Sintaks metode deleteData adalah:

// Opsi 1 - tanpa parameter (menghapus semua data yang terkait dengan elemen saat ini dari wadah internal jQuery. Jika beberapa elemen dikembalikan sebagai hasil pemilihan, metode hapusData akan melakukan tindakannya (menghapus data dari $.cache) untuk setiap elemen. $("selector").removeData(); // Opsi 2 - dengan parameter string yang berisi nama kunci yang harus dihapus dari semua elemen yang ditemukan $("selector").removeData("key") ; // Opsi 3 - dimaksudkan untuk menghapus beberapa pasang data yang terkait dengan elemen dari penyimpanan internal jQuery $("selector").removeData("key1 key2 ..."); hanya kunci yang ditentukan menggunakan array $("selector"); ").removeData(["key1","key2",...]);

Mari kita hapus beberapa pasangan nilai kunci yang terkait dengan elemen dengan id="book-js" dari toko jQuery:

// membaca semua kunci elemen #book-js (secara otomatis menempatkan atribut data ke dalam wadah data jQuery) $("#book-js").data(); // menghapus 2 kunci yang terkait dengan #books-js dari wadah data jQuery $("#book-js").removeData(["price","name"]);

fungsi $.data()

Fungsi ini melakukan tindakan yang mirip dengan metode data, tetapi tidak seperti itu, fungsi ini bekerja pada tingkat yang lebih rendah. Oleh karena itu, dalam banyak kasus, metode data digunakan, karena ini adalah alat yang lebih nyaman untuk bekerja dengan penyimpanan internal jQuery.

Fungsi ini ditujukan hanya untuk bekerja dengan penyimpanan jQuery dan, tidak seperti metode $("selector").data(), tidak mengambil data dari atribut data HTML 5.

sintaks fungsi jQuery.data():

// Opsi 1 - menyimpan informasi di penyimpanan jQuery $.data(element,key,value); // elemen - elemen DOM yang akan dikaitkan dengan pasangan kunci-nilai // kunci - kunci (string) yang akan dikaitkan dengan nilai // nilai - nilai (tipe data apa pun kecuali tidak ditentukan) // Opsi 2 - memperoleh informasi dari toko jQuery $.data(elemen,kunci); // elemen - elemen DOM yang terkait dengan data // kunci - nama yang dikaitkan dengan nilai yang diinginkan // Opsi 3 - mengembalikan semua data yang terkait dengan elemen tertentu dari penyimpanan data $.data(element); // elemen - elemen DOM yang terkait dengan data

Contoh penggunaan fungsi $.data() untuk menyimpan informasi yang terkait dengan elemen DOM tertentu di penyimpanan jQuery:

// menyimpan informasi yang terkait dengan elemen id="book-html" $.data(document.getElementById("book-html"),"name","HTML in action"); // menambahkan informasi lain yang terkait dengan elemen yang sama $.data(document.getElementById("book-html"),,"price","760"); "760" // mengambil data dari toko jQuery yang dikaitkan dengan elemen id="book-html" sebagai objek var obj = $.data(document.getElementById("book-html")); // mendapatkan nilai nama objek var name = obj.name; // mendapatkan nilai harga objek var price = obj.price;

fungsi $.removeData()

Fungsi ini, seperti metode hapusData, digunakan untuk menghapus data dari penyimpanan internal jQuery.

$.removeData() adalah fungsi tingkat rendah, sama seperti $.data() . Oleh karena itu, pilihan yang lebih mudah adalah menggunakan metode data() daripada fungsi $.data().

Menggunakan fungsi jQuery.removeData():

// Opsi 1 - menghapus semua informasi dari penyimpanan yang terkait dengan elemen tertentu $.removeData(element); // elemen - elemen DOM yang terkait dengan data yang akan dihapus // Opsi 2 - menghapus pasangan nilai kunci dari kumpulan data yang terkait dengan elemen tertentu $.removeData(element,key); // elemen - elemen DOM yang terkait dengan data // kunci - kunci yang mendefinisikan sekumpulan informasi (nilai kunci) yang perlu dihapus dari wadah data jQuery

Demonstrasi penggunaan fungsi hapusData:

// memasukkan atribut data ke dalam penyimpanan jQuery $("#book-css").data(); // mendapatkan kunci harga dari toko jQuery $("#book-css").data("price"); // 1170 // mendapatkan kunci nama dari toko jQuery $("#book-css").data("name"); // "CSS untuk profesional" // menghapus kunci harga dari penyimpanan $.removeData(document.getElementById("book-css"),"price"); // saat menerima kunci elemen yang tidak ada, kita mendapatkan nilai yang tidak terdefinisi $.data(document.getElementById("book-css"),"price"); //belum diartikan

fungsi $.hasData()

Fungsi ini menentukan apakah suatu elemen memiliki data di penyimpanan internal jQuery.

Menggunakan $.hasData() :

$.hasData(elemen); // elemen - elemen DOM yang perlu diperiksa datanya di $.cache

Fungsi hasData mengembalikan nilai true jika ada data apa pun di penyimpanan yang terkait dengan elemen yang ditentukan. Jika tidak, fungsi ini akan mengembalikan nilai salah.

Penyimpanan internal $.cache juga digunakan oleh perpustakaan jQuery itu sendiri. Salah satu contohnya adalah menggunakannya untuk menyimpan kode event handler jQuery.

Contoh penggunaan fungsi hasData:

// memeriksa data di penyimpanan internal yang terkait dengan elemen #book-css $.hasData(document.getElementById("book-css")); //false // letakkan nilainya di penyimpanan internal $("#book-css").data("name","CSS untuk profesional"); // memeriksa data di penyimpanan internal yang terkait dengan elemen #book-css $.hasData(document.getElementById("book-css")); //true // menghapus nilai dari penyimpanan internal $.removeData(document.getElementById("book-css")); // memeriksa data di penyimpanan internal yang terkait dengan elemen #book-css $.hasData(document.getElementById("book-css")); //PALSU

Anda dapat mengetahui cara bekerja di jQuery dengan atribut data yang muncul dalam spesifikasi bahasa HTML5 di artikel "jQuery - Metode Attr dan deleteAttr". Metode ini (attr dan deleteAttr) digunakan tidak hanya untuk mengelola atribut data, tetapi juga atribut elemen HTML lainnya.