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

Question

Je travaille actuellement à travers ce tutoriel: Getting Started with 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(); 
    }); 
}); 

Avis dans le premier exemple, nous utilisons $(this) pour ajouter un texte à l'intérieur de chaque élément li. Dans le deuxième exemple, nous utilisons this directement lors de la réinitialisation du formulaire. Semble être utilisé beaucoup plus souvent que le this.

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

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

Est-ce correct?

Answer 1

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

$(this)[0] === this 

En principe, chaque fois que vous obtenez un ensemble d'éléments du dos jQuery il se transforme en un jQuery object. Si vous savez que vous n'avez qu'un seul résultat, ça va être dans le premier élément.

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

Et ainsi de suite ...

Answer 2

Oui, en utilisant $(this), vous avez activé la fonctionnalité jQuery pour l'objet. En utilisant simplement this, il n'a que des fonctionnalités Javascript génériques.

Answer 3

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

Answer 4

$() est la fonction de constructeur jQuery.

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

Donc, en gros, dans $(this), vous passez simplement le this en $() comme paramètre pour pouvoir appeler les méthodes et fonctions jQuery.

Answer 5

Lorsque vous utilisez jQuery, il est conseillé d'utiliser habituellement $(this). Mais si vous savez (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 purs que

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

Answer 6

cette référence 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') 

Answer 7

this est 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 se réfère au courant Execution Context^ECMA. Afin de comprendre this, il est important de comprendre le fonctionnement des contextes d'exécution en JavaScript.

contextes d'exécution se lient ce

Lorsque le contrôle entre dans un contexte d'exécution (code est en cours d'exécution en ce que la portée) de l'environnement pour les variables sont configurés (environnements lexicaux et variables - essentiellement Ceci définit une zone pour les variables à entrée qui était déjà accessible, et une zone pour les variables locales à stocker), et la liaison de this se produit.

jQuery lie cette

contextes d'exécution forment une pile logique. Le résultat est que les contextes plus profonds dans 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 en utilisant apply^MDN.

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

Le résultat de l'appel apply est que à l'intérieur des fonctions de rappel jQuery, this fait référence à 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 ce cadre, this == element est vrai. Les rappels jQuery utilisent la fonction apply pour lier la fonction appelée avec l'élément en cours. 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 à selector^{jQuery API} qui a été utilisé pour instancier l'objet jQuery.

$(selector) appelle la fonction jQuery (rappelez-vous que $ 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 $() utilise en interne new jQuery(). Une partie de la construction de cet objet jQuery consiste à trouver toutes les correspondances du sélecteur. Le constructeur acceptera également les chaînes html et les éléments. Lorsque vous transmettez this au constructeur jQuery, vous transmettez l'élément en cours pour qu'un objet jQuery soit construit avec. 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 va itérer en interne sur cette structure de type tableau. Pour chaque élément du tableau, il appelle la fonction de rappel pour l'API, liant le this du rappel à 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'itérateur utilisé pour la position dans le tableau de l'élément en cours.