Attribute manipulation

JQuery encapsulates some HTML tag attribute operations, which can be used to simplify the operation of HTML tags in native JS. If these encapsulated methods are classified, they can be roughly divided into operations applicable to general attributes (general) and specific operations For the operations of class attributes , the following are commonly used:

General attribute operations

attr: This is generally used not to check some attributes of DOM state, such as src, some attributes related to CSS, etc.
- JQuery object.attr("attribute name", "value"): Get the value of the attribute when there is only one parameter, and set the value of the attribute when entering and exiting the value parameter.
- JQuery object.removeAttr("attribute name"): Remove the corresponding attribute from the corresponding component.
- Syntax: $(selector).attr("key", "value");
  
  Example:
```
var src = $("img").attr("src");	//获取值
$("img").attr("src", img_path);	//设置值
$("img").removeAttr("src");		//移除src属性
```
prop: Generally used for the operation of checked, disabled, selected and other attributes in the component.
- JQuery object.prop("property name", "value"): Get the value of the property when there is only one parameter, and set the value of the property when entering and leaving the value parameter.
- JQuery object.removeProp("property name"): Remove the corresponding property from the corresponding component.
- Syntax: $(selector).prop("key", "value");
  
  Example:
```
<input type="checkbox" checked="checked" />
<script>
	$("input").prop("checked");	//获取checkbox的选中状态
    $("input").prop("checked", false); //设置为没有选中状态
    $("input").prop({
         
         checked:false});	//使用对象的方式也是可行的
    $("input").removeProp("checked"); //移除由.prop设置的属性
</script>
```

Regarding the effect of prop and attr on some built-in attributes: Take this as an example, the right side of the table is the return value of the method:

`elem.checked`	`true` (Boolean) will change as the state of the checkbox changes
`$(elem).prop("checked")`	`true` (Boolean) will change as the state of the checkbox changes
`$(elem).getAttribute("checked")`	`"checked"` (String) the initial state of the checkbox; will not change
`$(elem).attr("checked")` (1.6)	`"checked"` (String) the initial state of the checkbox; will not change
`$(elem).attr("checked")` (1.6.1+)	`"checked"` (String) will change as the state of the checkbox changes
`$(elem).attr("checked")` (pre-1.6)	`true` (Boolean) will change as the state of the checkbox changes

Note: In the 1.x version, attr can be set to obtain built-in attributes such as checked, but the new version 3.x no longer allows it. It can only be obtained with props, so when operating on built-in attributes It is recommended to use prop for operation.

Class attribute operation

You can use the encapsulation method in JQuery to easily add attribute values to the component class attribute, such as adding multiple CSS classes to add styles to the component. Commonly used are:

$(selector).addClass("className"): will add the class attribute value of the object to the corresponding object.
$(selector).removeClass("className"): delete the class attribute value of the object.
$(selector).toggleClass("className"): Change the state of the object's class attribute value. If the value already exists, delete the value, if not, add the value, which can be used to flip the attribute. -"Click the button property to change the style~
$(selector).css(key, value): Set the style of the element.

Example:

<style>
    .class1{
     
     width:100px; height:100px;}
    .class2{
     
     border:1px solid blue; border-radius:10%;}
    .class3{
     
     backgound-color:pink;}
</style>

<script>
    //一般适用时都是通过对应的方法来进行动态设置样式
   
	$("div").addClass("class2");	//添加class2样式
    $("div").removeClass("class1");	//移除class1样式
    $("div").toggleClass("class3");	//由于div中class属性中原本没有class3值，则会添加
	$("div").css("backgroundColor", "yellow");	//设置背景色为yellow
</script>

<body>
    <div class="class1">
        这是一个div
    </div>
</body>

Attribute value manipulation

$(selector).html(): Get the html value of the element, the same as innerHTML in the JS native object,
$(selector).text(): Get the text value of the element
$(selector).val("value"): When the value parameter is passed, the value of the value attribute can be set, if not, the value of the value attribute can be obtained, which can be used in the input tag

The difference between .html() and .text():

<div><p>“这片大海不可能一直自己一个人的”</p></div>
<input value="">
<script>
	$("div").html();	//会获取div内置中所有的内容，即整个p标签
    $("div").text();	//只会获取“这片大海不可能一直自己一个人的” 这段文本内容
    $("input").val("hello jquery");	//可以设置input输入框的内容为 hello jquery
</script>

More content can be viewed: Attribute operation official document
JQuery local document download: CSDN download
JQuery various versions download: CSDN download

JQuery (2) attribute operation

Attribute manipulation

General attribute operations

Class attribute operation

Attribute value manipulation

Guess you like