Detaillierte Erklärung und Beispiele der einzelnen jQuery-Funktionen-js-Tutorial-php.cn

Detaillierte Erklärung und Beispiele der einzelnen jQuery-Funktionen

php中世界最好的语言

Freigeben： 2017-12-04 14:14:35

Original

2691 Leute haben es durchsucht

Wir wissen, dass jede Funktion in JQuery sehr leistungsfähig ist und viele Daten durchlaufen kann. Deshalb werde ich Ihnen dieses Mal eine detaillierte Einführung in die Verwendung jeder Funktion von jQuery und ein Beispiel geben.

$.each() unterscheidet sich von $(selector).each(). Letzteres wird speziell zum Durchlaufen von JQuery-Objekten verwendet. Ersteres kann zum Durchlaufen jeder Sammlung verwendet werden (ob es sich um ein Array oder ein Array handelt). Wenn es sich um ein Array handelt, RückruffunktionÜbergeben Sie jedes Mal den Index des Arrays und den entsprechenden Wert (der Wert kann auch über das Schlüsselwort this abgerufen werden, aber JavaScript umschließt diesen Wert immer als ein Objekt – auch wenn es eine Zeichenfolge oder eine Zahl ist), gibt die Methode den ersten Parameter des Objekts zurück, das von durchlaufen wird. Die Methode

each() kann dies tun Die DOM-Schleifenstruktur ist prägnant und weniger fehleranfällig. Die Funktion every() kapselt eine sehr leistungsfähige Traversierungsfunktion und ist sehr praktisch zu verwenden. Sie kann eindimensionale Arrays, mehrdimensionale Arrays, DOM, JSON usw.

Die Verwendung von $each während des JavaScript-Entwicklungsprozesses kann unseren Arbeitsaufwand erheblich reduzieren.

Hier sind einige häufig verwendete Verwendungen von jedem

jeder verarbeitet eindimensionale Arrays

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

Nach dem Login kopieren

alert(i) gibt 0, 1, 2 aus

alert(val) gibt aaa, bbb, ccc aus

jeder Prozess

zweidimensionales Array

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

Nach dem Login kopieren

arr2 ist ein zweidimensionales Array, item ist Äquivalent zum Abrufen jedes Arrays in diesem zweidimensionalen Array.

item[0] relativ zur Übernahme des ersten Werts in jedem eindimensionalen Array

alert(i) gibt 0, 1, 2 aus, da dieses zweidimensionale Array 3 Array-Elemente enthält

alert(item) wird als ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', ' cc' ausgegeben , 'ccc']

Nach einer geringfügigen Änderung der Verarbeitung dieses zweistelligen Arrays

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

Nach dem Login kopieren

alert(j) gibt 0, 1, 2, 0, 1, 2, 0 aus , 1, 2

alert(val) wird als a, aa, aaa, b, bb, bbb, c, cc, ccc ausgegeben

jeder verarbeitet JSON-Daten, dies ist jeweils noch leistungsfähiger , es kann jedes Attribut durchlaufen

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

Nach dem Login kopieren

Hier gibt Alert(key) eins zwei drei aus

alert(val) gibt eins, 1 aus , zwei, 2, drei, 3

Warum ist der Schlüssel hier keine Zahl, sondern ein Attribut? Da es sich beim JSON-Format um eine Menge ungeordneter Attributwerte handelt, wo kommt er her? Was ist mit Zahlen?

Und dieser Wert entspricht obj[key]

ecah verarbeitet dom-Elemente. Hier wird ein Eingabeformularelement als Beispiel verwendet.

Wenn Sie einen Code wie diesen in Ihrem Dom haben

und Sie dann jeden wie folgt verwenden

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

Nach dem Login kopieren

, dann gibt Alert(val) [object HTMLInputElement] aus, weil es ist ein Formularelement.

alert(i) gibt 0, 1, 2, 3 aus

alert(val.name); gibt aaa, bbb, ccc, ddd aus, wenn Sie this.name verwenden, wird es ausgegeben Ausgabe Das gleiche Ergebnis

alert(val.value); gibt 111.222.333.444 aus. Wenn Sie this.value verwenden, wird das gleiche Ergebnis ausgegeben

Wenn Sie den obigen Code in die folgende Form ändern

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

Nach dem Login kopieren

Wie Sie sehen, sind die Ausgabeergebnisse die gleichen. Was den Unterschied zwischen den beiden Schreibmethoden betrifft, weiß ich noch nicht. Diese Änderung führt zu denselben Ergebnissen, wenn sie auf die oben genannten Array-Operationen angewendet wird.

Auf diese Weise wurden die tatsächlichen Ergebnisse mehrerer Beispiele beantwortet. Dann studieren Sie weiter, man kann nie wissen, was passiert und warum.

Aus den obigen Beispielen können wir ersehen, dass sowohl jQuery- als auch jQuery-Objekte diese Methode implementieren. Bei jQuery-Objekten wird einfach die Each-Methode delegiert: Das jQuery-Objekt wird als erster Parameter an die Each-Methode von jQuery übergeben.

Sehen Sie sich die Implementierung jedes einzelnen Elements in jQuery an (Netzwerkauszug)

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;
}

Nach dem Login kopieren

jquery beurteilt automatisch anhand der eingehenden Elemente und wendet es dann anhand des Urteils an Ergebnisse Oder die Verarbeitung der Aufrufmethode. In der Implementierung von fn können Sie diesen Zeiger direkt verwenden, um auf die Unterelemente des Arrays oder Objekts zu verweisen.

1.obj-Objekt ist ein Array

Jede Methode ruft die fn-Funktion nacheinander für die Unterelemente im Array auf, bis das Ergebnis durch den Aufruf eines bestimmten Unterelements zurückgegeben wird Mit anderen Worten: Wir können jeden Methodenaufruf nach Erfüllung bestimmter Bedingungen mit der bereitgestellten fn-Funktion beenden. Wenn jede Methode den arg-Parameter bereitstellt, ist der vom fn-Funktionsaufruf übergebene Parameter arg, andernfalls: der Unterelementindex, das Unterelement selbst

2.obj Das Objekt ist kein Array

Diese Methode ist dieselbe. Der größte Unterschied zwischen 1 und 1 besteht darin, dass die fn-Methode unabhängig vom Rückgabewert einzeln ausgeführt wird. Mit anderen Worten: Alle Eigenschaften des obj-Objekts werden von der fn-Methode aufgerufen, auch wenn die fn-Funktion false zurückgibt. Die im Aufruf übergebenen Parameter ähneln 1.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie sieht die JS-Engine aus, wenn sie ausgeführt wird?

So verwenden Sie die Methode jssplice() in der JS-Entwicklung

So laden Sie NodeJS herunter und installieren es

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung und Beispiele der einzelnen jQuery-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!