詳談jQuery中使用attr(), prop(), val()獲取value的異同

發(fā)布時(shí)間：2020-10-05 06:40:13 來(lái)源：腳本之家閱讀：173 作者：jingxian 欄目：web開(kāi)發(fā)

jQuery中有3個(gè)獲取元素value值的函數(shù)比較相似：attr(), prop(), val()；拿來(lái)比較一下。　

示例代碼：

<!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>

代碼如上所示，為輸入框設(shè)定了初始值：123，此時(shí)點(diǎn)擊按鈕，控制臺(tái)輸出為：

123
123
123

改變輸入框的值，此時(shí)控制臺(tái)輸出：　　　

123
123thgf
123thgf

如果我們沒(méi)有為文本框設(shè)定初始值，即刪除value=”123”后，依舊使用如上js代碼，則相應(yīng)輸出如下：

undefined

attr()輸出為undefined，而prop()和val()輸出為“空”。

輸入value值后：控制臺(tái)輸出為：

undefined
asdasd
asdasd

attr()輸出依然為undefined，而prop()和val()則輸出實(shí)際值。

可見(jiàn)，prop()和val()都能獲取到文本框的實(shí)際value值，而attr()獲取的則始終為文檔結(jié)構(gòu)中的value的屬性值，與文本框?qū)嶋H值無(wú)關(guān)，并不會(huì)變化。

以上這篇詳談jQuery中使用attr(), prop(), val()獲取value的異同就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

詳談jQuery中使用attr(), prop(), val()獲取value的異同

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽