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

更新時間：2017年04月25日 11:13:18 投稿：jingxian

下面小編就為大家?guī)硪黄斦刯Query中使用attr(), prop(), val()獲取value的異同。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

jQuery中有3個獲取元素value值的函數(shù)比較相似：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>

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

123
123
123

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

123
123thgf
123thgf

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

undefined

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

輸入value值后：控制臺輸出為：

undefined
asdasd
asdasd

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

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

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

您可能感興趣的文章:

相關(guān)文章

jQuery溫習(xí)篇強大的JQuery選擇器
學(xué)習(xí)jQuery已經(jīng)有1年多的時間了，但是一直由于做WinForm程序開發(fā)沒有經(jīng)常實踐?，F(xiàn)在又開始重拾WebForm開發(fā)。寫幾篇jQuery系列，溫習(xí)下jQuery框架的知識。
2010-04-04
jQuery中hover方法和toggle方法使用指南
本文重點給大家介紹了jQuery中的2個函數(shù)hover和toggle的使用方法和示例，非常的簡單實用，推薦給小伙伴們參考下。
2015-02-02
Jquery實現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實現(xiàn)地鐵線路指示燈提示牌效果的方法,實例分析了jQuery動態(tài)顯示特效的使用技巧,需要的朋友可以參考下
2015-03-03
jQuery實現(xiàn)滾動切換的tab選項卡效果代碼
這篇文章主要介紹了jQuery實現(xiàn)滾動切換的tab選項卡效果代碼,涉及jquery鏈?zhǔn)讲僮骷皹邮絼討B(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
jQuery插件Tmpl的簡單使用方法
JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經(jīng)被接受為官方的模版插件了。詳細(xì)的 API 在 jQuery 的 Templates 里，內(nèi)置的 demo 也盡情地演示了各種用法。
2015-04-04
jquery實現(xiàn)自定義圖片裁剪功能【推薦】
本文主要介紹了jquery實現(xiàn)自定義圖片裁剪功能，代碼超級簡單，易修改。下面跟著小編一起來看下吧
2017-03-03
jquery組件使用中遇到的問題整理及解決
在ASP.net中母版頁加載js文件，頁面中調(diào)用時出錯、tablesorter加載失敗等等,需要的朋友可以參考下
2014-02-02
jQuery遍歷json中多個map的方法
這篇文章主要介紹了jQuery遍歷json中多個map的方法,涉及jQuery循環(huán)的技巧與針對map的遍歷方法,需要的朋友可以參考下
2015-02-02
jquery 獲取select數(shù)組與name數(shù)組長度的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query 獲取select數(shù)組與name數(shù)組長度的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法分析
這篇文章主要介紹了jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法,結(jié)合實例形式分析了jQuery基于ajax操作json格式數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下
2016-06-06