学习JQuery中文文档之map()函数和get()函数

今天学到一个新的函数map()。

map(callback)

官方概述：

将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

参数：

给每个元素执行的函数

为了让学习者更容易理解这个函数，于是就有了下面这个栗子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试各种JQuery函数</title>

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

</head>

<body>

    <p class="textmap"><b>Values: </b></p>

    <form class="textmapForm">

          <input type="text" name="name" value="John"/>

          <input type="text" name="password" value="password"/>

          <input type="text" name="url" value="http://ejohn.org/"/>

    </form>

    <script>

    $(function(){

        $(".textmap").append( $("input").map(function(){

              return $(this).val();

        }).get().join(", ") );

        console.log($("input").map(function(){

              return $(this).val();

        }));

    });

    </script>

</body>

</html>

本来我是理解的，看完这个栗子，我就蒙了！

$("input").map(function(){return $(this).val();})

map函数已经完成了遍历和替换了，后面乱入的get()是咋回事呢？

作为一个爱学习的好孩子，我又把两个函数的返回值再看了一遍，看完我还是很纠结，两个函数返回的都是对象，都是数组集合，那还需要多此一举加个get()是为啥？

为了弄清楚这是为什么，我就自己试验了一下，把get()去掉，看看是如何执行的，结果……

就报错了，报错内容是$.map().join()是不合法的。

好吧，基础不好的孩纸真是伤不起，只能靠百度。

度娘果然强大，很快就帮我把这个问题弄清楚了。

原来JQuery下有一个概念叫“类数组”，例如$("li");获取的集合就是类数组，有数组的一些属性，但是不是真正的数组，这类数组的instance of Array是false。

从jQuery对象和js对象的角度来理解的话就是JQuery这种类数组可以理解为属于JQuery对象的数组，所以不能应用JS对象的方法。

这个时候就需要使用get()函数将JQuery对象转化为JS对象，从而可以使用数组的一些方法。

顺便在巩固一下map()的工作机制。

map()的工作有两步：

1、遍历。遍历集合中的每一个元素。

2、替换。对每一个元素执行callback，用返回值替换集合中原本的值。

所以值虽然变了，但是依然属于JQuery对象。

总结：

map()函数返回JQuery对象的数组。

get()函数返回JS对象的数组。

ps:jQuery对象只能用JQuery的方法。

巴特西

学习JQuery中文文档之map()函数和get()函数

最新文章

热门文章