Es gibt viele Einführungen zu this und $(this) im Internet. Die meisten von ihnen verdeutlichen nur die Richtungen von this und $(this). Tatsächlich haben sie Anwendungen und können nicht verallgemeinert werden , dies zeigt auf das Dom-Objekt.
Es ist verständlich, dass
$(this) auf das jQuery-Objekt zeigt, aber dies zeigt auf das dom-Objekt. Dies liegt daran, dass jQuery eine spezielle Verarbeitung durchgeführt hat.
Beim Erstellen eines jQuery-Objekts von dom erstellt jQuery nicht nur ein jQuery-Objekt für dom, sondern speichert dom auch im Array des erstellten Objekts.
elem = document.getElementById(match[2]);
if (elem && elem.parentNode) {
This.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = Selektor;
gib dies zurück;
Die Anweisung this[0] = elem implementiert ein Objektarray. Daher ist JavaScript eine sehr interessante Sprache. Wenn Sie diese für den Zugriff verwenden, können Sie auf die Mitgliedsfunktionen des Objekts zugreifen, auf das es verweist, und tatsächlich handelt es sich um ein Array von Objekten. Es speichert Dom-Objekte.
Werfen wir einen Blick auf $("p").each() -- Schleife
every: function( callback, args ) {
return jQuery.each( this, callback, args );
}
Nachdem Sie den Aufruf jeder Funktion gelesen haben, sollten Sie verstehen, dass jQuery.each( this, callback, args ); ein Array von Objekten aufruft und das Array von Objekten Dom-Objekte speichert, sodass dies in der Callback-Funktion natürlich dom ist Ziel
Schauen Sie sich noch einmal $("p").hide() --Member-Funktion an
Code kopieren Der Code lautet wie folgt:
verstecken: function() {
return showHide( this );
},
Funktion showHide( elements, show ) {var elem, display,
Werte = [],
index = 0,
Länge = Elemente.Länge;
for ( ; index < length; index ) {
elem = Elemente[Index];
if ( !elem.style ) {
weitermachen;
}
Werte[ Index ] = jQuery._data( elem, "olddisplay" );
if (show) {
// Die Inline-Anzeige dieses Elements zurücksetzen, um zu erfahren, ob es
ist
// durch kaskadierte Regeln ausgeblendet werden oder nicht
if ( !values[ index ] && elem.style.display === "none" ) {
elem.style.display = "";
}
// Elemente festlegen, die mit display: none
überschrieben wurden
// in einem Stylesheet zu dem Standardstil des Browsers
// für ein solches Element
if ( elem.style.display === "" && isHidden( elem ) ) {
Werte[ Index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
}
} else {
display = curCSS( elem, "display" );
if ( !values[ index ] && display !== "none" ) {
jQuery._data( elem, „olddisplay“, display );
}
}
}
// Anzeige der meisten Elemente in einer zweiten Schleife festlegen
// um den ständigen Reflow zu vermeiden
for ( index = 0; index < length; index ) {
elem = Elemente[Index];
if ( !elem.style ) {
weitermachen;
}
if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
elem.style.display = anzeigen? Werte[ Index ] || "" : "keine";
}
}
Rückgabeelemente;
}
Query, die Funktion „showHide“ und die Funktion „ShowHide“.一个dom对象.
最后看看$("p").bind() -- 事件
bind: Funktion( Typen, Daten, fn ) {
return this.on(types, null, data, fn);
},
on: function( Typen, Selektor, Daten, fn, /*INTERNAL*/ one ) {
// Dieser Teil des Codes wird weggelassen
return this.each( function() {
jQuery.event.add( this, models, fn, data, selector );
});
},
Die Bindungsfunktion ruft die On-Funktion auf und die On-Funktion implementiert jQuery.event.add über die Each-Funktion. Daher ist dies in jQuery.event.add( auch das Dom-Objekt. Dies ist also im Event auch das Dom-Objekt.
Das Obige ist mein persönliches Verständnis davon und $(this) in jQuery. Wenn Sie Fehler haben, kontaktieren Sie mich bitte oder hinterlassen Sie mir eine Nachricht