Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery
Bagaimana untuk menetapkan berbilang nilai atribut bagi elemen dalam jquery
- 青灯夜游asal
- 2023-01-28 14:23:411955semak imbas
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...})".
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({属性名:属性值;属性值:属性值...})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>
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({属性名:属性值;属性值:属性值...})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>
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 () {
$('input[type="radio"]').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>Kesan pratonton ditunjukkan dalam Rajah 1.
Analisis
$().change(function(){
……
})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!