极客笔记jQuery prop()方法
jQuery prop()方法用于两个目的。
- 它用于返回一组匹配元素中第一个元素的属性值。
- 它用于设置一组匹配元素的一个或多个属性值。
jQuery prop()方法通常用于检索属性值，如DOM属性（如tagName、nodeName、defaultChecked）或自定义属性。这是一种非常方便的设置属性值的方式，特别是多个属性。
如果您想要检索HTML属性，应该使用attr()方法。
removeProp()方法用于删除属性。
语法：
返回属性值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
通过使用函数来设置属性和值：
$(selector).prop(property,function(index,currentvalue))
同时设置多个属性和值：
$(selector).prop({property:value, property:value,...})
jQuery prop()方法的参数
| 参数 | 描述 |
|---|---|
| Property | 它指定属性的名称。 |
| Value | 它定义属性的值。 |
| Function(index, currentvalue) | 它指定一个返回要设置的属性值的函数。 |
- Index: 它提供了元素在集合中的索引位置。
- Currentvalue: 它提供了所选元素的当前属性值。
jQuery prop()方法的示例1
让我们看一个jQuery prop()方法的简单示例。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
(document).ready(function(){("button").click(function(){
var x =("div");
x.prop("color","#e0eeee");x.append("The value of the color property: " + x.prop("color"));x.removeProp("color");
x.append("<br>Now the value of the color property: " +x.prop("color"));
});
});
</script>
</head>
<body>
<button>Add and remove a property</button><br><br>
<div></div>
</body>
</html>
jQuery prop()方法的示例2
让我们看一个jQuery prop()方法的另一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prop demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
( "input" ).change(function() {
varinput = ( this );( "p" ).html(
".attr( \"checked\" ): <b>" + input.attr( "checked" ) + "</b><br>" +
".prop( \"checked\" ): <b>" +input.prop( "checked" ) + "</b><br>" +
".is( \":checked\" ): <b>" + $input.is( ":checked" ) ) + "</b>";
}).change();
</script>
</body>
</html>
jQuery的attr()方法和prop()方法之间的区别
这是一个非常常见的问题，因为大多数人对何时使用prop()方法和何时使用attr()方法感到困惑。它们之间的区别在特定的情况下非常重要。
以下是它们之间的确切区别：
- jQuery的attr()方法用于检索HTML属性的值，而prop()方法用于检索属性的值。
- attr()方法更改HTML标签的属性，而prop()方法根据DOM树更改HTML标签的属性。
- 属性通常比属性简单，因此大多数情况下更常使用jQuery的prop()方法而不是attr()方法。