Explication détaillée et exemples de chaque fonction de jQuery

Nous savons que dans JQuery, la fonction each est très puissante et peut parcourir beaucoup de données. Cette fois, je vais donc vous donner une introduction détaillée à l'utilisation de la fonction each de jQuery et un exemple.

$.each() est différent de $(selector).each(). Ce dernier est spécialement utilisé pour parcourir des objets jquery. Le premier peut être utilisé pour parcourir n'importe quelle collection (qu'il s'agisse d'un tableau ou d'un tableau). objet). S'il s'agit d'un tableau, Fonction de rappelPassez à chaque fois l'index du tableau et la valeur correspondante (la valeur peut également être obtenue via le mot-clé this, mais JavaScript enveloppera toujours cette valeur comme un objet (même s'il s'agit d'une chaîne ou d'un nombre), la méthode renverra le premier paramètre de l'objet parcouru par La méthode

each() peut créer. la structure de la boucle DOM est concise et moins sujette aux erreurs. La fonction each() encapsule une fonction de traversée très puissante et est très pratique à utiliser. Elle peut parcourir tableau unidimensionnel, tableau multidimensionnel, DOM, JSON, etc.

Utiliser $each pendant le processus de développement javaScript peut réduire considérablement notre charge de travail.

Voici quelques utilisations couramment utilisées de chacun

chacun traite des tableaux unidimensionnels

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
  alert(i); 
  alert(val);
});

alert(i) produira 0, 1, 2

alert(val) affichera aaa, bbb, ccc

chaque processus tableau bidimensionnel

vararr2 = [['a','aa','aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
  alert(i);
  alert(item);
});

arr2 est un tableau bidimensionnel, l'élément est équivalent à Obtenir chaque tableau de ce tableau bidimensionnel.

item[0] relatif à la prise de la première valeur de chaque tableau unidimensionnel

alert(i) affichera 0, 1, 2, car ce tableau à deux dimensions contient 3 éléments du tableau

alert(item) sera affiché sous la forme ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc' , 'ccc']

Après avoir légèrement modifié le traitement de ce tableau à deux chiffres

var arr = [['a', 'aa', 'aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　});
});

alert(j) affichera 0, 1, 2, 0, 1, 2, 0 , 1, 2

alert(val) sera affiché sous la forme a, aa, aaa, b, bb, bbb, c, cc, ccc

chacun traite les données json, chacune étant encore plus puissante , il peut parcourir chaque attribut

var obj = { one:1, two:2, three:3};
$.each(obj, function(key, val) {
  alert(key);
  alert(val);
});

Ici, alert(key) affichera un deux trois

alert(val) affichera un, 1 , deux, 2, trois, 3

Pourquoi la clé ici n'est-elle pas un nombre mais un attribut ? Parce que le format json est un ensemble d'attributs-valeurs non ordonnés, puisqu'il n'est pas ordonné, d'où vient-il ? Et les chiffres ?

Et cette valeur est équivalente à obj[key]

ecah traite les éléments dom Ici, un élément de formulaire d'entrée est utilisé comme exemple.

Si vous avez un code comme celui-ci dans votre dom

et que vous l'utilisez ensuite comme suit

$.each($("input:hidden"),function(i,val){
  alert(val);
  alert(i);
  alert(val.name);
  alert(val.value);
});

alors alert(val) affichera [object HTMLInputElement] car c'est un élément de formulaire.

alert(i) affichera 0, 1, 2, 3

alert(val.name); affichera aaa, bbb, ccc, ddd, si vous utilisez this.name, ce sera le cas. output Le même résultat

alert(val.value); affichera 111 222 333 444. Si vous utilisez this.value, le même résultat sera affiché

Si vous modifiez le code ci-dessus sous la forme suivante.

$("input:hidden").each(function(i,val){
  alert(i);
  alert(val.name);
  alert(val.value);
});

Comme vous pouvez le voir, les résultats de sortie sont les mêmes. Quant à la différence entre les deux méthodes d'écriture, je ne sais pas encore. Ce changement produira les mêmes résultats lorsqu’il sera appliqué aux opérations sur les tableaux ci-dessus.

De cette façon, les résultats réels de plusieurs exemples ont été répondus. Alors continuez à étudier, vous ne pouvez jamais savoir ce qui se passe et pourquoi.

À partir des exemples ci-dessus, nous pouvons voir que 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.

Regardez l'implémentation de chacun dans jQuery (extrait du réseau)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
  if (length == undefined) {
    for (name in object) {
      if (callback.apply(object[name], args) === false) {
        break;
      }
    }
  }
  else{
    for (; i < length;) {
      if (callback.apply(object[i++], args) === false) {
        break;
      }
    }
  }
}
else{
  if (length == undefined) {
    for (name in object) {
      if (callback.call(object[name], name, object[name]) === false) {
        break;
      }
    }
  }
  else{
    for (var value = object[0]; i < length && callback.call(value, i, value) !==false; value = object[++i]) {}
      /*
      object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
      得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
      将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
      其中callback是类似于 function(index, elem) { ... } 的方法。
      所以就得到 $("...").each(function(index, elem){ ... });
      */
    }
  }
  return object;
}

jquery jugera automatiquement en fonction des éléments entrants, puis appliquera en fonction du jugement résultats Ou le traitement de la méthode d'appel. Dans l'implémentation de fn, vous pouvez directement utiliser ce pointeur pour référencer les sous-éléments du tableau ou de l'objet.

1. L'objet obj est un tableau

Chaque méthode appellera la fonction fn un par un sur les sous-éléments du tableau jusqu'au résultat renvoyé en appelant un certain sous-élément est faux.En d'autres termes, nous pouvons le traiter par la fonction fn fournie pour quitter chaque appel de méthode après avoir rempli certaines conditions. Lorsque la méthode each fournit le paramètre arg, le paramètre passé par l'appel de fonction fn est arg, sinon : l'index du sous-élément, le sous-élément lui-même

2.obj L'objet n'est pas un tableau

Cette méthode est la même. La plus grande différence entre 1 et 1 est que 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. Les paramètres transmis lors de l'appel sont similaires à 1.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

À quoi ressemble le moteur JS lors de son exécution

Comment utiliser la méthode jssplice() dans le développement JS

Comment télécharger et installer nodejs

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!