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