Jquery屬性獲取——attr()與prop()

今天在項目中使用<select></select>下拉菜單時，使用juery操做，使頁面加載完菜單默認選中的值爲2,我一開始的操做以下：

<!--html部分-->
<select>
   <option value="1">1</option>
   <option value="2" id="second">2</option>
   <option value="3">3</option>
</select>

/**js部分**/
$("#second").attr("selected","selected");

咋一看好完美，木問題，可是我發如今Safari瀏覽器中，根本不起做用！！仔細查看一番發現,在Safari瀏覽器中，屬性確實是設置成功了，既value=2的那一項確實是<option value="2" selected="selected">2</option>。那問題出在哪呢？冷靜，不要方，萬能的stack說只要把attr改爲prop就好了，臥槽還真行了，這是啥詭異事件。好吧，咱們須要來研究研究了,不用想，確定是須要祭出官方文檔了。

1. attr() ： 獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每個匹配元素的一個或多個屬性。
   • .attr( attributeName )
     • .attr( attributeName )
   • .attr( attributeName, value )
     • .attr( attributeName, value )
     • .attr( attributes )
     • .attr( attributeName, function(index, attr) )
2. prop() ： 獲取匹配的元素集中第一個元素的屬性（property）值或設置每個匹配元素的一個或多個屬性。
   • .prop( propertyName )
     • .prop( propertyName )
   • .prop( propertyName, value )
     • .prop( propertyName, value )
     • .prop( properties )
     • .prop( propertyName, function(index, oldPropertyValue) )

看出區別了嗎，沒錯，是參數有區別，attr()傳入的是attributeName，而prop()傳入的是propertyName,如今咱們的問題轉移了，咱們須要研究的是attributeName和propertyName之間的區別了。

Attributes vs. Properties

在這裏，咱們能夠將attribute理解爲「特性」，property理解爲「屬性」從而來區分倆者的差別。
若是把DOM元素當作是一個普通的Object對象，這個對象在其定義時就具備一些屬性（property），好比把select的option當作一個對象：

var option = {
    selected:false，
    disabled:false，
    attributes:NamedNodeMap,
    ...
}

如今，咱們一目瞭然了，attribute是一個特性節點，每一個DOM元素都有一個對應的attributes屬性來存放全部的attribute節點，它是一個叫作NameNodeMap的對象。attributes的每一個數字索引以名值對(name=」value」)的形式存放了一個attribute節點。而property就是一個屬性，是一個以名值對(name=」value」)的形式存放在Object中的屬性。

上例中<option value='2' selected>2</option>的property爲{0: value, 1: selected, length: 2}

回到一開始的問題，根據W3C的表單規範 ，在selected屬性（property）是一個布爾屬性， 這意味着,若是這個特性（attribute）存在， 即便該特性沒有對應的值，或者被設置爲空字符串值，或甚至是"false"，相應的屬性（property）都仍是爲true。 selected特性（attribute）值不會由於複選框的狀態而改變，而selected屬性（property）會由於複選框的狀態而改變。所以，跨瀏覽器兼容的檢索和更改DOM屬性,好比元素的checked, selected, 或 disabled狀態，請使用.prop()方法。

爲何會搞混？

之因此attribute和property容易混倄在一塊兒的緣由是，不少attribute節點還有一個相對應的property屬性，好比DOM元素的id和class既是attribute，也有對應的property，無論使用哪一種方法均可以訪問和修改。