Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggantikan nilai atribut tag dalam jquery
Bagaimana untuk menggantikan nilai atribut tag dalam jquery
- 青灯夜游asal
- 2023-01-03 17:56:472644semak imbas
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"...});".
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> ↑ ↑ ↑ 开始标签 内容 结束标签
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"
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
attr() boleh menetapkan nilai atribut bagi elemen yang dipilih. Sintaks penggantian://单个属性
$("div").attr("属性名","新属性值");
//多个个属性
$("div").attr({属性1:"新值",属性2:"新值"....});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>
<!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>
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:"新值"....});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>
<!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>
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!