jQuery属性操作之.val()函数

@

目录

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

posted @ 2018-12-02 18:44  peterzhangsnail  阅读(2903)  评论(0)  编辑  收藏  举报