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

時間 2019-12-11

標籤 jquery 屬性 val 函數欄目 JQuery 简体版

原文原文鏈接

目錄node

@函數

.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();

相關代碼:this

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.先進行鉤子函數相關的判斷(調用),若是鉤子知足如下幾個條件,執行鉤子函數並返回:code

鉤子之中存在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屬性值爲傳入的參數get

調用形式:$('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());
[注]string