jquery中attr()與prop()區別

時間 2019-12-11

原文原文鏈接

　　咱們知道jquery中獲取元素屬性有兩種常見的方法，一個是attr()方法，這個是用的比較多的，也是咱們第一個想到的。另一個就是prop()方法了，這個方法以前不多用到，它是jquery1.6以後新增的方法。那麼這兩個方法都是獲取屬性的，那麼神馬區別呢？閒話很少說，下面咱們就來講說。jquery

　　首先從單詞解釋來講attr和prop分別是單詞attribute和property的縮寫，它們均表示「屬性」的意思。下面咱們看一個簡單的例子。瀏覽器

<body>
    <input type="text" id="inputs" value="name">
    <script >
    $("#inputs").focusout(function(){
        var inputVal = $(this).attr("value"); 
        alert(inputVal);
    });
    </script>
</body>

　　一個簡單的輸入框，咱們想獲取用戶輸入後的value，而後我就寫了上面一段代碼。打開瀏覽器測試後發現，無論我輸入什麼值，彈出的始終是name，也就是value的初始值。同一個輸入框咱們再用prop()方法試試。測試

<body>
    <input type="text" id="inputs" value="name">
    <script >
    $("#inputs").focusout(function(){
        var inputVal = $(this).prop("value");  
        alert(inputVal);
    });
    </script>
</body>

　　咱們發現此次我輸入什麼就會彈出什麼，這纔是我想要的效果。若是這個例子不能說明什麼，那麼咱們再來看看下面這個例子。this

<body>
    <input type="checkbox" id="testBox">
    <script>
        console.log($('#testBox').attr('checked'));  // undefined
        console.log($('#testBox').prop('checked'));  // false
    </script>
</body>

　　一個單選框，我想知道它是否被選中，而後我就獲取他的checked值，這個時候我發現使用attr()方法返回的是undefined，而使用prop()方法就能夠正確獲取一個布爾值。這是爲何呢？spa

　　對於某個 DOM 節點對象，properties 是該對象的全部屬性，而 attributes 是該對象對應元素(標籤)的屬性。當一個DOM 節點爲某個 HTML 元素所建立時，其大多數 properties 與對應 attributes 擁有相同或相近的名字，但這並非一對一的關係。code

對於第一個例子來講，對象

　　id:property獲取的id是attribute上id的映射：獲取該 property 即等於讀取其對應的 attribute 值，而設置該 property 即爲 attribute 賦值。blog

　　type: property 是 attribute 的映射：獲取該 property 即等於讀取其對應的 attribute 值，而設置該 property 即爲 attribute 賦值。但type 並非一個純粹的映射 property，由於它的值被限制在已知值（即 input 的合法類型，如：text、password）。若是你有 <input type="aaa">，而後 theInput.getAttribute("type") 會返回 "aaa"而 theInput.type 會返回 "text"。ip

　　 value:property 並不會映射 value attribute。取而代之的是 input 的當前值。當用戶手動更改輸入框的值，value property 會反映該改變。 property 反映了 input 的當前文本內容，而 attribute 則是在 HTML 源碼 value 屬性所指定的初始文本內容。get

對於表單的那個例子，attr() 方法對於未設置的 attributes都會返回 undefined。checked attribute 的值並不會隨着 checkbox 的狀態而做出相應改變，而 checked property 會。所以，當判斷一個 checkbox 是否被選擇時應該使用 property。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。