Quelle est l'utilisation de la carte dans jquery-js tutoriel-php.cn

Quelle est l'utilisation de la carte dans jquery

WBOY

Libérer： 2022-04-02 16:06:54

original

3524 Les gens l'ont consulté

Utilisation : 1. Utilisé pour transmettre des éléments dans la collection via des fonctions et générer de nouveaux objets jQuery. La syntaxe est ".map(callback(index,domElement))" ; Il est encapsulé et renvoyé sous la forme d'un nouveau tableau, et la syntaxe est "$.map (tableau ou objet, fonction spécifiée)".

Quelle est l'utilisation de la carte dans jquery

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Utilisation de map dans jquery

1. map() transmet chaque élément à la collection correspondante actuelle via la fonction et génère un nouvel objet jQuery contenant la valeur de retour.

Syntax

.map(callback(index,domElement))

Copier après la connexion

callback(index,domElement) Objet fonction appelé pour chaque élément de la collection actuelle.

Étant donné que la valeur de retour est un tableau encapsulé par jQuery, utilisez get() pour traiter l'objet renvoyé afin d'obtenir le tableau sous-jacent.

L'exemple est le suivant :

<!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>

Copier après la connexion

Résultat de sortie :

Quelle est lutilisation de la carte dans jquery

2, la fonction $.map() est utilisée pour traiter chaque élément du tableau (ou chaque attribut de l'objet) à l'aide de la fonction spécifiée, et le résultat sera traité encapsulé et renvoyé sous forme de nouveau tableau.

Avant jQuery 1.6, cette fonction ne prenait en charge que le parcours de tableaux à partir de la version 1.6, cette fonction prend également en charge le parcours d'objets.

map() transmettra également deux paramètres à la fonction : l'un est la valeur de l'élément ou de l'attribut de l'itération en cours, et l'autre est l'index du tableau ou le nom de l'attribut d'objet de l'élément d'itération en cours.

La valeur de retour de cette fonction sera utilisée comme élément dans le tableau de résultat. Si la valeur de retour est nulle ou indéfinie, elle ne sera pas ajoutée au tableau de résultat.

$.map( object, callback )

Copier après la connexion

object Array/Object type spécifie le tableau ou l'objet qui doit être traité.

callback Function type spécifie la fonction de traitement.

L'exemple est le suivant :

<!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>

Copier après la connexion

Résultat de sortie :

Quelle est lutilisation de la carte dans jquery