jQuery: ¿Cuál es la diferencia entre '$ (this)' y 'this'?

Question

Actualmente estoy trabajando a través de este tutorial: Getting Started with jQuery

Para los dos ejemplos siguientes:

$("#orderedlist").find("li").each(function (i) { 
    $(this).append(" BAM! " + i); 
}); 
$("#reset").click(function() { 
    $("form").each(function() { 
     this.reset(); 
    }); 
}); 

Aviso en el primer ejemplo, utilizamos $(this) para añadir un poco de texto dentro de cada elemento li. En el segundo ejemplo usamos this directamente al restablecer el formulario.

$(this) parece que se usa con mucha más frecuencia que this.

Mi conjetura es en el primer ejemplo, $() es convertir cada elemento li en un objeto jQuery que entiende la función append() mientras que en el segundo ejemplo reset() se puede llamar directamente en el formulario.

Básicamente necesitamos $() para funciones especiales jQuery.

¿Es esto correcto?

Answer 1

Sí, solo necesita $() cuando usa jQuery. Si desea la ayuda de jQuery para hacer cosas DOM, téngalo en cuenta.

$(this)[0] === this 

En principio, cada vez que reciba un conjunto de elementos de regreso jQuery lo convierte en un jQuery object. Si sabes que solo tienes un resultado, estará en el primer elemento.

$("#myDiv")[0] === document.getElementById("myDiv"); 

Y así sucesivamente ...

Answer 2

Sí, mediante el uso de $(this), que permitió la funcionalidad de jQuery para el objeto. Simplemente usando this, solo tiene una funcionalidad genérica de Javascript.

Answer 3

Sí, necesita $(this) para las funciones de jQuery, pero cuando desea acceder a los métodos básicos de JavaScript del elemento que no utiliza jQuery, puede simplemente usar this.

Answer 4

$() es la función del constructor jQuery.

this es una referencia al elemento DOM de invocación.

Así que, básicamente, en $(this), estás de paso a la this en $() como un parámetro para que usted podría llamar a métodos y funciones de jQuery.

Answer 5

Al usar jQuery, se recomienda utilizar $(this) generalmente. Pero si sabes (debes aprender y saber) la diferencia, a veces es más conveniente y más rápido usar solo this.Por ejemplo:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
     alert("checked"); 
}); 

es más fácil y más puro que

$(".myCheckboxes").change(function(){ 
     if($(this).is(":checked")) 
     alert("checked"); 
}); 

Answer 6

esta referencia un objeto javascript y $ (this) utilizado para encapsular con jQuery.

Ejemplo =>

// Getting Name and modify css property of dom object through jQuery 
var name = $(this).attr('name'); 
$(this).css('background-color','white') 

// Getting form object and its data and work on.. 
this = document.getElementsByName("new_photo")[0] 
formData = new FormData(this) 

// Calling blur method on find input field with help of both as below 
$(this).find('input[type=text]')[0].blur() 

//Above is equivalent to 
this = $(this).find('input[type=text]')[0] 
this.blur() 

//Find value of a text field with id "index-number" 
this = document.getElementById("index-number"); 
this.value 

or 

this = $('#index-number'); 
$(this).val(); // Equivalent to $('#index-number').val() 
$(this).css('color','#000000') 

Answer 7

this es el elemento, $(this) es el objeto jQuery construido con ese elemento

$(".class").each(function(){ 
//the iterations current html element 
//the classic JavaScript API is exposed here (such as .innerHTML and .appendChild) 
var HTMLElement = this; 

//the current HTML element is passed to the jQuery constructor 
//the jQuery API is exposed here (such as .html() and .append()) 
var jQueryObject = $(this); 
}); 

Una mirada más profunda

this^MDN está contenido en un contexto de ejecución

El alcance se refiere a la corriente Execution Context^ECMA. Para comprender this, es importante entender cómo funcionan los contextos de ejecución en JavaScript.

contextos de ejecución se unen este

Cuando el control entra en un contexto de ejecución (código está siendo ejecutado en ese ámbito) el medio ambiente para las variables son de configuración (Entornos léxicas y variables - esencialmente Esto establece un área para las variables a ingrese cuáles ya eran accesibles, y un área para almacenar las variables locales), y se produce el enlace de this.

jQuery une esta

contextos de ejecución de formar una pila lógica. El resultado es que los contextos más profundos en la pila tienen acceso a las variables anteriores, pero sus enlaces pueden haber sido alterados. Cada vez que jQuery llama a una función de devolución de llamada, altera el enlace utilizando apply^MDN.

callback.apply(obj[ i ])//where obj[i] is the current element 

El resultado de la llamada apply es que dentro de las funciones de devolución de llamada jQuery, this se refiere al elemento actual siendo utilizado por la función de devolución de llamada. Por ejemplo, en .each, la función de devolución de llamada comúnmente utilizada permite .each(function(index,element){/*scope*/}). En ese alcance, this == element es verdadero.

Las devoluciones de llamada de jQuery usan la función apply para enlazar la función que se está llamando con el elemento actual. Este elemento proviene de la matriz de elementos del objeto jQuery. Cada objeto jQuery construido contiene una matriz de elementos que coinciden con el selector^{jQuery API} que se utilizó para crear una instancia del objeto jQuery.

$(selector) llama a la función jQuery (recordemos que $ es una referencia a jQuery, código: window.jQuery = window.$ = jQuery;). Internamente, la función jQuery crea una instancia de un objeto de función. Entonces, aunque puede no ser inmediatamente obvio, el uso de $() internamente usa new jQuery(). Parte de la construcción de este objeto jQuery es encontrar todas las coincidencias del selector. El constructor también aceptará las cadenas html y los elementos. Cuando pase this al constructor jQuery, está pasando el elemento actual para que se construya un objeto jQuery con. El objeto jQuery contiene una estructura similar a una matriz de los elementos DOM que coinciden con el selector (o solo el elemento individual en el caso de this).

Una vez que se construye el objeto jQuery, la API de jQuery queda expuesta. Cuando se llama a una función jQuery api, iterará internamente sobre esta estructura similar a una matriz. Para cada elemento de la matriz, llama a la función de devolución de llamada para la API, vinculando la devolución de llamada this al elemento actual. Esta llamada se puede ver en el fragmento de código anterior, donde obj es la estructura similar a una matriz, y i es el iterador utilizado para la posición en la matriz del elemento actual.