在jQuery中,prop()
函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()
函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
当然,在jQuery的底层实现中,函数attr()
和prop()
的功能都是通过JS原生的Element对象(document.getElementById("ID"))实现的。attr()
函数主要依赖的是Element对象的getAttribute()
和setAttribute()
两个方法。prop()
函数主要依赖的则是JS中原生的对象属性获取和设置方式。
------------------------------↓ 划重点 ↓-----------------------------
在jQuery 1.6之前,只有attr()
函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()
也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()
函数,并用来承担property的设置或获取工作之后,attr()
才只用来负责attribute的设置和获取工作。
此外,对于表单元素的checked
、selected
、disabled
等属性,在jQuery 1.6之前,attr()
获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true
,否则返回false
。
但是从1.6开始,使用attr()
获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checked
、selected
或disabled
,否则(即元素节点没有该属性)返回undefined
。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。
因为jQuery认为:attribute的checked
、selected
、disabled
就是表示该属性初始状态的值,property的checked
、selected
、disabled
才表示该属性实时状态的值(值为true
或false
)。
因此,在jQuery 1.6及以后版本中,请使用prop()
函数来设置或获取checked
、selected
、disabled
等属性。对于其它能够用prop()
实现的操作,也尽量使用prop()
函数。
<div id="yearDiv" style="float: left"> <input type="checkbox" id="2016" checked="checked" style="width:20px;vertical-align: middle;" onclick="selectchanged();" /> <label for="2016" style="font-size: 13px; ">2016</label> <span> </span> <input type="checkbox" id="2015" checked="checked" style="width:20px;vertical-align: middle;" onclick="selectchanged();" /> <label for="2015" style="font-size: 13px; ">2015</label> <span> </span> <input type="checkbox" id="2014" style="width:20px;vertical-align: middle;" onclick="selectchanged();" /> <label for="2014" style="font-size: 13px; ">2014</label> <span> </span> <input type="checkbox" id="2013" style="width:20px;vertical-align: middle;" onclick="selectchanged();" /> <label for="2013" style="font-size: 13px; ">2013</label> <span> </span> </div>
全选中的js方法:
function AllSelect() { $("#yearDiv input[type='checkbox']").each(function () { $(this).prop("checked", true); }); };