Penjelasan terperinci tentang contoh penggunaan fungsi attr() dan prop() dalam jQuery (dengan perbezaan penggunaan)

Contoh dalam artikel ini menerangkan penggunaan fungsi attr() dan prop() dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Kaedah attr() jQuery

Kaedah attr() digunakan dalam jquery untuk mendapatkan dan menetapkan atribut elemen attr ialah singkatan daripada atribut Attr() sering digunakan dalam operasi DOM jQuery() mempunyai 4 ungkapan.

1. attr (nama atribut) //Dapatkan nilai atribut (dapatkan nilai atribut elemen padanan pertama. Kaedah ini dengan mudah boleh mendapatkan nilai atribut daripada elemen padanan pertama. Jika elemen tidak mempunyai atribut yang sepadan, mengembalikan tidak ditentukan )

2. attr(nama atribut, nilai atribut) //Tetapkan nilai atribut (Tetapkan nilai atribut untuk semua elemen yang sepadan.)

3. attr (nama atribut, nilai fungsi) //Tetapkan nilai fungsi atribut (Tetapkan nilai atribut yang dikira untuk semua elemen yang sepadan. Jangan berikan nilai, tetapi berikan fungsi dan nilai yang dikira oleh ini fungsi ialah nilai atribut )

4.attr(properties) //Tetapkan berbilang nilai atribut untuk elemen yang ditentukan, iaitu: {Attribute name one: "Attribute value one", Attribute name two: "Attribute value two", … … }. (Ini ialah cara terbaik untuk menetapkan banyak atribut dalam kelompok merentas semua elemen yang sepadan. Ambil perhatian bahawa jika anda ingin menetapkan atribut kelas sesuatu objek, anda mesti menggunakan 'className' sebagai nama atribut. Atau anda boleh terus menggunakan 'class' atau 'id' )

Kod sampel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

Salin selepas log masuk

1.attr(nama)//Dapatkan nilai atribut

1.1 Gunakan attr(nama) untuk mendapatkan nilai tajuk:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

Salin selepas log masuk

Hasil:

1.2 Gunakan attr(nama) untuk mendapatkan nilai alt:

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

Salin selepas log masuk

Hasil:

2. attr(nama,nilai) //Tetapkan nilai atribut

2.1 Gunakan attr(nama,nilai) untuk mengubah suai nilai tajuk kepada: Jangan makan oren

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

Salin selepas log masuk

Hasil:

3. attr(nama,fn) //Tetapkan nilai fungsi atribut

3.1 Tetapkan nilai atribut alt kepada nilai atribut tajuk.

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

Salin selepas log masuk

Hasil:

4.attr(properties) //Tetapkan objek dalam bentuk "nama/nilai" sebagai atribut semua elemen yang sepadan

4.1 Dapatkan

kedua dalam

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

Salin selepas log masuk

Hasil:

4.2 Dapatkan kelas tetapan

kedua dalam

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

Salin selepas log masuk

Hasil:

4.3 Dapatkan id tetapan

kedua dalam

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

Salin selepas log masuk

Hasil:

4.4 Dapatkan

kedua dalam

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

Salin selepas log masuk

Hasil:

Adalah salah untuk menambah alt dalam li Ia hanya boleh digunakan dalam img, kawasan dan elemen input (termasuk elemen applet). Untuk elemen input, atribut alt bertujuan untuk menggantikan imej butang hantar. Untuk menerangkan kaedah attr() secara terperinci di sini, tiada atribut yang sesuai, jadi alt digunakan sebagai contoh sahaja untuk pembelajaran dan rujukan penggunaan kaedah attr().

Berikut ialah perbezaan antara alt dan tite.

alt: Ini ialah teks yang digunakan untuk menerangkan grafik Apabila imej tidak dapat dipaparkan, teks ini akan dipaparkan dan bukannya imej. Teks juga akan dipaparkan apabila tetikus dialihkan ke atas imej.
tajuk: Ia adalah teks yang akan dipaparkan selepas tetikus diletakkan di atasnya.

Jadi bagaimana untuk memadamkan atribut?

Kata kunci untuk memadamkan atribut dalam jquery ialah: removeAttr. Sila ambil perhatian bahawa A menggunakan huruf besar Ia adalah kod html yang sama dalam penggunaan satu. Saya mahu memadamkan atribut tajuk li, jadi ini ialah:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

Salin selepas log masuk

Semudah itu, attr sebenarnya merupakan pelaksanaan ringkas getAttribute dalam js asli, dan removeAttr ialah singkatan removeAttribute.

Jadi adakah terdapat atribut yang serupa dengan attr()?

val() dalam jquery adalah serupa dengan ,
$(this).val(); Mendapat nilai nod elemen, bersamaan dengan $(this).attr("value");
$(this).val(value); Tetapkan nilai nod elemen, bersamaan dengan $(this).attr("value",value);

2. Kaedah prop() jQuery:

Fungsi

prop() digunakan untuk menetapkan atau mengembalikan nilai atribut elemen yang dipadankan dengan objek jQuery semasa.

Fungsi ini tergolong dalam objek jQuery (contoh). Jika anda perlu mengalih keluar sifat unsur DOM, gunakan fungsi removeProp().

Tatabahasa

Fungsi ini telah ditambahkan dalam jQuery 1.6. Fungsi prop() mempunyai dua kegunaan berikut:

Penggunaan 1:

jQueryObject.prop( propertyName [, nilai ] )
Tetapkan atau kembalikan nilai propertyName harta yang ditentukan. Jika parameter nilai ditentukan, ini bermakna menetapkan nilai propertyName kepada nilai jika parameter nilai tidak ditentukan, ia bermakna mengembalikan nilai propertyName.

Nilai parameter juga boleh menjadi fungsi prop() akan merentasi dan melaksanakan fungsi berdasarkan semua elemen yang dipadankan. prop() juga akan menghantar dua parameter kepada fungsi: parameter pertama ialah indeks elemen dalam elemen padanan, dan parameter kedua ialah nilai semasa atribut propertyName elemen. Nilai pulangan fungsi ialah nilai yang ditetapkan untuk atribut propertyName elemen.

Penggunaan 2:

jQueryObject.prop( objek )
Tetapkan nilai sebarang bilangan sifat secara serentak sebagai objek. Setiap atribut objek objek sepadan dengan propertyName, dan nilai atribut sepadan dengan nilai.

Nota: Semua operasi "atribut tetapan" bagi fungsi prop() adalah untuk setiap elemen yang dipadankan dengan objek jQuery semasa; semua operasi "atribut membaca" hanya untuk elemen dipadankan yang pertama.
Parameter

Sila cari parameter yang sepadan berdasarkan nama parameter yang ditakrifkan dalam bahagian sintaks sebelumnya.

Parameter	Penerangan
propertyName	Jenis rentetan menentukan nama atribut.
nilai	Jenis Pilihan/Objek/Fungsi menentukan nilai atribut atau fungsi yang mengembalikan nilai atribut.
objek	Objek yang ditentukan mengikut jenis , digunakan untuk merangkum berbilang pasangan nilai kunci dan menetapkan berbilang sifat pada masa yang sama.