详解jQuery中的prop()使用方法

2020-05-24 21:39:53易采站长站整理

prop()定义和用法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。

提示:如需检索 HTML 属性,请使用 attr() 方法代替。

提示:如需移除属性,请使用 removeProp() 方法。

prop() 语法

返回属性的值:

$(selector).prop(property)

设置属性和值:

$(selector).prop(property,value)

使用函数设置属性和值:

$(selector).prop(property,function(index,currentvalue))

设置多个属性和值:

$(selector).prop({property:value, property:value,…})

参数描述
property规定属性的名称。
value规定属性的值。
function(index,currentvalue)规定返回要设置的属性值的函数。

index – 检索集合中元素的 index 位置。
currentvalue – 检索被选元素的当前属性值。

实例

添加并移除名为 “color” 的属性:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>软件开发网</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("color 属性值为: " + $x.prop("color"));
$x.removeProp("color");
$x.append("<br>现在 color 属性值为: " + $x.prop("color"));
});
});
</script>
</head>
<body>

<button>添加和删除属性</button>
<br><br>
<div></div>

</body>
</html>

prop() 和 attr() 之间的不同

prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 “checked” 状态时的不同。

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。

但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

1、操作对象不同
很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示”属性”的意思。