Heim Web-Frontend js-Tutorial Die Verwendung von JQuery-basierten Arrays

Die Verwendung von JQuery-basierten Arrays

Jun 29, 2017 am 10:54 AM
jquery 使用 数组

Die Array-Verarbeitung von jQuery ist praktisch und voll funktionsfähig. Es kapselt viele Funktionen, die ein natives JavaScript-Array nicht in einem Schritt erreichen kann. Im Folgenden wird die Verwendung von JQuery-Arrays ausführlich erläutert.

1 $.each(array, [callback]) Traversal [häufig verwendet]

Erläuterung: Anders als beim Durchlaufen von jQuery-Objekten kann die Methode $().each() zum Durchlaufen jedes Objekts 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 dies tun Die Rückruffunktion gibt false zurück und andere Rückgabewerte werden ignoriert.

Jeder Durchlauf ist jedem bekannt. In der normalen Ereignisverarbeitung handelt es sich um eine Variante der for-Schleife, die jedoch leistungsfähiger ist als die for-Schleife. In einem Array können der Array-Index und der entsprechende Wert problemlos erfasst werden. Beispiel:

Der Code lautet wie folgt:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同  
$.each(_mozi,function(key,val){  
    //回调函数有两个参数,第一个是元素索引,第二个为当前值  
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);  
});
Nach dem Login kopieren

Im Vergleich zum nativen for..in ist jeder stärker. for..in kann auch das Array durchlaufen und den entsprechenden Index zurückgeben, der Wert muss jedoch über arrName[key] abgerufen werden.

2. $.grep(array, callback, [invert]) filter array [häufig verwendet]

Erläuterung: Verwenden Sie die Filterfunktion, um Array-Elemente zu filtern (Der dritte Parameter ist wahr oder falsch und der Rückgabewert der Filterfunktion ist invertiert. Ich persönlich halte das für nicht sehr nützlich): Das zu filternde Array und die Filterfunktion müssen true zurückgeben, um das zu behalten Elemente oder false, um die Elemente zu löschen. Darüber hinaus kann die Filterfunktion auch auf eine Textzeichenfolge festgelegt werden.

Der Code lautet wie folgt:

$.grep(_mozi,function(val,key){  
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引  
    if(val=='墨子'){  
        alert('数组值为 墨子 的下标是: '+key);  
    }  
});  
var _moziGt1=$.grep(_mozi,function(val,key){  
    return key>1;  
});  
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1);  
var _moziLt1=$.grep(_mozi,function(val,key){  
    return key>1;  
},true);  
//此处传入了第三个可靠参数,对过滤函数中的返回值取反  
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);
Nach dem Login kopieren

3. $.map(array,[callback])Konvertieren Sie das Array entsprechend den gegebenen Bedingungen [allgemein ]

Erklärung: Die Konvertierungsfunktion wird als Parameter für jedes Array-Element aufgerufen und der Konvertierungsfunktion wird ein Element übergeben, das das konvertierte Element als Parameter darstellt. Die Konvertierungsfunktion kann den konvertierten Wert null zurückgeben (Löschen Sie das Element in den Array-Elementen) oder ein Array mit Werten, erweitert zum ursprünglichen Array.

Dies ist eine sehr leistungsfähige Methode, die jedoch nicht häufig verwendet wird. Sie kann den Wert eines Array-Elements basierend auf bestimmten Bedingungen aktualisieren oder ein neues Kopierelement basierend auf dem ursprünglichen Wert erweitern.

Der Code lautet wie folgt:

var _mapArrA=$.map(_mozi,function(val){  
    return val+'[新加]';  
});  
var _mapArrB=$.map(_mozi,function(val){  
    return val=='墨子' ? '[只给墨子加]'+val : val;  
});  
var _mapArrC=$.map(_mozi,function(val){  
    //为数组元素扩展一个新元素  
    return [val,(val+'[扩展]')];  
});  
alert('在每个元素后面加\'[新加]\'字符后的数组为: '+ _mapArrA);  
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB);  
alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '+_mapArrC);
Nach dem Login kopieren

4 .$.inArray(val,array) bestimmt, ob der Wert im Array vorhanden ist [häufig verwendet]

Erläuterung: Bestimmen Sie die Position des ersten Parameters im Array, beginnend bei 0 (gibt -1 zurück, wenn er nicht gefunden wird).

Erinnern Sie sich an die Methode indexOf()? indexOf() gibt die erste Vorkommensposition der Zeichenfolge zurück, während $.inArray() die Position des übergebenen Parameters im Array zurückgibt ist ein Wert größer oder gleich 0 oder -1, wenn er nicht gefunden wird. Jetzt wissen Sie, wie Sie ihn verwenden. Damit können Sie leicht feststellen, ob ein Wert im Array vorhanden ist.

Der Code lautet wie folgt:

var _exist=$.inArray('墨子',_mozi);  
var _inexistence=$.inArray('卫鞅',_mozi)  
if(_exist>=0){  
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist);  
}  
if(_inexistence<0){  
    alert(&#39;卫鞅 不存在于数组_mozi中!,返回值为: &#39;+_inexistence+&#39;!&#39;);  
}
Nach dem Login kopieren

5 .$.merge(first, second) führt zwei Arrays zusammen [allgemein]

Erklärung : Rückgabe Das Ergebnis ändert den Inhalt des ersten Arrays – auf die Elemente des ersten Arrays folgen die Elemente des zweiten Arrays. Diese Methode verwendet die Methode von jQuery, um die native concat()-Methode zu ersetzen, ihre Funktion ist jedoch nicht so leistungsstark wie concat(), das mehrere Arrays gleichzeitig zusammenführen kann.

Der Code lautet wie folgt:

//原生concat()可能比它还简洁点  
_moziNew=$.merge(_mozi,[&#39;鬼谷子&#39;,&#39;商鞅&#39;,&#39;孙膑&#39;,&#39;庞涓&#39;,&#39;苏秦&#39;,&#39;张仪&#39;])  
alert(&#39;合并后新数组长度为: &#39;+_moziNew.length+&#39;. 其值为: &#39;+_moziNew);
Nach dem Login kopieren

6 .$.unique(array) filtert doppelte Elemente im Array [nicht häufig verwendet]

Erklärung: Duplikat löschen Elemente im Array. Verarbeitet nur das Löschen von DOM-Elementarrays, kann jedoch keine Zeichenfolgen- oder numerischen Arrays verarbeiten.

Als ich diese Methode zum ersten Mal sah, dachte ich, es sei eine sehr praktische Methode, mit der Duplikate gefiltert werden können. Wenn Sie jedoch genauer hinschauen, können Sie feststellen, dass es nur DOM-Elemente verarbeiten kann und die Funktionalität um 20 % eingeschränkt ist. Daher habe ich es als ein Element definiert, das nicht häufig verwendet wird. Zumindest habe ich es nicht verwendet, seit ich jQuery verwendet habe.

Der Code lautet wie folgt:

var _h2Arr=$.makeArray(h2obj);  
//将数组_h2Arr重复一次  
_h2Arr=$.merge(_h2Arr,_h2Arr);  
var _curLen=_h2Arr.length;  
_h2Arr=$.unique(_h2Arr);  
var _newLen=_h2Arr.length;  
alert(&#39;数组_h2Arr原长度值为: &#39;+_curLen+&#39; ,过滤后为: &#39;+_newLen  
      +&#39; .共过滤 &#39;+(_curLen-_newLen)+&#39;个重复元素&#39;)
Nach dem Login kopieren

7. $.makeArray(obj) Array-ähnliche Objekte in Arrays konvertieren [nicht häufig verwendet]

Erklärung: Konvertieren Sie ein Array-ähnliches Objekt in ein Array-Objekt. Das Array-ähnliche Objekt hat ein Längenattribut und sein Mitgliedsindex reicht von 0 bis Länge-1.
Dies ist eine redundante Methode. Das allmächtige $ enthält diese Funktion bereits. Die Erklärung auf der offiziellen jQuery-Website ist sehr vage. Tatsächlich wird ein Array-ähnliches Objekt (z. B. eine Sammlung von Elementobjekten, die mit getElementsByTagName erhalten wurden) in ein Array-Objekt konvertiert.
Der Code lautet wie folgt:

var _makeArr=$.makeArray(h2obj);  
alert(&#39;h2元素对象集合的数据
类型转换
为: &#39;+_makeArr.constructor.name);//输出Array
Nach dem Login kopieren

8. $(dom).toArray() stellt alle DOM-Elemente in Arrays wieder her [nicht häufig verwendet]

Erklärung: Alle DOM-Elemente in der jQuery-Sammlung in einem Array wiederherstellen. Es ist keine häufig verwendete Methode. Ich persönlich halte sie für so überflüssig wie $.makeArray. Der Code lautet wie folgt:

Das obige ist der detaillierte Inhalt vonDie Verwendung von JQuery-basierten Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden? BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden? Apr 26, 2024 am 09:40 AM

MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden

Wie entferne ich doppelte Elemente mithilfe einer foreach-Schleife aus einem PHP-Array? Wie entferne ich doppelte Elemente mithilfe einer foreach-Schleife aus einem PHP-Array? Apr 27, 2024 am 11:33 AM

Die Methode zur Verwendung einer foreach-Schleife zum Entfernen doppelter Elemente aus einem PHP-Array ist wie folgt: Durchlaufen Sie das Array und löschen Sie es, wenn das Element bereits vorhanden ist und die aktuelle Position nicht das erste Vorkommen ist. Wenn beispielsweise in den Datenbankabfrageergebnissen doppelte Datensätze vorhanden sind, können Sie diese Methode verwenden, um diese zu entfernen und Ergebnisse ohne doppelte Datensätze zu erhalten.

PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden May 03, 2024 pm 09:03 PM

Der Leistungsvergleich der PHP-Methoden zum Umdrehen von Array-Schlüsselwerten zeigt, dass die Funktion array_flip() in großen Arrays (mehr als 1 Million Elemente) eine bessere Leistung als die for-Schleife erbringt und weniger Zeit benötigt. Die for-Schleifenmethode zum manuellen Umdrehen von Schlüsselwerten dauert relativ lange.

Die Kunst des PHP Array Deep Copy: Mit verschiedenen Methoden eine perfekte Kopie erzielen Die Kunst des PHP Array Deep Copy: Mit verschiedenen Methoden eine perfekte Kopie erzielen May 01, 2024 pm 12:30 PM

Zu den Methoden zum tiefen Kopieren von Arrays in PHP gehören: JSON-Kodierung und -Dekodierung mit json_decode und json_encode. Verwenden Sie array_map und clone, um tiefe Kopien von Schlüsseln und Werten zu erstellen. Verwenden Sie Serialize und Deserialize für die Serialisierung und Deserialisierung.

Best Practices für Deep Copying von PHP-Arrays: Entdecken Sie effiziente Methoden Best Practices für Deep Copying von PHP-Arrays: Entdecken Sie effiziente Methoden Apr 30, 2024 pm 03:42 PM

Die beste Vorgehensweise zum Durchführen einer Array-Deep-Kopie in PHP besteht darin, json_decode(json_encode($arr)) zu verwenden, um das Array in einen JSON-String zu konvertieren und ihn dann wieder in ein Array umzuwandeln. Verwenden Sie unserialize(serialize($arr)), um das Array in eine Zeichenfolge zu serialisieren und es dann in ein neues Array zu deserialisieren. Verwenden Sie den RecursiveIteratorIterator, um mehrdimensionale Arrays rekursiv zu durchlaufen.

Praxis der mehrdimensionalen Sortierung von PHP-Arrays: von einfachen bis hin zu komplexen Szenarien Praxis der mehrdimensionalen Sortierung von PHP-Arrays: von einfachen bis hin zu komplexen Szenarien Apr 29, 2024 pm 09:12 PM

Die mehrdimensionale Array-Sortierung kann in Einzelspaltensortierung und verschachtelte Sortierung unterteilt werden. Bei der Einzelspaltensortierung kann die Funktion array_multisort() zum Sortieren nach Spalten verwendet werden. Bei der verschachtelten Sortierung ist eine rekursive Funktion erforderlich, um das Array zu durchlaufen und zu sortieren. Zu den praktischen Beispielen gehören die Sortierung nach Produktname und die Sortierung von Verbindungen nach Verkaufsmenge und Preis.

Anwendung der PHP-Array-Gruppierungsfunktion bei der Datensortierung Anwendung der PHP-Array-Gruppierungsfunktion bei der Datensortierung May 04, 2024 pm 01:03 PM

Die PHP-Funktion array_group_by kann Elemente in einem Array basierend auf Schlüsseln oder Abschlussfunktionen gruppieren und ein assoziatives Array zurückgeben, wobei der Schlüssel der Gruppenname und der Wert ein Array von Elementen ist, die zur Gruppe gehören.

PHP-Array-Zusammenführungs- und Deduplizierungsalgorithmus: parallele Lösung PHP-Array-Zusammenführungs- und Deduplizierungsalgorithmus: parallele Lösung Apr 18, 2024 pm 02:30 PM

Der PHP-Algorithmus zum Zusammenführen und Deduplizieren von Arrays bietet eine parallele Lösung, indem er das ursprüngliche Array zur parallelen Verarbeitung in kleine Blöcke aufteilt und der Hauptprozess die Ergebnisse der zu deduplizierenden Blöcke zusammenführt. Algorithmusschritte: Teilen Sie das ursprüngliche Array in gleichmäßig verteilte kleine Blöcke auf. Verarbeiten Sie jeden Block zur Deduplizierung parallel. Blockergebnisse zusammenführen und erneut deduplizieren.

See all articles