Heim > Artikel > Web-Frontend > Wie verwende ich jeden (Rückruf) von jquery?
Wie verwende ich jeden (Rückruf) von jquery?
- 伊谢尔伦Original
- 2017-06-16 15:58:481264Durchsuche
Übersicht
Führen Sie eine Funktion mit jedem passenden Element als Kontext aus.
bedeutet, dass jedes Mal, wenn die übergebene Funktion ausgeführt wird, das Schlüsselwort this in der Funktion auf ein anderes DOM-Element verweist (jedes Mal ein anderes passendes Element). Darüber hinaus wird bei jeder Ausführung der Funktion ein numerischer Wert, der die Position des Elements als Ausführungsumgebung im passenden Elementsatz darstellt, als Parameter an die Funktion übergeben (eine auf Null basierende Ganzzahl). Die Rückgabe von „false“ stoppt die Schleife (genau wie die Verwendung von „break“ in einer normalen Schleife). Geben Sie „true“ zurück, um zur nächsten Schleife zu springen (genau wie die Verwendung von „continue“ in einer normalen Schleife).
Beispiele sind wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title> 遍历元素</title>
<script src="js/jQuery.js" type="text/JavaScript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
body{font-size:13px}
img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
</style>
<script type="text/javascript">
$(function() {
$("img").each(function(index){
// 根据形参index 设置元素的title 属性
this.title = " 第" + index +" 幅风景图片，alt 内容是" + this.alt;
if(i==1)
return false;
})
})
</script>
</head>
<body>
<p>
<img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
<img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
<img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
</p>
</body>
</html>Allgemeine Iterationsmethode, die zum Iterieren von Objekten und Arrays verwendet werden kann.
Im Gegensatz zur Methode $().each(), die über jQuery-Objekte iteriert, kann diese Methode zum Iterieren über jedes beliebige Objekt verwendet werden. Die Rückruffunktion hat zwei Parameter: Der erste ist das Mitglied des Objekts oder der Index des Arrays und der zweite ist die entsprechende Variable oder der entsprechende Inhalt. Wenn Sie die Each-Schleife verlassen müssen, können Sie dafür sorgen, dass die Rückruffunktion „false“ zurückgibt und andere Rückgabewerte ignoriert werden.
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });Ergebnis: Tom ist 20 Jahre alt
Jerry ist 30 Jahre alt
Jim ist 40 Jahre alt
var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});Ergebnis: 1 =1 2=2 3=3
var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});Ergebnis: 0 1 2
var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});Ergebnis: 20 30 40
$ .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 handelt). Die Rückruffunktion übergibt jedes Mal den Index und den entsprechenden Wert (der Wert kann auch über das Schlüsselwort this abgerufen werden, aber JavaScript umschließt diesen Wert immer als Objekt – auch wenn es sich um eine Zeichenfolge oder eine Zahl handelt). gibt das durchquerte Objekt zurückDer erste Parameter.
each()-Methode kann die DOM-Schleifenstruktur prägnant und weniger fehleranfällig machen. Die Funktion every() kapselt eine sehr leistungsstarke Traversierungsfunktion und ist sehr praktisch zu verwenden. Sie kann eindimensionale Arrays , mehrdimensionale Arrays , DOM, JSON usw. durchlaufen 🎜> entwickelt in JavaScript. Die Verwendung von $each während des Prozesses kann unseren Arbeitsaufwand erheblich reduzieren.
jeder verarbeitet ein eindimensionales Array
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});alert(val) gibt aaa, bbb, ccc aus
jeder behandelt
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});item[0] relativ zur Annahme 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', 'ccc']
Nach einer geringfügigen Änderung der Verarbeitung dieses zweistelligen Arrays
alert(j) gibt 0, 1, 2, 0, 1, 2, 0, 1, 2
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);
});
}); aus alarm(val) gibt a, aa, aaa, b, bb, bbb, c, cc, ccc ausjeder verarbeitet JSON-Daten, dieser ist noch leistungsfähiger, er kann jedes An-Attribut schleifen
Hier gibt alarm(key) eins zwei drei aus
alert(val) gibt eins, 1, zwei, 2, drei, 3 ausvar obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});Warum ist der Schlüssel hier keine Zahl? Attribute, weil das JSON-Format eine Menge ungeordneter Attributwerte ist. Da es ungeordnet ist, wo sind die Zahlen? Und dieser Wert entspricht obj[key]
ecah verarbeitet dom-Elemente. Hier wird ein Eingabeformularelement als Beispiel verwendet.
und ihn dann wie folgt verwenden
<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>
, dann wird „alert(val)“ ausgegeben [object HTMLInputElement] , da es sich um ein Formularelement handelt.
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});alert(i) gibt 0, 1, 2, 3 ausalert(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
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.
Das obige ist der detaillierte Inhalt vonWie verwende ich jeden (Rückruf) von jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!