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

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

map(callback)

官方概述:

将一组元素转换成其他数组(不论是否是元素数组)

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

参数:

给每个元素执行的函数

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

<!DOCTYPE html>
<html >
<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的方法。