How to set attributes to elements in jquery-Front-end Q&A-php.cn

How to set attributes to elements in jquery

青灯夜游

Release： 2022-03-10 18:42:11

Original

7064 people have browsed it

Setting method: 1. Use attr() method, syntax "$(selector).attr(attribute name, value)" or "$(selector).attr({attribute name: value;})" ;2. Use the prop() method, the syntax is "$(selector).prop(property name, value)".

How to set attributes to elements in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery sets attributes to elements

1. Use the attr() method

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(属性名,值)

//多个属性
$(selector).attr({属性名:值;属性值:值...})

Copy after login

2. Use the prop() method

The 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(属性名,值)
//多个属性
$(selector).prop({属性名:值;属性值:值...})

Copy after login

3. The difference between attr() and prop() methods

The prop() method is similar to the attr() method. Both are used to get or set the HTML attributes of elements, but they are also fundamentally different.

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 attributes to elements 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 attributes to elements in jquery. For more information, please follow other related articles on the PHP Chinese website!