jquery 屬性操作 attr( ) prop（）css( ）區別

一 attr () 和 prop( ) 操作屬性

談談我的總結：

1 屬性的定義，根據W3C手冊所述：屬性包括，標準屬性：id class style title 語言屬性 lang dir以及某些特定的元素的固有的屬性，比如 a 的 href target 屬性，input元素的 radio checked type alt src disabled value 等 ，img標籤的width height src alt 等，不存在的屬性叫做新增屬性。
2 attr( ) 可以設置元素的屬性（也就是給元素新增加一個原來並不存在的屬性）也可以獲取元素的本來就有的屬性以及額外設置的屬性。如果要獲取的屬性沒有設置，那麼獲取到的結果是 undefined;
3 prop( )可以設置元素的屬性（HTML固有的屬性，可以給元素添加屬性）也可以獲取元素的固有的屬性值，如果是額外設置的其他屬性，則無法通過prop（ ）獲取。
4 設置元素屬性：
attr （“屬性名”，“屬性值”） 既可以設置元素固有的屬性，也可以設置元素本來不存在的屬性，比如attr（）可以給下面代碼div行設置固有的HTML屬性，包括 ttle id class 等，也可以設置原先不存在的屬性，也就是造一個新的屬性，比如 index aaa 等，任何都行；而 prop( “屬性名”，“屬性值”)只能設置固有的HTML屬性。
獲取元素屬性值：
attr(“屬性值“）只能獲取已經設置在元素身體上的屬性值，包括固有屬性和新增屬性，沒有設置的屬性將無法獲取到值，結果全部是undefined;
prop(“屬性值”） 只能獲取固有屬性的屬性值，新增屬性的屬性值無法被獲取到。先解釋這段話的意思，看這段代碼：

    <div class="cls1 cls2" id="dv"></div>

       $("#dv").attr("index","1")//設置新增屬性
       $("#dv").attr("title","1")//設置固有屬性

設置之後div變爲

   <div class="cls1 cls2" id="dv" index="1" title="1"></div>

       console.log($("#dv").prop("title"));//輸出結果  1
       console.log($("#dv").prop("index"));//輸出結果  undefined

二 擼一段代碼來解釋一下

A 對於固有的HTML屬性
html代碼

    <div class="cls1 cls2" id="dv" title="我是一個div"></div>

jquery代碼（輸出html代碼裏面有的屬性，attr只能獲取class id title ，prop可以獲取沒有設置的屬性 比如style）

       console.log($("#dv").prop("title"));
       console.log($("#dv").attr("title"));

       console.log($("#dv").prop("style"));
       console.log($("#dv").attr("style"));

控制檯輸出
(可以獲取HTML固有的屬性值）

我是一個div
我是一個div
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
undefined

由此可見，1 對於固有的HTMl屬性，如果在元素中設置了，那麼attr 和 prop 都可以獲取的到
2 對於固有的HTMl屬性，如果在元素中沒有設置，那麼 attr 獲取的結果是undefined 而prop可以獲取那個屬性的值。
在來看一個簡單的例子

html代碼

    <input type="checkbox" value="複選框" id="chk"/>這是一個複選框

這段代碼裏面並沒有設置checked屬性值（checked 屬性對應值有兩個 true false）

jquery代碼（輸出html代碼裏面有的屬性，attr只能獲取type value id，prop可以獲取沒有設置的屬性 比如checked ）

       console.log($("#chk").prop("value"));
       console.log($("#chk").attr("value"));

       console.log($("#chk").prop("checked"));
       console.log($("#chk").attr("checked"));

輸出結果：
點擊複選框之前輸出如下：

                    複選框
                    複選框
                    false
                    undefined

點擊複選框之後輸出如下：

                 複選框
                 複選框
                 true
                 undefined

總結：
1 如果想要通過attr()獲取屬性值，那麼該屬性必須顯式的設置在HTML代碼中或者通過attr新增的屬性才能被獲取到，如果沒有設置，那麼將返回undefined
2 如果通過prop（）獲取屬性值，那麼該屬性只能是HTMl的固有屬性，無論是否顯式的設置，都可以獲取其對應的屬性值，如果是額外增加的屬性，那麼將無法獲取。下面來說這個問題

html代碼：

        <div class="cls1 cls2" id="dv" title="我是一個div"></div>

jquery代碼

       $("#dv").attr("index","1")//通過attr給元素設置新的屬性，W3C原來不存在的屬性
       console.log($("#dv").prop("index"));
       console.log($("#dv").attr("index"));

代碼執行後：

<div class="cls1 cls2" id="dv" title="我是一個div" index="1"></div>

控制檯輸出：

    undefined
    1

三 加點福利吧 css( ）

    jquery代碼

        console.log($("#dv").prop("style"));
       console.log($("#dv").attr("style"));
       console.log($("#dv").css("width"));

給div添加一些樣式，無論該樣式是內嵌式
html代碼：

    <div class="cls1 cls2" id="dv" title="我是一個div" style="width:100px;height: 50px;background-color:pink;"></div>

控制檯輸出
CSSStyleDeclaration {0: “width”, 1: “height”, 2: “background-color”, alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…}
width:100px;height: 50px;background-color:pink;
100px

或者內聯式
    <style>
        .cls1 {
            width: 100px;
            height: 50px;
            background-color: pink;
        }
    </style>
    div class="cls1 cls2" id="dv" title="我是一個div"></div>

控制檯輸出 ：

CSSStyleDeclaration {alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…}
undefined
100px

小結：注意區分，屬性 和 樣式屬性 平常說的屬性包括id class style lang dir title等，然後注意樣式屬性指的是設置在 style 屬性裏面或者 style 標籤裏面的 ，不要搞混.css() 只能獲取是 style 裏面的屬性值；
注意語法：獲取style樣式屬性值：對象.css(“屬性名”），設置style樣式屬性值： 對象.css(“屬性名”，“屬性值”）雙引號必不可少

四 在DOM中獲取元素屬性的文章可參閱 http://blog.csdn.net/qq_35809245/article/details/54146996

五 歡迎閱讀，你辣麼美麗和勤奮，祝你開心！