2012-01-03 21 views
9

A menudo veo ejemplos de uso de la palabra clave this en jquery. A veces veo que se usa con $ y paréntesis, otras veces sin. Y pensé que lo usé con un poco de cada uno.

Así,

var id = this.attr('id'); 

var id = $(this).attr('id'); 

var id = $this.attr('id'); 

Son éstos todos lo mismo? ¿Hay una manera preferida? ¿Es this una cosa de javascript y $(this) algo de jQuery? Si es así, ¿dónde cae $this?

Sé que esta es probablemente una pregunta para un novato total, pero no he podido hacer que el simple, this, por sí solo, funcione. Solo puedo obtener $(this) para que funcione. No estoy seguro de si estoy haciendo algo mal, o si he estado leyendo ejemplos con errores tipográficos.

+1

'this' es una referencia de js y poner $() simplemente lo envuelve con la clase jquery. Lo que se refiere a $ this - es solo un nombre de variable (no predefinido) y se usa generalmente en los plugins de jquery solo para tener siempre una referencia a la clase primaria de 1er nivel de las clases secundarias –

Respuesta

10

this es una cosa JavaScript. Se refiere al "contexto" en el que se está ejecutando una función. Para la mayoría de los manejadores de eventos, es el elemento DOM ("en bruto") que está escuchando un evento. En otras situaciones, significará otras cosas; Buscar en Google "this en JavaScript" puede ser esclarecedor.


me dicen que es el elemento "en bruto" DOM ​​porque jQuery se utiliza a menudo para envoltura elementos DOM de civil en una envoltura de jQuery, para que pueda utilizar métodos jQuery como attr en lugar de los habituales (getAttribute, setAttribute, etc.). Este ajuste se realiza con la función $, y es allí donde ve $(this). Por ejemplo:

this.getAttribute("href") 
/* or */ someElement.getAttribute("href") 

es la misma que

$(this).attr("href") 
/* or */ $(someElement).attr("href") 

$this o this$ es sólo un nombre de variable.Sin embargo, a menudo es convencional para hacer una asignación como

var $this = $(this); 

La razón de esto es evitar el recurso continuamente la función $, que es un poco caro, ya que crea un nuevo objeto envoltorio jQuery cada vez. Si almacena el elemento envuelto en una variable, gana ligeramente en eficiencia.


En casos raros, this ya podría haber una envoltura de jQuery. El caso que aparece a menudo para mí es cuando escribo complementos de jQuery. En ese caso, puede hacer cosas como this.attr("id") directamente, sin concluir primero, porque ya está envuelto. En los casos habituales (controladores de eventos, $.each, etc.) es necesario el envoltorio.

+0

+1 Gran respuesta. Muy minucioso. – ThinkingStiff

+0

Sí, excelente respuesta. Y esa última parte ayuda a explicar algo que leí en algún lado, pero podría encontrarlo de nuevo. Vi 'this.attr (" id ")' usado, pero no funcionó para mí. Creo que eso es lo que más me confundió. –

5

this es un objeto Javascript nativo que se refiere al objeto actual. En las funciones de jQuery definidas con jQuery.fn., this es un objeto jQuery en sí mismo. $(this) es la manera de jQuery de convertir un Javascript this en un objeto jQuery. Y $this es solo un nombre de variable. Si no lo ha definido, sería undefined.

Aquí hay una buena explicación del uso de this de jQuery:

http://www.learningjquery.com/2007/08/what-is-this

+1

'this' no solo se usa en controladores de eventos, es una referencia al objeto actual. Aquí hay una explicación adicional: http://justin.harmonize.fm/index.php/2009/09/an-introduction-to-javascripts-this/ – voithos

+0

@voithos Gracias. Actualizado. – ThinkingStiff

8

'esto' es una palabra clave objeto Javascript para referirse al objeto actual, '$ (this)' es la función de contenedor de jQuery que convierte el objeto actual en un objeto jQuery, y cuando ve '$ this' generalmente se refiere a una variable que el desarrollador creó para referirse al objeto $ (this), es útil durante un bucle $ .each. Por ejemplo:

$(function(){ 
    $('a').click(function(){ 
    var $this = $(this); // refers to the $('a') object 
    $('div').each(function(){ 
     $(this).hide(); // $(this) refers to each 'div' in the loop, not the $('a') 
     $this.css({ color: 'blue' }); // turns the link element text blue 
    }); 
    }); 
}); 
+0

¿Podría exponer su respuesta para mostrar cuándo y por qué el 'simple' simple podría entrar en juego – veeTrain

+0

La única razón para usar el simple 'esto' en esta situación es si necesita acceder a un método o variable en el nodo DOM sin procesar tal como aquí: http://www.w3schools.com/jsref/dom_obj_node.asp Por ejemplo, no podría usar un método jQuery en el plano 'this' como por ejemplo: this.hide(); – afrederick

+0

Oh ... Ya veo. Entonces, ¿sería seguro decir que cualquiera que sea la 'operación' que realice en 'esto' tendría la posibilidad de ser compatible con los navegadores no compatibles? Mientras que envolverlo en '$()' y usar un método jQuery sería mucho más seguro? Sería bueno actualizar su respuesta para reflejar estas implicaciones de 'this' ya que el OP quería saber sobre eso – veeTrain

1

en lugar de llamar al $(this) varias veces, es más eficiente almacenarlo como una variable, generalmente llamada $this para que la gente sepa de qué se trata.

Cuestiones relacionadas