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