jQuery的屬性操作模塊總共有4個部分，本篇說一下最后一個部分:val值的操作，也是屬性操作里最簡單的吧，只有一個API，如下:
- val(vlaue) ;獲取匹配元素集合中第一個元素的當前值，或者設定匹配元素集合中每個元素的值，有三種用法:
- val() ;沒有引數，獲取第一個匹配元素的當前值
- val(value) ;為每個匹配元素設定value值 ;如果為null則表示設定值為空
- val(func) ;設定每個匹配元素為函式func回傳的值 ;該函式接受兩個引數:分別是當前元素在集合中的下標和當前value值，
就是修改DOM元素的value屬性，常用于 設定/獲取 輸入框里的值，舉個栗子:
writer by:大沙漠 QQ:22969969
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> .color{color: #f00;} .back{background: #ccc;} </style></head><body> <input type="text" id="input"> <button id="b1">設定值</button> <button id="b2">獲取值</button> <script> let b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); b1.onclick = ()=> $('input').val(123) b2.onclick = ()=> console.log($('input').val()) </script> </body></html>
渲染如下:
我們設定了一個輸入框，然后添加了兩個按鈕，分別用于設定值和獲取值，點擊設定值后會呼叫$('input').val(123)去設定對應的值123，如下:
點擊獲取值時就會獲取該輸入框的值，控制臺輸入如下:
一般在提交表單的時候，可以通過val()去獲取值，在進行驗證的時候，比如某個輸入框只能填寫數字，如果發現用戶輸入了非數字的字符，我們過濾后可以再呼叫val(v)去設定一下值，
原始碼分析
val()的實作比較簡單，如下:
jQuery.fn.extend({ val: function( value ) { //獲取匹配元素集合中第一個元素的當前值，或者設定匹配元素集合中每個元素的值， var hooks, ret, isFunction, elem = this[0]; //elem是第一個匹配元素的參考 if ( !arguments.length ) { //如果未傳入引數，則獲取第一個匹配元素的當前值 if ( elem ) { hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; //如果需要修正，則修正該值 if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { return ret; } ret = elem.value; return typeof ret === "string" ? //否則直接讀取DOM屬性value // handle most common string cases ret.replace(rreturn, "") : // handle cases where value is null/undef or number ret == null ? "" : ret; } return; } isFunction = jQuery.isFunction( value ); //value是否為函式 return this.each(function( i ) { var self = jQuery(this), val; if ( this.nodeType !== 1 ) { //如果當前元素不是元素節點,則直接回傳 return; } if ( isFunction ) { //如果value是函式，則在每個匹配元素上執行該函式，并取其回傳值作為待設定的值， val = value.call( this, i, self.val() ); //在函式內部，this指向當前元素，函式有兩個引數，分別是當前元素在集合中的下標和當前value值， } else { val = value; } // Treat null/undefined as ""; convert numbers to string if ( val == null ) { //如果val是null,則轉換為空字串 val = ""; } else if ( typeof val === "number" ) { //如果val是數字格式,則/轉換為字串 val += ""; } else if ( jQuery.isArray( val ) ) { //如果val是陣列格式 val = jQuery.map(val, function ( value ) { //則呼叫jQuerymap將val轉化為字串最后回傳 return value =https://www.cnblogs.com/greatdesert/p/= null ? "" : value + ""; }); } hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; // If set returns undefined, fall back to normal setting if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { //優先呼叫對應的修正物件的修正方法set() this.value = https://www.cnblogs.com/greatdesert/p/val; //如果沒有修正物件，則直接設定value值， } }); }, /*略*/})
就是設定/獲取對應DOM物件參考的value值來實作的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34133.html
標籤：jQuery
上一篇：jQuery基礎
下一篇：jQuery基礎事件處理