jQuery 的attr與prop的區別

問題描述

表單元素的checked、selected或disabled狀態,用attr()方法,沒法獲得想要的布爾值(true/false)。html

<!-- 下面是標準定義,也能夠直接寫checked/disabled/selected -->
<input type="checkbox" checked="checked" id="checkboxInput">
<input type="text" disabled="disabled" id="textInput">
<select>
    <option>001</option>
    <option selected="selected" id="second">002</option>
</select>
<script>
    $('#checkboxInput').attr('checked')//返回 checked
    $('#checkboxInput').prop('checked')//返回 true
    
    $('#textInput').attr('disabled')//返回 disabled
    $('#textInput').prop('disabled')//返回 true
    
    $('#second').attr('selected')//返回 selected
    $('#second').prop('selected')//返回 true
</script>
複製代碼

問題緣由

  1. 先說說attribute和property
    1. attribute是HTML元素(標籤)的屬性,是靜態的(初始化),不會響應用戶操做如:文本框輸值、點擊單/複選框等
    2. property是HTML元素(標籤)對應DOM對象的屬性,響應用戶操做。
  2. 當瀏覽器解析html代碼時,相應的DOM節點對象會被建立,節點對象上的大多數property與對應元素上的attribute有相同的名字或相近的名字,但並非一對一的關係。
  3. 像checked、selected、disabled、multiple等attribute並非對應其節點對象的property。

解決方案

用做判斷條件時:segmentfault

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
複製代碼
注: 像checked、selected、disabled、multiple都是值爲Boolean的attribute,就是說只要attribute存在,不管什麼值(沒賦值、空字符串甚至設爲"false"),其對應的property都是true。

參考連接瀏覽器

相關文章
相關標籤/搜索