Red de conocimiento informático - Aprendizaje de programación - JQuery aprende la diferencia entre prop y attr con ejemplos

JQuery aprende la diferencia entre prop y attr con ejemplos

Descubrí un problema hoy al usar JQuery. Al usar .attr ("marcado") para obtener el valor del atributo marcado de una casilla de verificación, se puede seleccionar, pero el valor de "marcado" no se puede seleccionar. no está definido.

¿Por qué jquery 1.6+ agregó el método .prop()? Porque en algunos navegadores, por ejemplo, simplemente la escritura está deshabilitada y marcada, mientras que otros tienen que escribir deshabilitada. Por ejemplo, en algunos navegadores solo es necesario escribir deshabilitado, marcado, mientras que en otros debes escribir deshabilitado="deshabilitado", marcado="marcado". Por lo tanto, desde la versión 1.6, jq proporciona un nuevo método "prop" para obtener estas propiedades.

Anteriormente, usábamos attr para obtener el atributo verificado, devolviendo "checked " y "", ahora usamos el método prop para obtener el atributo, devolviendo verdadero y falso. log(el.prop(" style")); //objeto CSSStyleDeclaration

console.log(document.getElementById("test").style); //objeto CSSStyleDeclaration

});

La salida de el.attr("style") no está definida, porque attr es para obtener el valor del nodo de atributo del objeto. Obviamente no existe tal nodo de atributo en este momento, por lo que. la salida natural no está definida el.prop(" style ") Objeto de declaración CSSStyle

console.log(document.getElementById("test").style //objeto CSSStyleDeclaration

} );

La salida de el.attr ("estilo") no está definida, porque attr es para obtener el valor del nodo de atributo del objeto. Obviamente no existe tal nodo de atributo en este momento, por lo que es natural. La salida es una propiedad indefinida ("estilo"), que genera el objeto CSSStyleDeclaration. Para un objeto DOM, se dice que es un objeto DOM y tiene un atributo de objeto de estilo nativo, por lo que el objeto de estilo de salida document.getElementById ("prueba") .style es el mismo que el de arriba

Entonces mira:

el.attr("abc", "111")

console.log( el.attr("abc"));//111

console .log(el.prop("abc"));//undefinido

Primero, use el método attr para agregar el atributo del nodo abc al objeto. Su valor es 111. Puede ver que la estructura de html también ocurre.

El resultado de salida de el.attr("abc") es 111. , lo cual es normal. log(el.prop("abc")); //222

Usamos el método prop nuevamente para establecer el atributo abc para este objeto con un valor de 222. El resultado no se explica.

Lo anterior ha aclarado un principio, es decir, cuándo utilizar lo que puedes dominar.

Mencione que cuando desee obtener o establecer propiedades como marcada, seleccionada, de solo lectura y deshabilitada, obviamente es mejor usar el método prop, como el siguiente:

< tipo de entrada ="casilla de verificación" id="prueba" marcada="marcada"/>console.log(el.attr("marcada") //marcada

console.log(el.prop( "marcado ")); //true

console.log(el.attr("disabled")); //true

console.log(el.prop("marcado"); ") ); //trueattr("disabled")); //undefinido

console.log(el.prop("disabled")); //false

Obviamente, Valor booleano Más razonable para el procesamiento posterior que los valores de cadena.

PD: Como nota al margen, si eres un fanático del rendimiento de JavaScript, obviamente prop tiene un mayor rendimiento, porque attr necesita acceder al nodo de atributo DOM, y acceder al DOM es el que lleva más tiempo. Esto se aplica a situaciones de selección múltiple de todo y selección inversa.

Todos sabemos que algunos navegadores solo necesitan escribir deshabilitado y marcado, mientras que otros deben escribir deshabilitado="disabled" y check="checked", por ejemplo, use attr ("checked") Solo obtenga el valor del atributo marcado de la casilla de verificación cuando está seleccionado El valor está "marcado" pero el valor obtenido cuando no está marcado no está definido

jq proporciona un nuevo método "prop" para obtener estos atributos. son para resolver este problema, cuando usábamos attr para obtener el atributo marcado, devolvería "marcado" y "". Ahora, cuando usamos el método prop para obtener el atributo, devolverá verdadero y falso.

Entonces, cuándo usar attr y cuándo usar prop

1. El nombre del atributo que se agregará para que tenga efecto debe usar prop.

2. Si hay dos atributos verdadero y falso, use prop.

3. De lo contrario, use attr

.