前端JQuery操作屬性方法之prop()、attr()和data()

jQuery提供了一些屬性操作的方法，主要包括prop()、attr()和data()等。通過(guò)這些方法，能夠?qū)崿F(xiàn)不同的需求。下面我們分別進(jìn)行詳細(xì)講解。

1.prop()方法

prop0方法用來(lái)設(shè)置或獲取元素固有屬性值。元素固有屬性是指元素本身自帶的屬性，如<a>標(biāo)簽的href屬性。具體語(yǔ)法示例如下：

$(selector).prop("屬性名")                        //獲取屬性值
$(selector).prop("屬性“,“屬性值")               //設(shè)置屬性值

下面我們通過(guò)代碼演示prop()方法的使用。

<a href="http://localhost" title="主頁(yè)"></a>
<script>
  console.log($("a").prop("href"));              //輸出結(jié)果：http://localhost
  $("a").prop("title","首頁(yè)");                   //設(shè)置title的值為“首頁(yè)”
</script>

在上述代碼中，第3行代碼用于獲取<a>標(biāo)簽的href屬性，輸出到控制臺(tái)中。第4行代碼用于設(shè)置<a>標(biāo)簽的title屬性，將屬性值設(shè)為“首頁(yè)”。

在開(kāi)發(fā)中，還會(huì)經(jīng)常使用prop(‘屬性’)獲取表單元素的checked值，示例代碼如下：

<input type="checkbox"checked>
<script>
  //獲取表單元素的checked值
  $("input").change(function() {
   console.log($(this).prop("checked")); //復(fù)選框選中時(shí),輸出結(jié)果為true
  });
</seript>

上述代碼中，第1行代碼設(shè)置了input 的type值為checkbox，表示復(fù)選框。第4行代碼給input綁定了change事件，當(dāng)表單元素狀態(tài)發(fā)生變化時(shí)觸發(fā)。如果復(fù)選框處于選中狀態(tài)，則輸出結(jié)果為true，否則輸出false。

2. attr()方法

Attr()用來(lái)設(shè)置或獲取元素的自定義屬性，自定義屬性是指用戶(hù)給元素添加的非固有屬性。例如，給div添加index屬性，保存元素的索引值。具體語(yǔ)法如下。

$(selector).attr("屬性名")                   // 獲取屬性值
$(selector).attr(”屬性", “屬性值“)        // 設(shè)置屬性值

下面我們通過(guò)代碼演示attr()方法的使用，如下所示。

<div index="1" data-index="2">我是div</div>
<script>
  console.log($("div").attr("index"));       // 輸出結(jié)果：1
  console.log($("div").attr("data-index"));  // 輸出結(jié)果：2
  $("div").attr("index", 3);                 // 設(shè)置index的屬性值為3
  $("div").attr("data-index", 4);            // 設(shè)置data-index屬性值為4
</script>

在上述代碼中，div的index屬性是一個(gè)普通的自定義屬性，data-index是HTML5的自定義屬性(以“data-”開(kāi)頭)，使用atr()方法都可以進(jìn)行設(shè)置或獲取。需要注意的是，自定義屬性無(wú)法使用prop()設(shè)置和獲取。

3. data()方法

data()方法用來(lái)在指定的元素上存取數(shù)據(jù)。數(shù)據(jù)保存在內(nèi)存中，并不會(huì)修改DOM元素結(jié)構(gòu);一旦頁(yè)面刷新，之前存放的數(shù)據(jù)都將被移除。具體語(yǔ)法如下：

$(selector).data("數(shù)據(jù)名")                   // 獲取數(shù)據(jù)
$(selector).data("數(shù)據(jù)名"，"數(shù)據(jù)值")         // 設(shè)置數(shù)據(jù)

下面我們演示通過(guò)data()方法實(shí)現(xiàn)數(shù)據(jù)的操作，示例代碼如下。

<div>我是div</div>
<script>
  $ ("div").data("uname","andy");           // 設(shè)置數(shù)據(jù)
  console.log ($("div").data("uname"));     // 獲取數(shù)據(jù)，輸出結(jié)果：andy
</script>

上述代碼運(yùn)行后，umame會(huì)保存到內(nèi)存中，不會(huì)出現(xiàn)在HTML結(jié)構(gòu)中。

使用data()方法還可以讀取HTML5自定義屬性data-index，示例代碼如下：

<div index="1"data-index="2">我是div</div>
<script>
  console.log($("div").data("index"))；//輸出結(jié)果：2
</script>

在上述代碼中，第3行用來(lái)獲取data-index屬性，屬性名中不需要“data-”前綴，并且返回的結(jié)果是數(shù)字型。