jQuery屬性操作之.val()函數

@

目錄

• .val()實例方法的三種用法
• .val()函數源碼
• 調用形式:$('xxx').val();
• 調用形式:$('xxx').val(value);
• 調用形式:$('xxx').val(function(index,value){});

.val()實例方法的三種用法

1. $('xxx').val() : 獲取匹配的元素集合中第一個元素的當前value屬性值(property)
2. $('xxx').val(value) : 設置匹配的元素集合中每個元素的value屬性值(property)
3. $('xxx').val(function(index,value){}) :

• 鈎子函數未設置或無效時,將函數function(index,value)的返回值設為每一個DOM元素的value屬性值(property).
• 其中,兩個形參不需要傳值,index指代當前DOM元素的在jQuery對象中的索引,value指代當前DOM對象的舊的value屬性值.

---

.val()函數源碼

	jQuery.fn.extend( {
	val: function( value ) {
		var hooks, ret, isFunction,
			elem = this[ 0 ]; //elem為jQuery對象匹配的第一個DOM元素
		
		//無參數傳入時
		if ( !arguments.length ) { 

			if ( elem ) { //如果jQuery有匹配到DOM元素的話

				//鈎子判斷與執行:匹配用戶自定義的鈎子函數,並執行和返回
				hooks = jQuery.valHooks[ elem.type ] ||  //如果valHooks有type屬性,賦值對應鈎子
					jQuery.valHooks[ elem.nodeName.toLowerCase() ];  //如果valHooks有與DOM節點名相關的屬性,賦值對應鈎子



				if ( // 如果定義了鈎子及相關方法,調用鈎子函數處理並返回
					hooks &&
					"get" in hooks &&
					( ret = hooks.get( elem, "value" ) ) !== undefined
				) {
					return ret;
				}

				ret = elem.value;  //無鈎子時,直接取元素的value值

				return typeof ret === "string" ?

					// 返回字符串:處理一般情況下的返回值
					ret.replace( rreturn, "" ) :

					// 返回非字符串:value為null/undefined,返回空串;其余情況,返回ret
					ret == null ? "" : ret;
			}

			return; //如果jQuery對象未匹配到DOM元素時,直接返回
		}


		//傳入一個參數時的情況:函數,非函數
		isFunction = jQuery.isFunction( value ); //判斷傳入參數是否為函數,為后續條件開關做准備

		return this.each( function( i ) {  //實例方法.each():對匹配到的每一個DOM元素,執行括號中的函數:obj[i].callback(i);
			var val;

			if ( this.nodeType !== 1 ) { //當前DOM元素不為元素節點時,直接返回
				return;
			}

			if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

				val = value.call( this, i, jQuery( this ).val() );
				//[注:value的兩個形參,我們不用給它手動傳值,會在val函數內部自動傳值,一個代表DOM元素的索引,一個代表DOM元素當前的value屬性的值]

			} else {
				val = value; //如果傳入參數不為函數類型,val=傳入參數;
			}

			// 將val為null/undefined的情況,統一處理為空串
			if ( val == null ) {
				val = "";
			} else if ( typeof val === "number" ) {
				val += "";
			} else if ( jQuery.isArray( val ) ) {
				val = jQuery.map( val, function( value ) {
					return value == null ? "" : value + "";
				} );
			}

			//有傳參的情況下的,鈎子判斷與執行:匹配用戶自定義的鈎子函數,並執行和返回
			hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

			// 如果鈎子的"set"屬性未定義,仍舊返回上面一般情況下處理的結果
			if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
				this.value = val;
			}
		} );
	}
} );   

---

調用形式:$('xxx').val();

相關代碼:

var hooks, ret, isFunction,
			elem = this[ 0 ]; //elem為jQuery對象匹配的第一個DOM元素
		
		//無參數傳入時
		if ( !arguments.length ) { 

			if ( elem ) { //如果jQuery有匹配到DOM元素的話

				//鈎子判斷與執行:匹配用戶自定義的鈎子函數,並執行和返回
				hooks = jQuery.valHooks[ elem.type ] ||  //如果valHooks有type屬性,賦值對應鈎子
					jQuery.valHooks[ elem.nodeName.toLowerCase() ];  //如果valHooks有與DOM節點名相關的屬性,賦值對應鈎子



				if ( // 如果定義了鈎子及相關方法,調用鈎子函數處理並返回
					hooks &&
					"get" in hooks &&
					( ret = hooks.get( elem, "value" ) ) !== undefined
				) {
					return ret;
				}

				ret = elem.value;  //無鈎子時,直接取元素的value值

				return typeof ret === "string" ?

					// 返回字符串:處理一般情況下的返回值
					ret.replace( rreturn, "" ) :

					// 返回非字符串:value為null/undefined,返回空串;其余情況,返回ret
					ret == null ? "" : ret;
			}

			return; //如果jQuery對象未匹配到DOM元素時,直接返回
		}   

說明:
1.jQuery對象沒有匹配到DOM元素時,直接返回.
2.先進行鈎子函數相關的判斷(調用),如果鈎子滿足以下幾個條件,執行鈎子函數並返回:

• 鈎子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
• 鈎子之中存在get屬性
• 調用get,得到的返回值不為undefined

3.否則,返回elem的value屬性的屬性值.

---

調用形式:$('xxx').val(value);

相關代碼:

if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

			val = value.call( this, i, jQuery( this ).val() );

		} else {
			val = value; //如果傳入參數不為函數類型,val=傳入參數;
		}
//有傳參的情況下的,鈎子判斷與執行:匹配用戶自定義的鈎子函數,並執行和返回
		hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

		// 如果鈎子的判斷不通過,仍舊返回上面一般情況下處理的結果
		if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
			this.value = val;
		}

說明:(value為非函數類型情況下)
1.同樣,先進行鈎子的判斷,如果滿足以下幾個條件,if條件判斷語句中的三個表達式依次執行,設置好當前DOM元素value屬性值:

• 鈎子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
• 鈎子之中存在set屬性
• 調用set,得到的返回值不為undefined

2.否則,直接設置當前DOM元素的value屬性值為傳入的參數

---

調用形式:$('xxx').val(function(index,value){});

相關代碼:

if ( isFunction ) { //如果傳入參數為函數類型,val=obj[i].value(i,obj的value屬性值)

			val = value.call( this, i, jQuery( this ).val() );
			//[注:value的兩個形參,我們不用給它手動傳值,會在val函數內部自動傳值,一個代表DOM元素的索引,一個代表DOM元素當前的value屬性的值]

		} else {
			val = value; //如果傳入參數不為函數類型,val=傳入參數;
		}

		// 將val為null/undefined的情況,統一處理為空串
		if ( val == null ) {
			val = "";
		} else if ( typeof val === "number" ) {
			val += "";
		} else if ( jQuery.isArray( val ) ) {
			val = jQuery.map( val, function( value ) {
				return value == null ? "" : value + "";
			} );
		}

		//有傳參的情況下的,鈎子判斷與執行:匹配用戶自定義的鈎子函數,並執行和返回
		hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; 

		// 如果鈎子的"set"屬性未定義,仍舊返回上面一般情況下處理的結果
		if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
			this.value = val;
		}   

說明:(value為函數類型情況下)
1.令val=obj[i].value(i,jQuery( this ).val());
[注]

• value函數兩個形參由本函數自動傳值,自行傳值無效.
• 傳參i-當前DOM元素在jQuery對象中的索引值
• 傳參jQuery( this ).val()-將當前DOM元素包裝為jQuery對象,以便以無參形式調用val方法得到的value屬性舊值.

2.同樣,先進行鈎子的判斷,如果滿足以下幾個條件,if條件判斷語句中的三個表達式依次執行,設置好當前DOM元素value屬性值:

• 鈎子之中存在type屬性 或者 存在與當前DOM元素節點同名的屬性
• 鈎子之中存在set屬性
• 調用set,得到的返回值不為undefined

3.否則,直接設置val為當前元素的value屬性值