jquery設定元素多個屬性值的方法：1、使用attr()設置，語法「$(selector).attr({屬性名稱:屬性值;屬性值:屬性值...}) 」；2、使用prop()設置，語法「$(selector).prop({屬性名:屬性值;屬性值:屬性值...})」。
本教學操作環境：windows7系統、jquery3.6版本、Dell G3電腦。
在jquery中，可以使用一些兩個方法來設定元素屬性（值）：
attr()方法
prop()方法
這兩種方法都可以為元素設定一個或多個屬性值。
下面就來看看設定多個屬性值的方法。
方法1、使用attr()設定多個屬性值
attr() 方法設定或傳回被選元素的屬性值。根據該方法不同的參數，其工作方式也有所差異。
語法：
//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})範例：設定映像的width 和height 屬性
<!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="jquery怎麼設定元素多個屬性值" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
##2、使用prop ()設定多個屬性值
prop() 方法設定或傳回被選元素的屬性和值。 當方法用於設定屬性值時，則為符合元素集合設定一個或多個屬性/值對。 語法：//多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})<!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="jquery怎麼設定元素多個屬性值" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
#擴充知識：attr()和prop()方法的差異
prop() 方法和attr() 方法相似，都是用來取得或設定元素的HTML 屬性的，不過兩者也有著本質上的差異。 jQuery 官方建議：具有true 和false 這兩種取值的屬性，如checked、selected 和disabled 等，建議使用prop() 方法來操作，而其他的屬性都建議使用attr() 方法來操作。 範例：<!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>
$().change(function(){
……
})以上是jquery怎麼設定元素多個屬性值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
