javascript - ejemplo - getelementbyid properties

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

Question

Actualmente estoy trabajando en este tutorial: Introducción a 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 adjuntar un texto dentro de cada elemento li . En el segundo ejemplo, utilizamos this directamente al restablecer el formulario.

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

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

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

¿Es esto correcto?

Answer 1

Cuando se usa jQuery , se recomienda usar $(this) generalmente. Pero si conoce (debe aprender y conocer) 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"); 
});

Answer 2

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

Answer 3

Sí, necesita $(this) para las funciones de jQuery, pero cuando quiera acceder a métodos javascript básicos del elemento que no usa jQuery, solo puede usar this .

Answer 4

Sí, solo necesitas $() cuando estás usando jQuery. Si quieres la ayuda de jQuery para hacer cosas DOM, ten esto en cuenta.

$(this)[0] === this

Básicamente, cada vez que obtiene 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í...

Answer 5

$() es la función constructora de jQuery.

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

Básicamente, en $(this) , solo está pasando this en $() como parámetro para poder llamar a los métodos y funciones de jQuery.

Answer 6

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.

El alcance se refiere al contexto de ejecución actual ^ECMA . Para comprender this , es importante comprender la forma en que funcionan los contextos de ejecución en JavaScript.

los contextos de ejecución unen esto

Cuando el control ingresa en un contexto de ejecución (el código se está ejecutando en ese ámbito), el entorno para las variables se configura (Entornos léxico y variable: esencialmente, esto configura un área para que ingresen las variables que ya eran accesibles, y un área para que las variables locales sean almacenado), y la unión de this produce.

jQuery une esto

Los contextos de ejecución forman una pila lógica. El resultado es que los contextos más profundos en la pila tienen acceso a variables anteriores, pero sus enlaces pueden haber sido alterados. Cada vez que jQuery llama a una función de devolución de llamada, altera este enlace mediante el uso de applyMDN .

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

El resultado de la apply de llamada es que dentro de las funciones de devolución de llamada jQuery, this refiere al elemento actual que está utilizando la función de devolución de llamada.

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

Las devoluciones de llamada jQuery utilizan la función Apply para vincular la función a la que se llama 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 la ^{API de jQuery} del selector que se utilizó para instanciar el 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. Por lo tanto, si bien puede que no sea obvio de inmediato, 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 y elementos html. Cuando le pasa this al constructor jQuery, está pasando el elemento actual para que se construya un objeto jQuery . El objeto jQuery luego contiene una estructura similar a una matriz de los elementos DOM que coinciden con el selector (o solo el elemento único en el caso de this ).

Una vez que se construye el objeto jQuery, la API de jQuery ahora está expuesta. Cuando se llama a una función de jQuery api, se itera 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 this con el elemento actual. Esta llamada se puede ver en el fragmento de código anterior, donde obj es la estructura similar a una matriz, e i es el iterador utilizado para la posición en la matriz del elemento actual.

Answer 7

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