首頁 > 文章 > web前端 > jQuery中使用attr(), prop(), val()來取得value的異同詳解

jQuery中使用attr(), prop(), val()來取得value的異同詳解

小云云原創: 2018-01-17 11:26:301918瀏覽

本文主要為大家帶來一篇詳談jQuery中使用attr(), prop(), val()取得value的異同。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

jQuery中有3個取得元素value值的函數比較相似：attr(), prop(), val()；拿來比較一下。

範例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

  $("#btn").click(function(){
    var attr=$("input").attr("value");
    var prop=$("input").prop("value");
    var val=$("input").val();
    console.log(attr);
    console.log(prop);
    console.log(val);
  })
</script>
</body>

程式碼如上所示，為輸入框設定了初始值：123，此時點選按鈕，控制台輸出為：

123
123
123

改變輸入框的值，此時控制台輸出：　　　

123
123thgf
123thgf

如果我們沒有為文字方塊設定初始值，也就是刪除value=”123」後，依舊使用如上js程式碼，則對應輸出如下：

#undefined

attr()輸出為undefined，而prop()和val()輸出為「空」。

輸入value值後：控制台輸出為：

undefined
asdasd
asdasd

attr()輸出仍為undefined，而prop()和val( )則輸出實際值。

可見，prop()和val()都能取得到文字方塊的實際value值，而attr()取得的則總是為文件結構中的value的屬性值，與文字方塊實際值無關，並不會改變。

jQuery中使用attr(), prop(), val()來取得value的異同詳解

相關文章