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()