En esta lección, explicaremos el método val y el procesamiento de compatibilidad del atributo de valor, que es manejado por el objeto valHooks en jQuery.
Primero, veamos el uso del método val:
$("#input1").val() //Obtener el valor del atributo de valor del elemento de entrada
$("#input1").val("hola") //Establece el atributo de valor del elemento de entrada en hola.
Entonces echemos un vistazo al código fuente del método val:
jQuery.fn.extender({
......
val: function(valor) { var hooks, ret, isFunction, elem = this[0];
if ( !arguments.length ) { //Si es una operación de adquisición, es decir cuando el parámetro es 0.
if ( elem ) { hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName .toLowerCase() ];
//valHooks tiene los siguientes objetos de propiedad: opción (opción secundaria del cuadro desplegable), selección (cuadro desplegable), radio (botón de radio), casilla de verificación (botón de verificación). Esto significa que se requiere el procesamiento de compatibilidad de estos cuatro elementos. Entre ellos, el tipo de radio=radio, el tipo de casilla de verificación=casilla de verificación y el tipo de selección, el valor predeterminado es seleccionar uno (opción única), y también se puede configurar para seleccionar múltiples (<seleccionar múltiples>< opción></opción></select> , opción múltiple).
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) { return ret; }
ret = elem.valor;
devuelve typeof ret === "cadena" ? ret.replace(return, "") : ret == null ? "" : ret;
}
devolver;
}
isFunction = jQuery.isFunction(valor);
return this.each(function( i ) { //la operación de configuración es para cada elemento
var val;
if ( this.nodeType !== 1 ) { // debe ser un
retorno de nodo de elemento;
}
if ( isFunction ) { val = value.call( this, i, jQuery( this ).val() ); } más { val = valor; }
if ( val == null ) { //Para este caso: $("input").val(null);
val = "";
} else if ( typeof val === "number" ) { //Si pasa If la entrada es un tipo de número, se convertirá en una cadena
val += "";
} else if ( jQuery.isArray( val ) ) { //Esto es para elementos como checkbox y radio, por ejemplo: $(" #input2" ).val(["hello"]); Aquí, si se pasa una cadena, es para asignar un valor al atributo de valor de la casilla de verificación, pero si se pasa una matriz, significa si el valor del checkbox es igual a hola, y si es igual se seleccionará, si no es igual no se seleccionará.
val = jQuery.map(val, función ( valor ) { valor de retorno == nulo ? "" : valor + ""; }); }
ganchos = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { //Por favor vea el siguiente código para explicar esto.value = val
;
}
} );
}
});
jQuery.extend({ valHooks: { option: { //Cuando obtiene el valor del atributo de valor del elemento de opción, si no establece explícitamente el valor de valor para esta opción, el valor obtenido es el texto de la opción, es decir , el texto de la opción. Pero el valor obtenido bajo IE6-7 es "". get: function( elem ) { var val = elem.attributes.value; //Bajo IE6-7, val es un objeto. return val. especificado ?elem.value: elem.text;//Si val.specified es verdadero, significa que el valor se establece explícitamente, por lo que elem.value se devuelve directamente, si es falso, significa que no se establece explícitamente, por lo que se devuelve elem.text. } } , select: { get: function( elem ) { //Cuando la selección es una opción única, el valor obtenido es el valor de la opción que seleccionó. Si es una selección múltiple, cuando se obtiene el valor, es el valor de todas las opciones que seleccionó en forma de matriz. var value, option, options = elem.options, //Una colección de todas las opciones seleccionadas. index = elem.selectedIndex, //El valor del índice de la opción actualmente seleccionada
one = elem.type === "select-one" || index < 0,
values = one ?null : [], //Si selección única, valores=null, si selección múltiple, valores=[].
max = uno ?índice + 1 : opciones.longitud,
i = índice < 0 ?max : uno ?índice : 0;
for ( ; i < max; i++ ) { //Selección única, ciclo una vez, selección múltiple, ciclo varias veces
option = opciones[ i ];
if ( ( option.selected || i === index ) && //Bajo IE6-9, cuando se hace clic en el botón de reinicio, el valor seleccionado de la opción no restaurará el valor predeterminado, y otros navegadores restaurarán el valor predeterminado del valor seleccionado de todas las opciones.
( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) && //Si la opción está deshabilitada, no se puede obtener el valor de la opción.
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) { //Si el elemento principal de la opción está deshabilitado y el elemento principal es optgroup, entonces no se puede obtenido.
valor = jQuery( opción ).val();
si (uno) { valor de retorno; }
valores.push(valor);
}
}
valores de retorno;
},
set: function( elem, value ) { var optionSet, option, options = elem.options, values = jQuery.makeArray( value ), //convierte el valor en una matriz i = options.length;
while ( i-- ) { opción = opciones[ i ]; if ( (opción.seleccionado = jQuery.inArray( jQuery(opción).val(), valores) >= 0) ) { //Juzgar el elemento secundario opción de seleccionar Si el valor está en la matriz de valores, si es así, se seleccionará esta opción. conjunto de opciones = verdadero; } }
if ( !optionSet ) { elem.selectedIndex = -1; //Si ninguno de los valores de opción en select es igual al valor, entonces asigne el valor de índice seleccionado de select a -1. No permita que haya ningún valor en select caja. } valores devueltos; } } }
})
jQuery.each([ "radio", "checkbox" ], function() { jQuery.valHooks[ this ] = { set: function( elem, value ) { if ( jQuery.isArray( value ) ) { //Cuando el valor es Al usar una matriz, verifique si el valor de este elemento está en el valor de la matriz y, de ser así, deje que se seleccione el elemento. Solo hay dos tipos de este elemento: radio y casilla de verificación.
return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 ); } } };
if
(
!
jQuery.support.checkOn ) { //Si el elemento es radio o checkbox, Cuando obtenemos su valor predeterminado, el valor obtenido por la versión anterior de webkit es "", mientras que otros navegadores están activados, por lo que cuando el valor de este elemento no se establece explícitamente (el valor obtenido a través de getAttribute es nulo), obtenemos su valor predeterminado a través de input.value, y todos los navegadores vuelven.
jQuery.valHooks[ this ].get = function( elem ) { return elem.getAttribute("value") === null ? "on" : elem.value; }; } });
El procesamiento de compatibilidad se llama ganchos en jQuery. Hay diferentes ganchos para diferentes procesos de compatibilidad. Por ejemplo: value value, hay valHooks, atributo value, hay attrHooks, propHooks, etc.