Javascript lulus objek dalam atribut data

Question

TechnoFunnel menyajikan artikel lain untuk mendemonstrasikan cara meneruskan data ke komponen khusus yang dibuat menggunakan JavaScript. Pada artikel sebelumnya kami telah membuat Elemen HTML Khusus yang dapat digunakan kembali tanpa menggunakan Kerangka apa pun. Mari kita buat Komponen Kustom Dinamis dengan JavaScript

Table of Contents Show

catatan tambahan
. data( key )Pengembalian.
Bisakah atribut data digunakan dengan JavaScript?
Bagaimana kita bisa menggunakan objek dataset untuk mengakses atribut data elemen?
Bagaimana cara mengatur atribut data menggunakan JavaScript?
Bagaimana cara mendapatkan data dari atribut data di JavaScript?

Metode .data()_ memungkinkan kita untuk melampirkan data jenis apa pun ke elemen DOM dengan cara yang aman dari referensi melingkar dan karenanya dari kebocoran memori

Kita dapat menetapkan beberapa nilai berbeda untuk satu elemen dan mengambilnya nanti

1

2

3

4

5


$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }

Menggunakan metode data()_ untuk memperbarui data tidak memengaruhi atribut di DOM. Untuk menyetel nilai atribut data-*, gunakan


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

0

Sebelum jQuery 1. 4. 3,


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

_1 sepenuhnya mengganti semua data. Sejak jQuery 1. 4. 3, data malah diperpanjang oleh penggabungan dangkal

Sejak jQuery 3, setiap urutan dua karakter "-" (U+002D) diikuti dengan huruf ASCII huruf kecil di kunci diganti dengan versi huruf besar dari huruf tersebut, sejalan dengan. Pernyataan seperti


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

_2 akan mengembalikan


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

3

Karena cara browser berinteraksi dengan plugin dan kode eksternal, metode .data() tidak dapat digunakan pada elemen


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>



 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

5 (kecuali jika itu adalah plugin Flash),


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

6 atau


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

7

catatan tambahan

Perhatikan bahwa metode ini saat ini tidak menyediakan dukungan lintas platform untuk menyetel data pada dokumen XML, karena Internet Explorer tidak mengizinkan data dilampirkan melalui properti expando

undefined_ tidak dikenali sebagai nilai data. Panggilan seperti


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

_9 akan mengembalikan objek jQuery yang dipanggil, memungkinkan untuk chaining

Contoh

Simpan lalu ambil nilai dari elemen div

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

_

Demo

. data( key )Pengembalian.

Keterangan. Kembalikan data sewenang-wenang yang terkait dengan elemen pertama dalam koleksi jQuery, seperti yang ditetapkan oleh data() atau oleh atribut HTML5 data-*

versi ditambahkan. 1. 2. 3
- kunci
  Jenis.
  Nama data yang disimpan
versi ditambahkan. 1. 4
- Tanda tangan ini tidak menerima argumen apa pun

Metode .data()_ memungkinkan kita untuk membaca data yang sebelumnya terkait dengan elemen DOM. Kami dapat mengambil beberapa nilai berbeda untuk satu elemen satu per satu, atau sebagai satu set

1

2

3

4

5

6

7


var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
 
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }

Memanggil .data() tanpa parameter mengembalikan objek JavaScript yang berisi setiap nilai tersimpan sebagai properti. Objek dapat digunakan secara langsung untuk mendapatkan nilai data (namun perhatikan bahwa nama properti yang awalnya berisi tanda hubung akan dimodifikasi seperti yang dijelaskan di bawah)

Sejak jQuery 3, setiap urutan dua karakter "-" (U+002D) diikuti dengan huruf ASCII huruf kecil di kunci diganti dengan versi huruf besar dari huruf tersebut, sejalan dengan. Pernyataan seperti


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

_2 akan mengembalikan


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

3

Sejak jQuery 1. 4. 3, digunakan untuk menginisialisasi data jQuery. Atribut data-* elemen diambil saat pertama kali metode data() dipanggil, dan kemudian tidak lagi diakses atau dimutasi (semua nilai disimpan secara internal oleh jQuery)

Setiap upaya dilakukan untuk mengonversi nilai string atribut menjadi nilai JavaScript (termasuk boolean, angka, objek, larik, dan nol). Sebuah string hanya diubah menjadi angka jika hal itu tidak mengubah representasinya (misalnya, string "100" diubah menjadi angka 100, tetapi "1E02" dan "100. 000" dibiarkan sebagai string karena nilai numeriknya 100 diserialisasi menjadi "100"). Ketika sebuah string dimulai dengan '{' atau '[', maka


var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
 
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }

9 digunakan untuk menguraikannya; . String yang tidak dapat diuraikan karena nilai JavaScript tidak dikonversi

Bisakah atribut data digunakan dengan JavaScript?

Data HTML-* Atribut . Data (khusus) yang disimpan kemudian dapat digunakan dalam JavaScript halaman untuk menciptakan pengalaman pengguna yang lebih menarik (tanpa panggilan Ajax atau kueri basis data sisi server .

Bagaimana kita bisa menggunakan objek dataset untuk mengakses atribut data elemen?

Untuk mendapatkan atribut data melalui objek kumpulan data, dapatkan properti dengan bagian dari nama atribut setelah data- (perhatikan bahwa tanda hubung . Setiap properti adalah string dan dapat dibaca dan ditulis. Dalam artikel pengaturan kasus di atas. Himpunan data. kolom = 5 akan mengubah atribut itu menjadi "5".

Bagaimana cara mengatur atribut data menggunakan JavaScript?

Untuk membuat atribut data baru di JavaScript, kita hanya perlu menambahkan properti baru ke objek kumpulan data dengan sebuah nilai . Ini akan memperbarui objek kumpulan data dan HTML kita yang artinya HTML kita akan terlihat seperti ini.

Bagaimana cara mendapatkan data dari atribut data di JavaScript?

Satu cara untuk mendapatkan nilai atribut adalah dengan menggunakan metode getAttribute yang tersedia secara native . Kita dapat memanggil getAttribute untuk mengembalikan nilai atribut data-fruit dengan menulis; .

kode javascript