Bagaimana untuk menggantikan nilai atribut tag dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

青灯夜游

Lepaskan： 2023-01-04 09:15:16

asal

2667 orang telah melayarinya

Dua kaedah untuk menggantikan nilai atribut tag: 1. Gunakan attr() untuk menggantikan nilai atribut, sintaks "$("img").attr({Attribute 1: "New value", Attribute 2 : "Nilai baharu"...});". 2. Gunakan prop() untuk menggantikan nilai atribut, sintaksnya ialah "$("img").prop({Atribut 1: "Nilai Baharu", Atribut 2: "Nilai Baharu"...});".

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

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

Atribut teg HTML

Teg dalam HTML adalah seperti kata kunci, setiap teg mempunyai semantik (maksud) tersendiri, Contohnya, < teg ;p> mewakili perenggan, dan teg Bergantung pada teg, penyemak imbas akan memaparkan kandungan dalam teg dengan cara yang berbeza.

Secara amnya, teg HTML terdiri daripada teg permulaan, atribut, kandungan dan teg akhir Nama teg tidak sensitif huruf besar-besaran, tetapi nilai kebanyakan atribut perlu peka huruf besar-kecil , seperti yang ditunjukkan di bawah: atribut

	属性
	↓
<div class="foo">PHP中文网</div>
 ↑               ↑        ↑
开始标签          内容     结束标签

Salin selepas log masuk

boleh memberikan beberapa maklumat tambahan untuk teg HTML atau mengubah suai teg HTML. Atribut perlu ditambah dalam teg permulaan dan format sintaks ialah:

attr="value"

Salin selepas log masuk

attr mewakili nama atribut dan nilai mewakili nilai atribut. Nilai atribut mesti dikelilingi oleh petikan berganda " " atau petikan tunggal ' '.

Perhatikan bahawa walaupun petikan berganda dan petikan tunggal boleh mengelilingi nilai atribut, demi penyeragaman dan profesionalisme, sila gunakan petikan berganda sebanyak mungkin.

Teg tidak boleh mempunyai atribut, atau boleh mempunyai satu atau lebih atribut.

Dua cara untuk mengubah suai nilai atribut teg dalam jquery

Kaedah 1: Gunakan attr() untuk mengubah suai nilai atribut< Kaedah 🎜>

attr() boleh menetapkan nilai atribut bagi elemen yang dipilih.

Sintaks penggantian:

//单个属性
$("div").attr("属性名","新属性值");

//多个个属性
$("div").attr({属性1:"新值",属性2:"新值"....});

Salin selepas log masuk

Contoh 1: Ubah suai nilai atribut gaya teg div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("style","height:100px;background-color: #AFEEEE;");
			});
		});
		</script>
	</head>
	<body>

		<div style="height: 150px;border: 1px solid red;"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

Contoh 2: Ubah suai atribut lebar dan tinggi

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").attr({width:"400",height":"320"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="200"    style="max-width:90%"><br><br>
		<button>修改width和height属性值</button>
	</body>

</html>

Salin selepas log masuk

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

Kaedah 2: Gunakan prop() untuk mengubah suai nilai atribut

dan kaedah attr(), kaedah prop() juga boleh menetapkan nilai atribut bagi elemen yang dipilih.

Ubah suai sintaks:

//单个属性
$("div").prop("属性名","新值");
//多个个属性
$("div").prop({属性1:"新值",属性2:"新值"....});

Salin selepas log masuk

Contoh 1: Ubah suai atribut kelas tag div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
		$(document).ready(function() {
			$("button").click(function() {
				$("div").attr("class","box2");
			});
		});
		</script>
		<style>
			.box1{
				height: 150px;
				background-color: #AFEEEE;
			}
			.box2{
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>

		<div class="box1"></div>
		<br>
		<button>修改div的属性值</button>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

Contoh 2: Ubah suai atribut src dan alt

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").prop({src:"img/4.jpg",alt:"晚霞"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="300"><br><br>
		<button>修改src和alt属性</button>
	</body>

</html>

Salin selepas log masuk

Bagaimana untuk menggantikan nilai atribut tag dalam jquery

[Pembelajaran yang disyorkan:

tutorial video jQuery, video bahagian hadapan web]

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