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


Actualmente estoy trabajando en este tutorial: Comenzando 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();
    });
});

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

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

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

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

¿Es esto correcto?


514
2018-06-27 00:18


origen


Respuestas:


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í...


475
2018-06-27 00:23



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

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

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


352
2017-09-15 04:03



Sí, necesitas $(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.


86
2018-06-27 00:24



Cuando usas jQuery, se aconseja usar $(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"); 
});

67
2018-05-21 14:57



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

thisMDN está contenido en un contexto de ejecución


42
2018-02-10 23:32



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


36
2018-06-27 00:23



esta hacer referencia a un objeto javascript y $ (esto) 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')

-2
2017-11-28 12:49