Rumah >hujung hadapan web >tutorial js >Kaedah Jquery attr() penerangan terperinci tentang penugasan atribut dan perolehan_jquery atribut

Kaedah Jquery attr() penerangan terperinci tentang penugasan atribut dan perolehan_jquery atribut

WBOYasal: 2016-05-16 15:05:192611semak imbas

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 boleh dengan mudah 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: {Nama atribut satu: "Nilai atribut satu", Nama atribut dua: "Nilai atribut dua", ... .. .}. (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>

1.attr(nama)//Dapatkan nilai atribut

1.1 Gunakan attr(nama) untuk mendapatkan nilai tajuk:

<script>

alert($("ul li:eq(1)").attr("title"));

</script>

Keputusan: Tunjukkan Jus Oren

1.2 Gunakan attr(nama) untuk mendapatkan nilai alt:

<script>

alert($("ul li:eq(1)").attr("alt"));

</script>

Hasil:

Menunjukkan 123

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>

Hasil:

Tunjukkan untuk tidak makan oren

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>

Hasil:

Menunjukkan 123

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

4.1 Dapatkan 25edfb22a4f469ecb59f1190150159c6 kedua dalam ff6d136ddc5fdfeffaf53ff6ee95f185

<script>

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

alert($("ul li:eq(1)").attr("title"));

alert($("ul li:eq(1)").attr("alt"));

</script>

Hasil:

Menunjukkan 2, jangan minum jus oren, bukan 123

4.2 Dapatkan kelas tetapan 25edfb22a4f469ecb59f1190150159c6 kedua dalam ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

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

</script>

Hasil:

893c314b0d1eb0e2d762246524a01455Epalbed06894275b65c1ab86501b08a632eb

ad68735b279fb67b22ae360befa8aaaaOrenbed06894275b65c1ab86501b08a632eb

979fc88e5541c4f8a3e70ad3bec06fdfNenasbed06894275b65c1ab86501b08a632eb

4.3 Dapatkan id tetapan 25edfb22a4f469ecb59f1190150159c6 kedua dalam ff6d136ddc5fdfeffaf53ff6ee95f185.

<script>

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

</script>

Hasil:

893c314b0d1eb0e2d762246524a01455Epalbed06894275b65c1ab86501b08a632eb

ad68735b279fb67b22ae360befa8aaaaOrenbed06894275b65c1ab86501b08a632eb

979fc88e5541c4f8a3e70ad3bec06fdfNenasbed06894275b65c1ab86501b08a632eb

4.4 Dapatkan 25edfb22a4f469ecb59f1190150159c6 kedua dalam ff6d136ddc5fdfeffaf53ff6ee95f185

<script>

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

</script>

Hasil:

893c314b0d1eb0e2d762246524a01455Epalbed06894275b65c1ab86501b08a632eb

19f88c98660f0a7d73d1f82a7224277dOrenbed06894275b65c1ab86501b08a632eb

979fc88e5541c4f8a3e70ad3bec06fdfNenasbed06894275b65c1ab86501b08a632eb

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 gambar tidak dapat dipaparkan, teks ini akan dipaparkan dan bukannya gambar. 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

Kod html yang sama dalam penggunaan satu, saya mahu memadamkan atribut tajuk li, maka ini dia:

<script>

$("ul li:eq(1)").removeAttr("title");

</script>

C'est aussi simple que cela, attr est en fait une implémentation simplifiée de getAttribute en js natif, et RemoveAttr est l'abréviation de RemoveAttribute.

Alors, existe-t-il un attribut similaire à attr() ?

val() dans jquery est similaire,

$(this).val(); Obtient la valeur d'un nœud d'élément, équivalent à $(this).attr("value");

$(this).val(value); Définir la valeur d'un nœud d'élément, équivalent à $(this).attr("value",value);

L'explication détaillée ci-dessus de l'attribution et de l'acquisition d'attributs de la méthode Jquery attr() est tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence, et j'espère également que vous soutiendrez Script Home.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Window.Open membuka borang dan jika kemahiran code_javascript bersarangArtikel seterusnya：Window.Open membuka borang dan jika kemahiran code_javascript bersarang

Artikel berkaitan

Lihat lagi