How to set multiple attribute values of an element in jquery-Front-end Q&A-php.cn

How to set multiple attribute values of an element in jquery

青灯夜游

Release： 2023-01-28 14:23:41

Original

2003 people have browsed it

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...})".

How to set multiple attribute values of an element in jquery

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({属性名:属性值;属性值:属性值...})

Copy after login

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>

Copy after login

How to set multiple attribute values of an element in jquery

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({属性名:属性值;属性值:属性值...})

Copy after login

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>

Copy after login

How to set multiple attribute values of an element in jquery

##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 () {
            $(&#39;input[type="radio"]&#39;).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>

Copy after login

The preview effect is shown in Figure 1.

How to set multiple attribute values of an element in jquery

Analysis

$().change(function(){
    ……
})

Copy after login

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!

How to set multiple attribute values ​​​​of an element in jquery

How to set multiple attribute values of an element in jquery