今天学到一个新的函数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的方法。