Analyse du code source jQuery jQuery.fn.each et jQuery.each utilisation_jquery

L'exemple de cet article décrit l'utilisation de jQuery.fn.each et jQuery.each dans l'analyse du code source jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Commençons par l'exemple. La fonction du code suivant est d'ajouter une classe rouge à chaque élément div sélectionné
.

Copier le code Le code est le suivant :

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

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

Le .each utilisé ci-dessus est jQuery.fn.each, qui est implémenté en interne via jQuery.each

Copier le code Le code est le suivant :

jQuery.fn.each

Tout d’abord, publions la description officielle de l’API. C’est très simple. Il n’y a que deux points à noter
. $(this).addClass('red') dans l'exemple ci-dessus, où this fait référence à l'élément dom actuellement utilisé
La méthode transmise dans chacun peut renvoyer n'importe quelle valeur. Lorsque la valeur renvoyée est fausse, sortez de l'opération de boucle actuelle
.

Copier le code Le code est le suivant :

/**

* @description Exécuter une méthode pour chaque élément dom correspondant dans l'objet jQuery

* @param {Number} index La position de l'élément actuellement traité dans la collection

* @param {DOMElement} Element L'élément dom actuellement traité

*/
.
.each( function(index, Element) )

Voici deux exemples simples

Exemple 1 :

Ajouter une classe rouge à tous les éléments div de la page

Copier le code Le code est le suivant :

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

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

Exemple 2

Ajouter la classe rouge aux 5 premiers éléments div de la page

Copier le code Le code est le suivant :

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

If(index>=5) return false; // Sortir de la boucle
$(this).addClass('red');
>
});

Comme ci-dessus, l'utilisation est assez simple, je n'entrerai donc pas dans les détails. Pour plus de détails, veuillez consulter http://api.jquery.com/each/.

Le code source interne est implémenté via jQuery.each. Parlons du code source de jQuery.each Après avoir parlé du code source de jQuery.each, le code source de jQuery.fn.each est très simple
jQuery.each :

Prenons d'abord un exemple simple

Copier le code Le code est le suivant :

$.each([52, 97], function(index, value ) {

alert(index ': 'value':' this);
>
});

Le contenu de sortie est le suivant :
0 : 52-52

1
1 : 97-97

Description officielle de l'API de la classe

Il y a également deux points à noter

Dans l'exemple ci-dessus, il s'agit de l'élément de la collection, c'est-à-dire le valueOfElement suivant

Renvoyez false dans le rappel pour sortir de la boucle

Copier le code Le code est le suivant :

/**

* @description Effectuer une opération sur chaque élément de la collection (tableau ou objet)

* @param {Number|String} indexInArray La position correspondante de l'élément dans la collection (si la collection est un tableau, c'est un nombre ; si la collection est un objet, c'est une valeur clé)

* @param {AnyValue} valueOfElement L'élément de la collection

*/
j
jQuery.each(collection, callback(indexInArray, valueOfElement))

Exemple 1

Copier le code Le code est le suivant :

$.each( ['un,'deux','trois' , 'quatre'], fonction(index, valeur){

If(index >= 2) renvoie false;

​​ alert( "Index :" index ", valeur : " valeur );
>
});

Exemple 2

L'exemple est copié directement du site officiel, il suffit de s'en contenter

Copier le code Le code est le suivant :

$.each( { nom : "John", lang : "JS " }, fonction(k, v){

​​ alert( "Clé : " k ", Valeur : " v );
>
});

Code source :

Copier le code Le code est le suivant :

// args est destiné à un usage interne uniquement
e
chacun : fonction (obj, rappel, args) {

valeur var,

je = 0,

longueur = obj.longueur,

isArray = isArraylike( obj ); // Obj est-il un objet de type tableau, tel que {'0':'hello', '1':'world', 'length':2}, qui sert en fait des objets jQuery

If ( args ) { // args, en fait, je n'ai trouvé aucun effet réel de ce paramètre ~~ Il suffit de sauter et de regarder le contenu dans else Il n'y a pas d'autre différence sauf que les paramètres passés dans le rappel sont différents            if ( isArray ) {
pour ( ; je < longueur; je ) {
                     value = callback.apply( obj[ i ], args );
Si ( valeur === faux ) {
pause;
                }
            }
         } autre {
pour ( je dans obj ) {
                     value = callback.apply( obj[ i ], args );
Si ( valeur === faux ) {
pause;
                }
            }
>
// Un étui spécial, rapide, pour l'usage le plus courant de chacun
} autre {
           if ( isArray ) {                                                                                                                                                                                                               pour ( ; je < longueur; je ) {
                   value = callback.call( obj[ i ], i, obj[ i ] );
Si ( valeur === faux ) {
pause;
                }
            }
} Sinon {// Objets de traitement
pour ( je dans obj ) {
                    value = callback.call( obj[ i ], i, obj[ i ] ); // value est la valeur de retour du rappel
If (value === false) {// Notez ici, lorsque value === false, sortez directement du cycle
pause;
                }
            }
>
>
Retourner l'objet ;
>
},



Code source jQuery.fn.each tardif :

C'est vraiment simple. Tant que vous comprenez jQuery.each, ça devrait aller. Il n'y a rien à dire ~

Copier le code Le code est le suivant :

chacun : fonction(rappel, args) {

Renvoie jQuery.each( this, callback, args );
>
},

Conclusion

Identique à jQuery.extend et jQuery.fn.extend, bien que les codes de jQuery.each et jQuery.fn.each soient très simples, ils jouent également un rôle très important. Ces deux méthodes sont largement utilisées dans jQuery, par exemple. exemple :

Copier le code Le code est le suivant :

jQuery.each("Boolean Number String Function Array Date RegExp Object Error" .split( " "), fonction(i, nom) {

Class2type[ "[objet " nom "]" ] = nom.toLowerCase();
>
});

Alors, maîtrisez chacun !

J'espère que cet article sera utile à la programmation jQuery de chacun.