jQuery 源码分析(十五) 数据操作模块 val详解
jQuery的属性操作模块总共有4个部分，本篇说一下最后一个部分:val值的操作，也是属性操作里最简单的吧，只有一个API，如下:
- val(vlaue) ;获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值，有三种用法:
- val() ;没有参数，获取第一个匹配元素的当前值
- val(value) ;为每个匹配元素设置value值 ;如果为null则表示设置值为空
- val(func) ;设置每个匹配元素为函数func返回的值 ;该函数接受两个参数:分别是当前元素在集合中的下标和当前value值。
就是修改DOM元素的value属性，常用于 设置/获取 输入框里的值，举个栗子:
writer by:大沙漠 QQ:22969969
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> .color{color: #f00;} .back{background: #ccc;} </style> </head> <body> <input type="text" id="input"> <button id="b1">设置值</button> <button id="b2">获取值</button> <script> let b1 = document.getElementById('b1'), b2 = document.getElementById('b2'); b1.onclick = ()=> $('input').val(123) b2.onclick = ()=> console.log($('input').val()) </script> </body> </html>
渲染如下:
我们设置了一个输入框，然后添加了两个按钮，分别用于设置值和获取值，点击设置值后会调用$('input').val(123)去设置对应的值123，如下:
点击获取值时就会获取该输入框的值，控制台输入如下:
一般在提交表单的时候，可以通过val()去获取值，在进行验证的时候，比如某个输入框只能填写数字，如果发现用户输入了非数字的字符，我们过滤后可以再调用val(v)去设置一下值。
源码分析
val()的实现比较简单，如下:
jQuery.fn.extend({ val: function( value ) { //获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值。 var hooks, ret, isFunction, elem = this[0]; //elem是第一个匹配元素的引用 if ( !arguments.length ) { //如果未传入参数，则获取第一个匹配元素的当前值 if ( elem ) { hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; //如果需要修正，则修正该值 if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { return ret; } ret = elem.value; return typeof ret === "string" ? //否则直接读取DOM属性value // handle most common string cases ret.replace(rreturn, "") : // handle cases where value is null/undef or number ret == null ? "" : ret; } return; } isFunction = jQuery.isFunction( value ); //value是否为函数 return this.each(function( i ) { var self = jQuery(this), val; if ( this.nodeType !== 1 ) { //如果当前元素不是元素节点,则直接返回 return; } if ( isFunction ) { //如果value是函数，则在每个匹配元素上执行该函数，并取其返回值作为待设定的值。 val = value.call( this, i, self.val() ); //在函数内部，this指向当前元素，函数有两个参数，分别是当前元素在集合中的下标和当前value值。 } else { val = value; } // Treat null/undefined as ""; convert numbers to string if ( val == null ) { //如果val是null,则转换为空字符串 val = ""; } else if ( typeof val === "number" ) { //如果val是数字格式,则/转换为字符串 val += ""; } else if ( jQuery.isArray( val ) ) { //如果val是数组格式 val = jQuery.map(val, function ( value ) { //则调用jQuerymap将val转化为字符串最后返回 return value == null ? "" : value + ""; }); } hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ]; // If set returns undefined, fall back to normal setting if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { //优先调用对应的修正对象的修正方法set() this.value = val; //如果没有修正对象，则直接设置value值。 } }); }, /*略*/ })
就是设置/获取对应DOM对象引用的value值来实现的。
