分析jQuery中val()方法的实现过程

 

　　jQuery中的val()方法，并不是简单的直接返回elem.value的属性值，它根据不同的DOM元素进行了不同的处理。

 

1. 首先是<option>，如果有value则取value，没有，则取标签中的文字。
2. 其次是<select>，select分为单选和多选，根据标签设置的属性，来确定返回单个值还是多个值（数组）。
3. 再次是radio，如果没有设置value，并且当前状态为选中状态时，会返回一个"on"。
4. 最后，是其它情况，直接返回elem.value。

 

　　上面说了val()的取值方法，再说说val($var)的赋值方法。

 

　　对于赋值方法，和其它的方法一样，首先判断如果参数是一个函数，那么先执行这个函数取得结果，然后判断数值类型如果是一个数字，就转换成字符串格式，jQuery是这样转换的【val += "";】，在赋值操作时，仅对select做了特殊的处理，因为某些select是可以多选的，也就是说，传参数时可以传一个数组过来，然后，选中多个select中的option值。对于其它的标签，jQuery只是普通的赋给value属性值【this.value = val】。

 

val: function( value ) { if ( value === undefined ) { var elem = this[0]; if ( elem ) { if ( jQuery.nodeName( elem, "option" ) ) { return (elem.attributes.value || {}).specified ? elem.value : elem.text; } // We need to handle select boxes special if ( jQuery.nodeName( elem, "select" ) ) { var index = elem.selectedIndex, values = [], options = elem.options, one = elem.type === "select-one"; // Nothing was selected if ( index < 0 ) { return null; } // Loop through all the selected options for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) { var option = options[ i ]; if ( option.selected ) { // Get the specifc value for the option value = jQuery(option).val(); // We don't need an array for one selects if ( one ) { return value; } // Multi-Selects return an array values.push( value ); } } return values; } // Handle the case where in Webkit "" is returned instead of "on" if a value isn't specified if ( rradiocheck.test( elem.type ) && !jQuery.support.checkOn ) { return elem.getAttribute("value") === null ? "on" : elem.value; } // Everything else, we just grab the value return (elem.value || "").replace(rreturn, ""); } return undefined; } var isFunction = jQuery.isFunction(value); return this.each(function(i) { var self = jQuery(this), val = value; if ( this.nodeType !== 1 ) { return; } if ( isFunction ) { val = value.call(this, i, self.val()); } // Typecast each time if the value is a Function and the appended // value is therefore different each time. if ( typeof val === "number" ) { val += ""; } if ( jQuery.isArray(val) && rradiocheck.test( this.type ) ) { this.checked = jQuery.inArray( self.val(), val ) >= 0; } else if ( jQuery.nodeName( this, "select" ) ) { var values = jQuery.makeArray(val); jQuery( "option", this ).each(function() { this.selected = jQuery.inArray( jQuery(this).val(), values ) >= 0; }); if ( !values.length ) { this.selectedIndex = -1; } } else { this.value = val; } }); }