jQuery-Quellcode-Analyse jQuery.fn.each und jQuery.each using_jquery

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

Code kopieren Der Code lautet wie folgt:

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

Das oben verwendete .each ist jQuery.fn.each, das intern durch jQuery.each implementiert wird

Code kopieren Der Code lautet wie folgt:

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

Code kopieren Der Code lautet wie folgt:

/**

* @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

Code kopieren Der Code lautet wie folgt:

$('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

Code kopieren Der Code lautet wie folgt:

$('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

Code kopieren Der Code lautet wie folgt:

$.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

Code kopieren Der Code lautet wie folgt:

/**

* @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

Code kopieren Der Code lautet wie folgt:

$.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

Code kopieren Der Code lautet wie folgt:

$.each( { name: "John", lang: "JS " }, Funktion(k, v){

​​alert( "Schlüssel: " k ", Wert: " v );
}
});

Quellcode:

Code kopieren Der Code lautet wie folgt:

// 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~

Code kopieren Der Code lautet wie folgt:

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:

Code kopieren Der Code lautet wie folgt:

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.