Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery

青灯夜游

Lepaskan： 2023-01-28 14:23:41

asal

1970 orang telah melayarinya

Cara untuk menetapkan berbilang nilai atribut unsur dalam jquery: 1. Gunakan attr() untuk menetapkan, sintaks "$(selector).attr({nama atribut: nilai atribut; nilai atribut : nilai atribut...}) "; 2. Gunakan prop() untuk menetapkan, sintaks ialah "$(selector).prop({property name:property value;property value:property value...})".

Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

Dalam jquery, anda boleh menggunakan dua kaedah untuk menetapkan atribut (nilai) untuk elemen:

attr() kaedah
prop() method

Kedua-dua kaedah boleh menetapkan satu atau lebih nilai atribut kepada elemen.

Mari kita lihat cara menetapkan berbilang nilai atribut.

Kaedah 1. Gunakan attr() untuk menetapkan berbilang nilai atribut

kaedah attr() menetapkan atau mengembalikan nilai atribut elemen yang dipilih. Bergantung pada parameter kaedah, cara ia berfungsi juga berbeza.

Sintaks:

//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})

Salin selepas log masuk

Contoh: Tetapkan sifat lebar dan ketinggian imej

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").attr({
						width: "50",
						height: "80"
					});
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery" >
		<br />
		<button>设置图像的 width 和 height 属性</button>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery

2. Gunakan prop() untuk menetapkan berbilang nilai atribut

Kaedah prop() menetapkan atau mengembalikan atribut dan nilai elemen yang dipilih.

Apabila kaedah ini digunakan untuk menetapkan nilai atribut, satu atau lebih pasangan atribut/nilai ditetapkan untuk set elemen padanan.

Sintaks:

//多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})

Salin selepas log masuk

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").prop({
						width: "50",
						height: "80"
					});
				});
			});
		</script>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery" >
		<br />
		<button>设置图像的 width 和 height 属性</button>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery

Pengetahuan lanjutan: attr() dan Perbezaan antara kaedah prop()

Kaedah prop() adalah serupa dengan kaedah attr() Kedua-duanya digunakan untuk mendapatkan atau menetapkan atribut HTML elemen, tetapi mereka juga mempunyai perbezaan yang penting.

Syor rasmi jQuery: Untuk atribut dengan dua nilai true dan false, seperti ditandai, dipilih dan dilumpuhkan, adalah disyorkan untuk menggunakan kaedah prop() untuk beroperasi, manakala untuk atribut lain adalah disyorkan untuk menggunakan kaedah attr() untuk beroperasi.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $(&#39;input[type="radio"]&#39;).change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果" />苹果</label>
			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<p></p>
	</body>
</html>

Salin selepas log masuk

Kesan pratonton ditunjukkan dalam Rajah 1.

Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery

Analisis

$().change(function(){
    ……
})

Salin selepas log masuk

Di atas mewakili peristiwa perubahan dalam jQuery, yang sama dengan peristiwa onchange dalam JavaScript detail nanti.

Dalam contoh ini, kami sebenarnya mahu menggunakan $(this).attr("checked") untuk menentukan sama ada butang radio dipilih Jika ia dipilih, dapatkan nilai butang radio. Tetapi selepas menjalankan kod, saya dapati: Ia tidak mempunyai kesan sama sekali! kenapa ni?

Malah, untuk atribut yang diperiksa, dipilih dan dilumpuhkan bagi elemen borang, kami tidak boleh mendapatkannya menggunakan kaedah attr(), tetapi mesti menggunakan kaedah prop(). Oleh itu, ia akan berfungsi jika kita menggantikan kaedah attr() dengan kaedah prop().

Malah, kaedah prop() nampaknya mengimbangi kelemahan kaedah attr() dalam operasi atribut bentuk. Ingat satu ayat: Jika harta tidak boleh diperoleh atau ditetapkan menggunakan kaedah attr(), ia boleh dicapai dengan menukar kaedah prop().

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!