Was ist die Verwendung von Map in JQuery?-js-Tutorial-php.cn

Was ist die Verwendung von Map in JQuery?

WBOY

Freigeben： 2022-04-02 16:06:54

Original

3278 Leute haben es durchsucht

Verwendung: 1. Wird verwendet, um Elemente über Funktionen an die Sammlung zu übergeben und neue jQuery-Objekte zu generieren. 2. Wird verwendet, um Elemente im Array zu verarbeiten und die Ergebnisse zurückzugeben Es wird gekapselt und als neues Array zurückgegeben. Die Syntax lautet „$.map(Array oder Objekt, angegebene Funktion)“.

Was ist die Verwendung von Map in JQuery?

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

Verwendung von Map in JQuery

1. Map() übergibt jedes Element über die Funktion an die aktuelle passende Sammlung und generiert ein neues jQuery-Objekt, das den Rückgabewert enthält.

Syntax

.map(callback(index,domElement))

Nach dem Login kopieren

callback(index,domElement) Funktionsobjekt, das für jedes Element in der aktuellen Sammlung aufgerufen wird.

Da der Rückgabewert ein von jQuery gekapseltes Array ist, verwenden Sie get(), um das zurückgegebene Objekt zu verarbeiten und das zugrunde liegende Array abzurufen.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://php.cn/"/>
  </form>
<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von Map in JQuery?

2, die Funktion $.map() wird verwendet, um jedes Element im Array (oder jedes Attribut des Objekts) mit der angegebenen Funktion zu verarbeiten. und das Ergebnis wird gekapselt verarbeitet und als neues Array zurückgegeben.

Vor jQuery 1.6 unterstützte diese Funktion nur das Durchlaufen von Arrays; ab 1.6 unterstützt diese Funktion auch das Durchlaufen von Objekten.

map() übergibt außerdem zwei Parameter an die Funktion: Einer ist der Element- oder Attributwert der aktuellen Iteration und der andere ist der Array-Index oder Objektattributname des aktuellen Iterationselements.

Der Rückgabewert dieser Funktion wird als Element im Ergebnisarray verwendet. Wenn der Rückgabewert null oder undefiniert ist, wird er nicht zum Ergebnisarray hinzugefügt.

$.map( object, callback )

Nach dem Login kopieren

object Array/Objekttyp gibt das Array oder Objekt an, das verarbeitet werden muss.

Callback-Funktionstyp gibt die Verarbeitungsfunktion an.

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div { color:blue; }
p { color:green; margin:0; }
span { color:red; }
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
var arr = [ "a", "b", "c", "d", "e" ];
$("div").text(arr.join(", "));
arr = $.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p").text(arr.join(", "));
arr = $.map(arr, function (a) {
return a + a;
});
$("span").text(arr.join(", "));
})
</script>
 
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von Map in JQuery?

Empfehlung für ein entsprechendes Video-Tutorial: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Map in JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!