Article directory
foreword
Both attr() and prop() have the function of setting and getting attribute values, but they are still different, let’s explain it belowHow to use both methods
- For the operation of checked, readOnly, selected, disabled and other attributes, use the prop() method
- Other attribute operations use the attr() method
1. attr() usage
The following is the correct use of attr()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
alert($(":checkbox:first").attr("value")) //获取value值
$(":checkbox:first").attr("value","checkboxone") //设置value属性值
alert($(":checkbox:first").attr("value")) //再次获取观察变化
})
</script>
</head>
<body>
<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
<input type="checkbox" value="checkbox2" />checkbox2
<input type="checkbox" value="checkbox3" />checkbox3
</body>
</html>
operation result
If you use the attr() method to operate checked and other attributes, an abnormal display will appear. Let me explain with an example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
alert($(":checkbox").attr("checked"))
alert($("#checked").attr("checked"))
})
</script>
</head>
<body>
<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
<input type="checkbox" value="checkbox2" id="checked" />checkbox2
<input type="checkbox" value="checkbox3" />checkbox3
</body>
</html>
The first one has the checked attribute, and the second one is not selected.
The running result
shows the content of the attribute.
It can be seen that it is not easy to judge whether it is selected or not.
2. prop() usage
The same code just change the method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
alert($(":checkbox").prop("checked"))
alert($("#checked").prop("checked"))
})
</script>
</head>
<body>
<input type="checkbox" value="checkbox1" checked="checked"/>checkbox1
<input type="checkbox" value="checkbox2" id="checked" />checkbox2
<input type="checkbox" value="checkbox3" />checkbox3
</body>
</html>
Running results
Here, if selected, it will display true, and if it is not selected, it will display false, which has a high degree of discrimination, so it is the recommended method to operate this type of attribute.
