jquery对属性和特性的操作

attribute(特性)和property(属性)是两个不同的概念。attribute表示HTML文档节点的特性,property表示DOM元素的属性

这些属性例如selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected,而不是特性

示例一:
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

var link = document.getElementById('fooAnchor');

//dom api方式取值
alert(link.href);// "http://example.com/foo.html"  -属性
alert(link['href']; // "http://example.com/foo.html"  -属性
alert(link.getAttribute("href")); //  "foo.html"  -特性

//jquery方式取值
$("#fooAnchor").prop("href") //"http://example.com/foo.html"
$("#fooAnchor").attr("href") //foo.html

由此可以看到,属性值和特性值的区别

示例二

<input id="cb" type="checkbox" checked='checked'>

var ele=document.getElementById("cb");
//DOM API取值
ele.checked //true

//jquery取值 (jquery1.6以后的版本

$(ele).attr("checked")  //"checked" 不推荐

$(ele).prop("checked") //true 推荐

由此可以看到,属性值和特性值的区别

//DOM API 赋值

ele.checked=false;

//jquery赋值
$(ele).attr("checked",'checked') //不推荐
$(ele).prop("checked", false) //推荐

注意赋值后,在html中的表现形式 checked='checked'  selected="selected" 

//prop可以取出特性中没有但是属性存在的值
$(ele).attr('readonly') //undefined ,标签里不包含此特性
$(ele).prop('readonly') //false ,readonly是input元素的固有属性

$(ele).attr('required') //undefined ,标签里不包含此特性
$(ele).prop('required') //false ,required是input元素的固有属性

总结:

attribute(特性)和property(属性)是两个不同的概念

jquery对DOM元素属性值是 true 和 false属性 ,如 checked, selected 或者 disabled,readonly 使用prop(),其他的使用 attr()

原文地址:https://www.cnblogs.com/imust2008/p/7239114.html