Explication détaillée des exemples d'utilisation de chaque méthode dans l'objet jquery

Dans l'objet jQuery, la méthode each est simplement déléguée : passez l'objet jQuery comme premier paramètre à la méthode each de jQuery. En d'autres termes : la méthode each fournie par jQuery consiste à appeler la méthode un par un sur tous les sous-éléments de l'objet fournis par le paramètre 1. La fonction each() est une fonction outil fournie par pratiquement tous les frameworks. vous Vous pouvez parcourir les valeurs d'attribut des objets et des tableaux et les traiter. Les objets jQuery et jQuery implémentent cette méthode. Pour les objets jQuery, la méthode each est simplement déléguée : l'objet jQuery est passé comme premier paramètre à la méthode each de jQuery. En d'autres termes : la méthode each fournie par jQuery est Tous les sous-éléments de. les objets fournis par le paramètre 1 sont appelés un à un. Chaque méthode fournie par l'objet jQuery appelle les sous-éléments de jQuery un par un.

Les effets de chaque fonction ne sont pas totalement cohérents selon le type de paramètres :

1. Traverser des objets (avec des paramètres supplémentaires)

$.each(Object, function(p1, p2) {    
   this;       //这里的this指向每次遍历中Object的当前属性值
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2. > Traverser des tableaux (avec paramètres de pièce jointe)

Le code est le suivant :

$.each(Array, function(p1, p2){    
  this;       //这里的this指向每次遍历中Array的当前元素
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3. Traverser des objets (sans paramètres supplémentaires)

Le code est. comme suit :

$.each(Object, function(name, value) {     
       this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

4. Parcourez le tableau (pas de paramètres supplémentaires)

Le code est le suivant :

$.each(Array, function(i, value) {     
      this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

Voici quelques utilisations courantes de jQuery each méthode :

each(callback)

Exécute une fonction avec chaque élément correspondant comme contexte.
signifie que chaque fois que la fonction transmise est exécutée, le mot-clé this dans la fonction pointe vers un élément DOM différent (un élément correspondant différent à chaque fois). De plus, chaque fois que la fonction est exécutée, une valeur numérique représentant la position de l'élément comme environnement d'exécution dans l'ensemble des éléments correspondants est transmise à la fonction en tant que paramètre (un entier commençant à zéro). Renvoyer « false » arrêtera la boucle (tout comme utiliser « break » dans une boucle normale). Renvoie 'true' pour passer à la boucle suivante (tout comme utiliser '
continue' dans une boucle normale). Le rappel suivant est la
fonction de rappel , indiquant l'opération qui doit être effectuée lors de la traversée des éléments. Commençons par un exemple simple ci-dessous : Parcourez deux images et définissez leurs attributs src. Remarque : ici, il s'agit de l'objet DOM plutôt que de l'objet jQuery.

<img></img/>
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

Bien sûr, jquery permet des sauts personnalisés lors de la traversée d'éléments. Veuillez consulter l'exemple de code : vous pouvez utiliser 'return' pour sortir de la boucle each() à l'avance.

Code HTML :

Le code est le suivant :

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

Code jQuery :

Le code est le suivant :

<🎜 La méthode >each() spécifie une fonction à exécuter pour chaque élément correspondant.

$("button").click(function(){
    $("div").each(function(index, domEle){
        $(domEle).css("backgroundColor", "wheat");
        if ($(this).is("#stop")) {
            $("span").text("在div块为#" + index + "的地方停止。");
            return false;
        }
    })
}

Astuce : Renvoyer false peut être utilisé pour arrêter la boucle plus tôt.

Syntaxe

$(selector).each(function(index,element)) Paramètre Description
function(index,element) Obligatoire. Spécifie la fonction à exécuter pour chaque élément correspondant.
•index - la position d'index du sélecteur
•element - l'élément actuel (vous pouvez également utiliser le sélecteur "this"

l'objet obj n'est pas un tableau

La plus grande différence entre cette méthode et 1 vaut : La méthode fn sera exécutée une par une quelle que soit la valeur de retour, en d'autres termes, toutes les propriétés de l'objet obj seront appelées par la méthode fn, même si la fonction fn renvoie false

.

Il est important de noter que la méthode d'appel spécifique de fn dans chaque méthode n'est pas un simple fn(i, val) ou fn(args), mais fn.call(val,i,val) ou fn .apply(obj.args), ce qui signifie que dans votre propre implémentation fn, vous pouvez directement utiliser ce pointeur pour référencer les sous-éléments du tableau ou de l'objet

jQuery.each = function(obj, fn, args){
    if (args) {
        if (obj.length == undefined) {
            for (var i in obj)
                fn.apply(obj, args);
        } else {
            for (var i = 0, ol = obj.length; i < ol; i++) {
                if (fn.apply(obj, args) === false)
                    break;
            }
        }
    } else {
        if (obj.length == undefined) {
            for (var i in obj)
                fn.call(obj, i, obj);
        } else {
            for (var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val, i, val) !== false; val = obj[++i]) {
            }
        }
    }
    return obj;
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!