Home > Article > Web Front-end > How to set multiple attribute values of an element in jquery
Jquery method to set multiple attribute values of an element: 1. Use attr() to set, the syntax "$(selector).attr({attribute name: attribute value; attribute value: attribute value...}) "; 2. Use prop() to set, the syntax is "$(selector).prop({property name:property value;property value:property value...})".
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
In jquery, you can use two methods to set attributes (values) for elements:
attr() method
prop() method
Both methods can set one or more attribute values to the element.
Let’s take a look at how to set multiple attribute values.
Method 1. Use attr() to set multiple attribute values
attr() method sets or returns the attribute value of the selected element. Depending on the parameters of the method, the way it works is also different.
Syntax:
//多个属性
$(selector).attr({属性名:属性值;属性值:属性值...})Example: Set the width and height properties of the image
<!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="How to set multiple attribute values of an element in jquery" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
2. Use prop ()Set multiple attribute values
prop() method sets or returns the attributes and values of the selected element.
When this method is used to set attribute values, one or more attribute/value pairs are set for the set of matching elements.
Grammar:
//多个属性
$(selector).prop({属性名:属性值;属性值:属性值...})Example:
<!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="How to set multiple attribute values of an element in jquery" >
<br />
<button>设置图像的 width 和 height 属性</button>
</body>
</html>
##Extended knowledge: attr() and prop() methods The difference
The prop() method is similar to the attr() method, both are used to get or set the HTML attributes of the element, but there are essential differences between the two. jQuery official recommendation: For attributes with two values of true and false, such as checked, selected, disabled, etc., it is recommended to use the prop() method to operate, while for other attributes it is recommended to use the attr() method. to operate. Example:<!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>The preview effect is shown in Figure 1.
$().change(function(){
……
})The above represents the change event in jQuery, which is the same as the onchange event in JavaScript. We will introduce it in detail later. In this example, we actually want to use $(this).attr("checked") to determine whether the radio button is selected. If it is selected, get the value of the radio button. But after running the code, I found: It has no effect at all! Why is this? In fact, we cannot obtain the checked, selected, and disabled attributes of the form element using the attr() method, but must use the prop() method. Therefore, it will work if we replace the attr() method with the prop() method. In fact, the prop() method appears to make up for the shortcomings of the attr() method in form attribute operations. Remember one sentence: If a property cannot be obtained or set using the attr() method, it can be achieved by changing the prop() method. [Recommended learning: jQuery video tutorial, web front-end video]
The above is the detailed content of How to set multiple attribute values of an element in jquery. For more information, please follow other related articles on the PHP Chinese website!