¿Cuál es la diferencia entre $ (este) y esto

Question

He El siguiente código

$('a').click(function() { 
var url= this.href; 
alert(url); 
}); 

Esto funciona muy bien y por supuesto el resultado devuelto es la URL de una etiqueta.

Sin embargo si cambio el código anterior para

$('a').click(function() { 
var url= $(this).href; 
alert(url); 
}); 

El resultado es indefinido.

¿Alguien por favor ayuda a aclarar esto para mí? Me estoy golpeando la cabeza por esto ....

Answer 1

$(this) crea un objeto jQuery que envuelve this. El objeto DOM nativo tiene un atributo href, pero jQuery no.

$(this).attr("href") funcionaría.

Answer 2

this en su caso es el elemento DOM real, por lo que la etiqueta de anclaje

$(this) es un objeto jQuery que envuelve ese elemento Dom con toda la bondad jQuery.

por lo tanto .href no es un atributo de ese objeto jquery, pero es del objeto dom.

puede usar $(this).attr('href') para lograr lo mismo con el objeto jQuery.

Answer 3

Esto se debe a que está utilizando un elemento DOMElement de JavaScript en el primer ejemplo y un objeto jQuery en el segundo ejemplo. El objeto jQuery se ajusta al elemento DOMElement y le proporciona muchas funciones.

Puede acceder a la URL de la siguiente manera:

$('a').click(function() { var url= $(this).attr('href'); alert(url); }); 

Answer 4

La diferencia es entre un elemento DOM y una selección de jQuery.

"this" en el código que ha dado anteriormente es una referencia al elemento DOM del enlace. $ (esto) crea una selección jQuery basada en el elemento DOM que contiene solo ese enlace.

La selección jQuery le dará características diferentes a cambio de un poco de rendimiento. Su elemento de enlace tiene una propiedad href (es decir, una a la que puede acceder a través de this.href), mientras que la selección jQuery tiene todas las propiedades jQuery normales & métodos.

Para obtener el destino del enlace, this.href es definitivamente el camino a seguir. Es más simple, más rápido y menos detallado.

Answer 5

Un montón de buenas respuestas, sólo quería añadir que también se puede hacer esto:

$('a').click(function(e) { 
    alert($(this)[0].href); 
});