jQuery屬性操作之.val()函式
摘要：
目錄
.val()例項方法的三種用法
呼叫形式:$('xxx').val();
呼叫形式:$('xxx').val(value);
呼叫形式:$('xxx').val(func...
目錄
- .val()例項方法的三種用法
- 呼叫形式:$('xxx').val();
- 呼叫形式:$('xxx').val(value);
- 呼叫形式:$('xxx').val(function(index,value){});
@
.val()例項方法的三種用法
- $('xxx').val() : 獲取匹配的元素集合中第一個元素的當前value屬性值(property)
- $('xxx').val(value) : 設定匹配的元素集合中每個元素的value屬性值(property)
- $('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屬性值