Perbincangan terperinci mengenai manipulasi jQuery terhadap atribut elemen DOM attr() dan removeAtrr() method_jquery

Bagaimana untuk memanipulasi atribut elemen dalam jQuery: attr(): Baca atau tulis nilai atribut elemen padanan. removeAttr(): Alih keluar atribut yang ditentukan daripada elemen yang dipadankan.

operasi baca kaedah attr()

attr() operasi baca Apa yang dibaca ialah nilai atribut yang ditentukan bagi elemen pertama dalam elemen padanan. Format: .attr(attributeName), jenis nilai pulangan: String Membaca atribut yang tidak wujud akan mengembalikan tidak ditentukan.

Ambil perhatian bahawa hasil pemilihan pemilih mungkin satu set Di sini, hanya nilai atribut elemen pertama dalam set diperolehi Lihat contoh:

Salin kod Kod adalah seperti berikut: $(dokumen). sedia(fungsi () { $("butang").klik(fungsi () { makluman($("p").attr("title"));//Dapatkan atribut // kod ini hanya boleh mendapatkan atribut elemen pertama. }); }); perenggan 1

perenggan 2

dapatkan tajuk

Keputusan berjalan: Paparan kotak pop timbul: tajuk1. Jika anda ingin mendapatkan atribut setiap elemen secara berasingan, anda perlu menggunakan struktur gelung jQuery, seperti kaedah .each() atau .map(). Contoh di atas boleh ditukar kepada:

Salin kod Kod adalah seperti berikut: $(dokumen).sedia(fungsi () { $("butang").klik(fungsi () { //dapatkan atribut untuk setiap elemen dalam pilihan. $("p").setiap(fungsi () { alert($(this).attr("title")); }); }); });

Anda boleh mendapatkan atribut setiap elemen secara berasingan

operasi tulis kaedah attr()

attr() operasi menulis memberikan nilai kepada satu atau lebih atribut elemen padanan. Format umum: .attr(attributeName, value), iaitu untuk menetapkan nilai untuk atribut. Jenis nilai pulangan: jQuery Ia juga menyokong panggilan kaedah berantai

Semasa menjalankan operasi tulis, jika nama atribut yang ditentukan tidak wujud, atribut dengan nama itu akan ditambah, iaitu, atribut tersuai akan ditambah namanya ialah nama atribut dan nilainya ialah

Atribut penulisan dilakukan untuk memadankan setiap elemen dalam koleksi, lihat contoh:

Salin kod Kod adalah seperti berikut: $(dokumen). sedia(fungsi(){ $("#button1").klik(function(){ $("p").attr("title","Hello World"); }); }); Ini ialah perenggan.

Ini ialah div. Ini adalah perenggan lain.

Ini adalah div lain.

Selepas mengklik butang, semua p ditambah dengan tajuk atribut="Hello World".

Terdapat dua format lain untuk operasi tulis: .attr(atribut) dan .attr(attributeName, fungsi). Berikut diperkenalkan secara berasingan.

.attr(atribut):

Jenis atribut di sini ialah PlainObject, yang boleh digunakan untuk menetapkan berbilang atribut sekaligus Apakah itu PlainObject? Pemahaman mudah ialah urutan pasangan nilai kunci yang dikelilingi oleh pendakap Anda boleh merujuk pada pautan di hujung soalan untuk mendapatkan arahan Kekunci dan nilai dipisahkan dengan titik bertindih (:), dan setiap pasangan nilai kunci dipisahkan dengan koma (, ). Nota: Apabila menetapkan berbilang nilai atribut, tanda petikan nama atribut adalah pilihan (mungkin ada atau tidak, atribut kelas adalah pengecualian dan mesti disertakan dalam tanda petikan ). Contoh:

Salin kod Kod adalah seperti berikut: $(dokumen). sedia(fungsi () { $("#button1").klik(fungsi () { $("p").attr("title", "Hello World"); }); $("#button2").klik(fungsi () { $("div").attr({"title": "some title for div", "hello": "World"}); }); }); Ini ialah perenggan.

Ini ialah div. Ini adalah perenggan lain.

Ini adalah div lain.

Selepas mengklik dua butang, elemen bertukar kepada:

Antaranya, helo dalam ialah atribut tersuai baharu yang nilainya ialah Dunia. .attr(Nama atribut, fungsi(indeks,Nilai lama)): Gunakan fungsi untuk menetapkan nilai atribut Parameter pertama fungsi ialah indeks, dan parameter kedua ialah nilai atribut sebelumnya Lihat contoh:

Salin kod Kod adalah seperti berikut: div { warna: biru; } rentang { warna: merah; } b { berat fon: lebih berani; } $(dokumen).sedia(fungsi () { $("div") .attr("id", fungsi (index, oldAttr) { jika (oldAttr) { kembalikan indeks "div-id" oldAttr; } lain { kembalikan indeks "div-id"; } }) .setiap(fungsi () { $("span", this).html("(id = ' " this.id " ')"); }); }); Zero-th Pertama Kedua 上面的例子,对应的页面结果如下:

set改变的. 即操作会被忽略. 还是上面的例子,attr()其中的function返回undefined: 如下:

复制代码 代码如下: $(dokumen).sedia(fungsi () { $("div").attr("id", fungsi (index, oldAttr) { kembali tidak ditentukan; }).setiap(fungsi () { $("span", this).html("(id = ' " this.id " ')"); }); }); 返回的页面效果如下:

即没有进行任何修改操作,还是保持原来的属性值. 注意:jQuery不能修改 和 的type属性,如果修改会在浏览器报错. 这是因为IE浏览器中不能修改type属性.

alih keluarAttr()方法

移除匹配元素集合中每一个元素的指定属性. removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jQuery对象直接调用,并且它考并且它耐虑到用览器上的属性名称可能不统一的问题. contoh:

复制代码 代码如下: $(dokumen).sedia(fungsi () { $("input[type=button]").klik(fungsi () { $("div").removeAttr("title"); }); }); Zero

Selepas mengklik butang, atribut tajuk akan dipadamkan Nota: Menggunakan removeAttr() untuk mengalih keluar onclick tidak akan berfungsi pada IE6-8 Untuk mengelakkan masalah ini, kaedah .prop() harus digunakan Contohnya:

Salin kod Kod adalah seperti berikut: $element.prop( "onclick", null ); console.log( "onclick property: ", $element[ 0 ].onclick );