Quelle est la différence entre '$ (this)' et 'this'?

Je travaille actuellement sur ce tutoriel: Premiers pas avec jQuery

Pour les deux exemples ci-dessous:

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

Remarquez dans le premier exemple, nous utilisons $(this)pour ajouter du texte à l'intérieur de chaque liélément. Dans le deuxième exemple, nous utilisons thisdirectement lors de la réinitialisation du formulaire.

$(this)semble être utilisé beaucoup plus souvent que this.

Ma conjecture est dans le premier exemple, $()convertit chaque liélément en un objet jQuery qui comprend la append()fonction alors que dans le deuxième exemple reset()peut être appelé directement sur le formulaire.

Fondamentalement, nous avons besoin $()de fonctions spéciales jQuery uniquement.

Est-ce correct?

Oui, vous n'avez besoin que $()lorsque vous utilisez jQuery. Si vous voulez que jQuery vous aide à faire des choses DOM, gardez cela à l'esprit.

$(this)[0] === this

Fondamentalement, chaque fois que vous récupérez un ensemble d'éléments, jQuery le transforme en objet jQuery . Si vous savez que vous n'avez qu'un seul résultat, ce sera dans le premier élément.

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

Etc...

$() est la fonction constructeur jQuery.

this est une référence à l'élément DOM d'invocation.

Donc, fondamentalement, dans $(this), vous passez simplement l'entrée thisen $()tant que paramètre pour pouvoir appeler des méthodes et des fonctions jQuery.

Oui, vous avez besoin $(this)de fonctions jQuery, mais lorsque vous souhaitez accéder aux méthodes javascript de base de l'élément qui n'utilisent pas jQuery, vous pouvez simplement utiliser this.

Lors de l'utilisation jQuery, il est conseillé d'utiliser $(this)généralement. Mais si vous connaissez (vous devez apprendre et connaître) la différence, il est parfois plus pratique et plus rapide d'utiliser simplement this. Par exemple:

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

est plus facile et plus pur que

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

thisest l'élément, $(this)est l'objet jQuery construit avec cet élément

$(".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);
});

Un regard plus profond

this^MDN est contenu dans un contexte d'exécution

La portée fait référence au contexte d'exécution actuel ^ECMA . Pour comprendre this, il est important de comprendre le fonctionnement des contextes d'exécution en JavaScript.

les contextes d'exécution lient ce

Lorsque le contrôle entre dans un contexte d'exécution (le code est en cours d'exécution dans cette étendue), l'environnement des variables est configuré (environnements lexical et variable - essentiellement cela crée une zone pour les variables à saisir qui étaient déjà accessibles, et une zone pour les variables locales à stocké), et la liaison de thisse produit.

jQuery lie ceci

Les contextes d'exécution forment une pile logique. Le résultat est que les contextes plus profonds de la pile ont accès aux variables précédentes, mais leurs liaisons peuvent avoir été modifiées. Chaque fois que jQuery appelle une fonction de rappel, il modifie la liaison this en utilisant apply^MDN .

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

Le résultat de l'appel applyest qu'à l' intérieur des fonctions de rappel jQuery, se thisréfère à l'élément courant utilisé par la fonction de rappel.

Par exemple, dans .each, la fonction de rappel couramment utilisée permet .each(function(index,element){/*scope*/}). Dans cette portée, this == elementc'est vrai.

Les rappels jQuery utilisent la fonction apply pour lier la fonction appelée avec l'élément courant. Cet élément provient du tableau d'éléments de l'objet jQuery. Chaque objet jQuery construit contient un tableau d'éléments qui correspondent à l' ^{API jQuery} du sélecteur qui a été utilisée pour instancier l'objet jQuery.

$(selector)appelle la fonction jQuery (rappelez-vous que $c'est une référence à jQuery, code:) window.jQuery = window.$ = jQuery;. En interne, la fonction jQuery instancie un objet fonction. Donc, bien que cela ne soit pas immédiatement évident, l'utilisation en $()interne new jQuery(). Une partie de la construction de cet objet jQuery consiste à trouver toutes les correspondances du sélecteur. Le constructeur accepte également les chaînes et les éléments html . Lorsque vous passez thisau constructeur jQuery, vous passez l'élément actuel pour un objet jQuery à construire . L'objet jQuery contient alors une structure de type tableau des éléments DOM correspondant au sélecteur (ou simplement l'élément unique dans le cas de this).

Une fois l'objet jQuery construit, l'API jQuery est maintenant exposée. Lorsqu'une fonction api jQuery est appelée, elle itère en interne sur cette structure de type tableau. Pour chaque élément du tableau, il appelle la fonction de rappel pour l'API, liant les rappels thisà l'élément actuel. Cet appel peut être vu dans l'extrait de code ci-dessus où se objtrouve la structure de type tableau, et iest l'itérateur utilisé pour la position dans le tableau de l'élément en cours.

Oui, en utilisant $(this), vous avez activé la fonctionnalité jQuery pour l'objet. En utilisant simplement this, il n'a qu'une fonctionnalité Javascript générique.

thisréférencer un objet javascript et $(this)utilisé pour encapsuler avec jQuery.

Exemple =>

// 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')