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属性值

泉源：https://www.cnblogs.com/peterzhangsnail/archive/2018/12/02/10054533.html

链接: http://www.fly63.com/article/detial/1475