Une discussion détaillée de ceci et de $(this)_jquery dans jQuery

Il existe de nombreuses introductions sur this et $(this) de jQuery sur Internet. La plupart d'entre elles clarifient simplement les directions de this et $(this). En fait, elles ont des applications et ne peuvent pas être généralisées lorsque jQuery appelle des fonctions membres. , cela pointe vers l'objet dom.

Il est compréhensible que

$(this) pointe vers l'objet jQuery, mais cela pointe vers l'objet dom C'est parce que jQuery a effectué un traitement spécial.

Lors de la création d'un objet jQuery de dom, jQuery crée non seulement un objet jQuery pour dom, mais stocke également dom dans le tableau de l'objet créé.

Copier le code Le code est le suivant :

elem = document.getElementById(match[2]);
if (elem && elem.parentNode) {
Cette.longueur = 1;
this[0] = élément ;
}

this.context = document;
this.selector = sélecteur;
rends ça

L'instruction this[0] = elem implémente un tableau d'objets. JavaScript est donc un langage très intéressant. Lorsque vous l'utilisez pour accéder, vous pouvez accéder aux fonctions membres de l'objet vers lequel il pointe, et en fait il s'agit d'un tableau d'objets. Il stocke les objets dom.

Jetons un coup d'oeil à $("p").each() -- loop

Copier le code Le code est le suivant :

chacun : fonction (rappel, arguments) {
          return jQuery.each( this, callback, args ); }  

Après avoir lu l'appel de chaque fonction, vous devez comprendre que jQuery.each( this, callback, args ); appelle un tableau d'objets, et le tableau d'objets stocke les objets dom, donc ceci dans la fonction de rappel est naturellement dom Cible

Regardez à nouveau $("p").hide()　--Fonction membre

Copier le code Le code est le suivant :

cacher : function() { 
        return showHide(this); 
    }, 
 function showHide( elements, show ) {var elem, display, 
        valeurs = [], 
        indice = 0, 
        longueur = éléments.longueur; 
    pour ( ; index < longueur; index ) { 
        elem = éléments[ index ]; 
        if ( !elem.style ) { 
            continuer; 
        } 
        valeurs[ index ] = jQuery._data( elem, "olddisplay" ); 
        if (afficher) { 
            // Réinitialise l'affichage en ligne de cet élément pour savoir s'il l'est 
            // être masqué ou non par des règles en cascade 
            if ( !values[ index ] && elem.style.display === "aucun" ) { 
                elem.style.display = ""; 
            } 
            // Définir les éléments qui ont été remplacés par display : aucun  
            // dans une feuille de style quel que soit le style de navigateur par défaut 
            // pour un tel élément 
            if ( elem.style.display === "" && isHidden( elem ) ) { 
                valeurs[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) ); 
            } 
        } autre { 
            display = curCSS(elem, "affichage" ); 
            if ( !values[ index ] && display !== "aucun" ) { 
                jQuery._data( elem, "olddisplay", affichage ); 
            } 
        } 
    } 
    // Définir l'affichage de la plupart des éléments dans une deuxième boucle 
    // pour éviter la redistribution constante 
    pour ( index = 0; index < longueur; index ) { 
        elem = éléments[ index ]; 
        if ( !elem.style ) { 
            continuer; 
        } 
        if ( !show || elem.style.display === "aucun" || elem.style.display === "" ) { 
            elem.style.display = afficher ? valeurs[ indice ] || "" : "aucun"; 
        } 
    } 
    renvoyer des éléments ; 
} 

  从上面的代码可以看出hide行数其实调用的是showHide，而传入的第一个参数this，并不是dom对象，而是jQuery Voir aussi AfficherHide一个dom对象。

最后看看$("p").bind()　--　事件

复制代码 代码如下 :

bind : fonction (types, données, fn) { 
        return this.on( types, null, data, fn ); 
    }, 

复制代码 代码如下 :

on : function( types, sélecteur, données, fn, /*INTERNAL*/ one ) {
// Cette partie du code est omise
           return this.each( function() {                                            jQuery.event.add( this, types, fn, data, selector
);          });   },

La fonction bind appelle la fonction on, et la fonction on implémente jQuery.event.add via chaque fonction. Par conséquent, ceci dans jQuery.event.add (c'est aussi l'objet dom. Donc ceci dans l'événement est aussi l'objet dom.

Ce qui précède est ma compréhension personnelle de ceci et de $(this) dans jQuery. Si vous avez des erreurs, veuillez me contacter ou laissez-moi un message

.