前言#
官方文档:http://api.jquery.com
参考:http://www.365mini.com/page/jquery-attr-vs-prop.htm
http://www.365mini.com/page/jquery-prop.htm
问题来源###
在 segmentfault论坛看到了这样的回答
学库的时候少看书,多看官方文档。书的印刷、出版速度往往远远跟不上库的改进速度
- attr方法和prop方法早在1.6(2011年)就已经分离了,checked绝大多数情况应当使用prop操作
- jQuery多数提供value的api都可以通过callback直接实现不同元素赋不同值
//反选
$('[name=items]:checkbox').prop('checked', function(idx, val){ return !val; })
正文#
概念###
prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。
如果需要删除DOM元素的属性,请使用removeProp()函数。
语法:###
用法一:###
jQueryObject.prop( propertyName [, value ] )
参数value还可以是函数
用法二:###
jQueryObject.prop( object )
以对象形式同时设置任意多个属性的值
注意:prop()函数的所有"设置属性"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取属性"的操作只针对第一个匹配的元素。
jQuery函数attr()和prop()的区别###
1. 操作对象不同##
在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。
<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>
在jQuery的底层实现中,
attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value )
prop()依赖的是JS原生的 element[property] 和 element[property] = value;
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */
// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);
// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145
/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */
// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");
// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>
此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的id,property的className对应attribute的class。
<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);
document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>
2. 应用版本不同##
3. 用于设置的属性值类型不同##
由于attr()
函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()
方法,将其转为字符串类型。
prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。
4、其他细节问题##
详见参考部分的链接