Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery.fn.each und jQuery.each in der jQuery-Quellcode-Analyse. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Beginnen wir mit dem Beispiel. Die Funktion des folgenden Codes besteht darin, jedem ausgewählten div-Element eine rote Klasse hinzuzufügen
$('div').each(function(index, elem) {
$(this).addClass('red');
}
});
Das oben verwendete .each ist jQuery.fn.each, das intern durch jQuery.each implementiert wird
jQuery.fn.each
Lassen Sie uns zunächst die offizielle API-Beschreibung veröffentlichen. Es sind nur zwei Punkte zu beachten
$(this).addClass('red') im obigen Beispiel, wobei sich dies auf das dom-Element bezieht, das gerade bearbeitet wird
Die jeweils übergebene Methode kann einen beliebigen Wert zurückgeben. Wenn der zurückgegebene Wert falsch ist, verlassen Sie die aktuelle Schleifenoperation
/**
* @description Führt eine Methode für jedes passende dom-Element im jQuery-Objekt
aus
* @param {Number} index Die Position des aktuell verarbeiteten Elements in der Sammlung
* @param {DOMElement} Element Das aktuell verarbeitete Dom-Element
*/
.
.each( function(index, Element) )
Hier sind zwei einfache Beispiele
Beispiel 1:
Rote Klasse zu allen div-Elementen auf der Seite hinzufügen
$('div').each(function(index, elem) {
$(this).addClass('red');
}
});
Beispiel 2
Fügen Sie den ersten 5 div-Elementen auf der Seite eine rote Klasse hinzu
$('div').each(function(index, elem) {
If(index>=5) return false; // Aus der Schleife ausbrechen
$(this).addClass('red');
}
});
Wie oben ist die Verwendung recht einfach, daher werde ich nicht auf Details eingehen. Weitere Informationen finden Sie unter http://api.jquery.com/each/
Der interne Quellcode wird über jQuery.each implementiert. Nachdem wir über den Quellcode von jQuery.each gesprochen haben, ist der Quellcode von jQuery.fn.each sehr einfach >
jQuery.each:
Nehmen wir zunächst ein einfaches Beispiel
$.each([52, 97], function(index, value ) {
alarm(index ': ' value ':' this);
}
});
Der Ausgabeinhalt lautet wie folgt:
0: 52-52
1
1: 97-97
Offizielle API-Beschreibung der Klasse
Außerdem sind zwei Punkte zu beachten
Dies im obigen Beispiel ist das Element in der Sammlung, also der folgende valueOfElement
Geben Sie im Rückruf „false“ zurück, um aus der Schleife auszubrechen
/**
* @description Führen Sie eine Operation für jedes Element in der Sammlung (Array oder Objekt) aus
* @param {Number|String} indexInArray Die entsprechende Position des Elements in der Sammlung (wenn die Sammlung ein Array ist, ist es eine Zahl; wenn die Sammlung ein Objekt ist, ist es ein Schlüsselwert)
* @param {AnyValue} valueOfElement Das Element in der Sammlung
*/
j
jQuery.each( Sammlung, Rückruf(indexInArray, valueOfElement) )
Beispiel 1
$.each( ['eins,'zwei','drei' , 'vier'], Funktion(Index, Wert){
If(index >= 2) return false;
alert( "Index:" index ", value: " value );
}
});
Beispiel 2
Das Beispiel wurde direkt von der offiziellen Website kopiert, begnügen Sie sich einfach damit
$.each( { name: "John", lang: "JS " }, Funktion(k, v){
alert( "Schlüssel: " k ", Wert: " v );
}
});
Quellcode:
// args ist nur für den internen Gebrauch
e
every: function( obj, callback, args ) {
var-Wert,
i = 0,
Länge = obj.länge,
isArray = isArraylike( obj ); // Ist obj ein Array-ähnliches Objekt, wie zum Beispiel {'0':'hello', '1':'world', 'length':2}, das tatsächlich jQuery-Objekte bedient
If ( args ) { // args, ich habe tatsächlich keine tatsächliche Auswirkung dieses Parameters gefunden ~~ Überspringen Sie einfach den Inhalt und schauen Sie sich den Inhalt in else an. Es gibt keinen weiteren Unterschied, außer dass die im Rückruf übergebenen Parameter unterschiedlich sind
if ( isArray ) {
für ( ; i < Länge; i ) {
value = callback.apply( obj[ i ], args );
If (Wert === false) {
Pause;
}
}
} sonst {
für (i in obj) {
value = callback.apply( obj[ i ], args );
If (Wert === false) {
Pause;
}
}
}
// Ein spezieller, schneller Fall für die häufigste Verwendung von jedem
} sonst {
if ( isArray ) {
für ( ; i < Länge; i ) {
value = callback.call( obj[ i ], i, obj[ i ] );
If (Wert === false) {
Pause;
}
}
} Else {// Behandlungsobjekte
für (i in obj) {
value = callback.call( obj[ i ], i, obj[ i ] ); // value ist der Rückgabewert von callback
If (value === false) {// Beachten Sie hier: Wenn value === false, springen Sie direkt aus dem Zyklus
Pause;
}
}
}
}
Rückgabe obj;
}
},
Späterer jQuery.fn.each-Quellcode:
Es ist wirklich einfach. Solange Sie jQuery.each verstehen, sollte es Ihnen nichts ausmachen~
each: function( callback, args ) {
Geben Sie jQuery.each( this, callback, args );
zurück
}
},
Fazit
Wie jQuery.extend und jQuery.fn.extend, obwohl die Codes von jQuery.each und jQuery.fn.each sehr einfach sind, spielen diese beiden Methoden auch eine sehr wichtige Rolle in jQuery Beispiel:
jQuery.each("Boolean Number String Function Array Date RegExp Object Error" .split( " "), function(i, name) {
Class2type[ "[object " name "]" ] = name.toLowerCase();
}
});
Also, meistern Sie jeden!
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
