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

Je travaille actuellement à travers 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(); }); }); 

Notez que dans le premier exemple, nous utilisons $(this) pour append du texte à l’intérieur de chaque élément li . Dans le deuxième exemple, nous l’utilisons directement lors de la réinitialisation du formulaire.

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

Je pense que dans le premier exemple, $() convertit chaque élément li en un object jQuery qui comprend la fonction append() alors que dans le second exemple, reset() peut être appelé directement sur le formulaire.

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

Est-ce correct?

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

 $(this)[0] === this 

Fondamentalement, chaque fois que vous obtenez un ensemble d’éléments, jQuery le transforme en object 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 de l’invocation.

Donc, fondamentalement, dans $(this) , vous transmettez simplement this dans $() tant que paramètre afin que vous puissiez appeler les méthodes et fonctions jQuery.

Oui, vous avez besoin de $(this) pour les fonctions jQuery, mais lorsque vous voulez accéder aux méthodes javascript de base de l’élément qui n’utilise pas jQuery, vous pouvez simplement l’utiliser.

Lors de l’utilisation de jQuery , il est conseillé d’utiliser habituellement $(this) . Mais si vous savez (vous devriez apprendre et connaître) la différence, il est parfois plus pratique et plus rapide de l’utiliser. 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"); }); 

this l’élément, $(this) est l’object 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 scope fait référence au contexte d’exécution actuel ECMA . Pour comprendre this , il est important de comprendre la manière dont les contextes d’exécution fonctionnent en JavaScript.

les contextes d’exécution lient ceci

Lorsque le contrôle entre dans un contexte d’exécution (le code est exécuté dans cette scope), l’environnement pour les variables est configuré (Environnements lexical et variable – il configure essentiellement une zone pour les variables déjà accessibles et une zone pour les variables locales). stocké), et la liaison de this se produit.

jQuery lie ceci

Les contextes d’exécution forment une stack logique. Le résultat est que les contextes plus profonds dans la stack ont access aux variables précédentes, mais leurs liaisons peuvent avoir été modifiées. Chaque fois que jQuery appelle une fonction de rappel, celle-ci est modifiée en utilisant apply MDN .

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

Le résultat de l’appel apply est que, dans les fonctions de rappel jQuery, this fait référence à l’élément utilisé par la fonction de rappel.

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

Les rappels jQuery utilisent la fonction apply pour lier la fonction appelée à l’élément actuel. Cet élément provient du tableau d’éléments de l’object jQuery. Chaque object jQuery construit contient un tableau d’éléments correspondant à l’ API de sélecteur jQuery utilisée pour instancier l’object jQuery.

$(selector) appelle la fonction jQuery (souvenez-vous que $ est une référence à jQuery , code: window.jQuery = window.$ = jQuery; ). En interne, la fonction jQuery instancie un object fonction. Donc, même si cela ne semble pas évident, l’utilisation de $() interne utilise un new jQuery() . Une partie de la construction de cet object jQuery consiste à rechercher toutes les correspondances du sélecteur. Le constructeur acceptera également les chaînes et éléments HTML. Lorsque vous transmettez this au constructeur jQuery, vous transmettez l’élément en cours pour lequel un object jQuery doit être construit . L’object jQuery contient alors une structure de type tableau des éléments DOM correspondant au sélecteur (ou uniquement le seul élément dans le cas de this ).

Une fois l’object jQuery construit, l’API jQuery est maintenant exposée. Lorsqu’une fonction api jQuery est appelée, elle effectuera une itération interne sur cette structure de type tableau. Pour chaque élément du tableau, il appelle la fonction de rappel pour l’API, liant celle- this à l’élément en cours. Cet appel peut être vu dans l’extrait de code ci-dessus, où obj est la structure de type tableau, et i est l’iterator 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’object. En utilisant simplement this , il n’a que des fonctionnalités Javascript génériques.

Cela fait référence à un object 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')