Setiap elemen mempunyai satu atau lebih atribut Tujuan atribut ini adalah untuk memberikan maklumat tambahan tentang elemen yang sepadan atau kandungannya. Contohnya: dalam elemen img, src ialah atribut elemen dan digunakan untuk menandakan alamat imej.
Terdapat tiga kaedah DOM utama untuk atribut operasi, kaedah getAttribute, kaedah setAttribute dan kaedah removeAttribute, walaupun begitu, masih terdapat banyak masalah dalam operasi sebenar, yang tidak akan dibincangkan di sini. Dalam jQuery, menggunakan attr() dan removeAttr() boleh menyelesaikan segala-galanya, termasuk isu keserasian
Dalam jQuery, kaedah attr() digunakan untuk mendapatkan dan menetapkan atribut elemen ialah singkatan atribut , attr ()
attr() sering digunakan dalam operasi DOM jQuery Terdapat 4 ungkapan
attr (nama atribut masuk): Dapatkan Nilai atribut
<. 🎜> attr(nama atribut, nilai atribut): Tetapkan nilai atribut
attr(nama atribut, nilai fungsi): Tetapkan nilai fungsi atribut
attr(atribut) : Tetapkan berbilang nilai atribut untuk elemen yang ditentukan, iaitu: {Attribute name one: "Attribute value one", Attribute name two: "Attribute value two", … … }
removeAttr()Alih keluar kaedah
.removeAttr(attributeName): Alih keluar atribut (atribut) daripada setiap elemen dalam set elemen yang dipadankan
Kelebihan:
attr dan removeAttr dikapsulkan oleh jQuery untuk operasi atribut Memanggil kaedah ini secara langsung pada objek jQuery memudahkan untuk mengendalikan atribut, dan tidak perlu memahami masalah nama atribut yang berbeza dalam penyemak imbas
<🎜. >Perkara yang perlu diberi perhatian
: Terdapat perbezaan konsep dalam DOM: Atribut dan Harta kedua-duanya diterjemahkan sebagai "atribut", dan buku "JS Advanced Programming" diterjemahkan sebagai "features" ” dan “ sifat-sifat”. Untuk memahami secara ringkas, Atribut ialah atribut yang disertakan dengan nod dom
Contohnya: id, kelas, tajuk, sejajar, dsb. yang biasa digunakan dalam html:
<div id="phpcn" title="php中文网"></div>
Dan Harta ialah DOM ini elemen sebagai objek, dan lampirannya Kandungan, seperti tagName, nodeName, nodeType,, defaultChecked dan defaultSelected, gunakan kaedah .prop() untuk mendapatkan atau menetapkan nilai, dsb.
Kepada dapatkan Attribute, anda perlu menggunakan attr, dan untuk mendapatkan Property, anda perlu menggunakan prop
Mari kita lihat contoh untuk menukar nilai atribut imej
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<img src="1.jpg" width="200" height="200" id="img">
<script type="text/javascript">
$("#img").attr('width','400');
</script>
</body>
</html>Nota: Mula-mula anda perlu mempunyai imej ini 1 .jpg Anda boleh mencari gambar untuk dicuba, dan kemudian jalankan hasilnya
Cara menggunakan attr( ) kaedah untuk mendapatkan nilai atribut, sila lihat contoh di bawah
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html>Anda boleh lihat pop-up Kandungan yang dipaparkan dalam kotak ialah laman web php Cina
Mari lihat cara memadamkan kandungan elemen removeAttr()
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html>Nota: Kotak teks kami pada asalnya mempunyai kandungan apabila bahasa skrip dilaksanakan , kandungan teks akan dipadamkan
bahagian seterusnya