¿Cuál es la diferencia entre ‘$ (this)’ y ‘this’?

Actualmente estoy trabajando en este tutorial: Comenzar con jQuery

Para los dos ejemplos a continuación:

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

Observe que en el primer ejemplo, usamos $(this) para agregar texto dentro de cada elemento li . En el segundo ejemplo usamos this directamente al restablecer el formulario.

$(this) parece usarse mucho más a menudo que this .

Supongo que en el primer ejemplo, $() está convirtiendo cada elemento li en un objeto jQuery que comprende la función append() , mientras que en el segundo ejemplo puede llamarse a reset() directamente en el formulario.

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

¿Es esto correcto?

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

 $(this)[0] === this 

Básicamente, cada vez que recuperas un conjunto de elementos, jQuery lo convierte en un objeto jQuery . Si sabes que solo tienes un resultado, estará en el primer elemento.

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

Y así…

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

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

Entonces, básicamente, en $(this) , solo está pasando el valor this en $() como parámetro para que pueda llamar a los métodos y funciones de jQuery.

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 usar this .

Al usar jQuery , se recomienda usar $(this) generalmente. Pero si sabes (debes aprender y saber) la diferencia, a veces es más conveniente y 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"); }); 

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 scope se refiere al contexto de ejecución actual ECMA . Para comprender this , es importante comprender la forma en que los contextos de ejecución operan en JavaScript.

contextos de ejecución unen esto

Cuando el control ingresa a un contexto de ejecución (el código se está ejecutando en ese ámbito) se configura el entorno para las variables (Entornos léxicos y variables; básicamente, esto configura un área para las variables que ya estaban accesibles, y un área para las variables locales almacenado), y el enlace de this ocurre.

jQuery ataca esto

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

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

El resultado de llamar a apply es que dentro de las funciones de callback jQuery, this refiere al elemento actual que está siendo utilizado por la función de callback.

Por ejemplo, en .each , la función de callback comúnmente utilizada permite .each(function(index,element){/*scope*/}) . En ese ámbito, this == element es verdadero.

Las devoluciones de llamada de jQuery usan la función de aplicar 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 (recuerde 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, usar $() 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á cadenas html y elementos . Cuando pasa this al constructor jQuery, está pasando el elemento actual para que se construya un objeto jQuery . 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 callback para la API, vinculando la callback a this al elemento actual. Esta llamada se puede ver en el fragmento de código anterior donde obj es la estructura tipo array, y i es el iterador utilizado para la posición en la matriz del elemento actual.

Sí, al usar $(this) , habilitó la funcionalidad de jQuery para el objeto. Con solo usar this , solo tiene la funcionalidad genérica de Javascript.

esta referencia es un objeto javascript y $ (esto) se usa 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')