今天学到一个新的函数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()函数的更多相关文章

  1. 学习JQuery中文文档之get()函数

    前端大神群的群主告诉我们:学习一个框架最好的方法是去把官方文档研究一遍. 现在正式开始我的前端之路,从JQuery的中文文档开始. 基础不牢固,看起来有点慢,但是我会一直坚持下去的.把遇到的问题都记录 ...

  2. 学习JQuery中文文档之index()函数

    最初认识index()是在轮播图中,获取当前点击对象在数组中的位置.那时候,对index()的使用只有eq($(this).index()),看了文档之后,才知道自己有多幼稚! <!DOCTYP ...

  3. (十)unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components

     大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  4. (二十二)unity4.6学习Ugui中文文档-------交互-Eventsystem &amp; Binding

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  5. unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform

    1 . Rect Transform Rect Transform 是 2D 与 3D 图形的 Transform 组件对应.它用来指定用户界面系统中的大小. 位置和旋转的控件 Properties ...

  6. (二十一)unity4.6学习Ugui中文文档-------交互-Supported Events &amp; Raycasters

    大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:mod=guide&view=m ...

  7. (九)unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform

     大家好.我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  8. jQuery中文文档

    http://www.jquery123.com/ http://www.shifone.cc/

  9. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

随机推荐

  1. sql loader

    vi append.sh #!/bin/bash sqlldr userid=bm_weihu/itms_xianwan control=input2.ctl vi input2.ctl LOAD D ...

  2. 【UVa-514】铁轨——栈的学习

    UVa514 Rails(铁轨) 题目:铁轨 题目链接: UVa514链接 题目描述: 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站的顺序编号为1-n.你的任务是判断是否能让它们按照某种特定 ...

  3. 中小型数据库 RMAN CATALOG 备份恢复方案(二)

    中小型数据库呈现的是数据库并发少,数据库容量小,版本功能受限以及N多单实例等特点.尽管如此,数据库的损失程度也会存在零丢失的情形.企业不愿意花太多的钱又要保证数据库的可靠稳定,可是苦煞了我这些搞DB的 ...

  4. JS一般般的网页重构可以使用Node.js做些什么(转)

    一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...

  5. ACE的 日志

    http://wenku.baidu.com/link?url=dK6j9_0pICRjxWW7usBlkCxPTa8zFSPyUe_uWAkwMPFDU4ip_tEfxpOitxjkl3RuPy3D ...

  6. Linux makefile教程之条件判断六[转]

    使用条件判断 —————— 使用条件判断,可以让make根据运行时的不同情况选择不同的执行分支.条件表达式可以是比较变量的值,或是比较变量和常量的值. 一.示例 下面的例子,判断$(CC)变量是否“g ...

  7. web开发利器 fiddler

    http://mccxj.github.io/blog/20130531_introduce-to-fiddler.html

  8. UITableViewCell 自定义绘制 性能高

    // //  FoodListTableViewCellB.m //  BabyFood // //  Created by zhuang chaoxiao on 16/3/7. //  Copyri ...

  9. 程序世界系列之-struts2安全漏洞引发的安全杂谈(上)

    目录: 1.讨论关于struts 安全问题. 2.黑客文化. 3.如何降低安全漏洞的出现. 4.忠告建议. 题记: 这篇文章本来很早应该和大家见面的,中间由于个人原因调整了系列文章发布时间,实属罪过. ...

  10. 容器的范围 .xml

    pre{ line-height:1; color:#f0caa6; background-color:#2d161d; font-size:16px;}.sysFunc{color:#e54ae9; ...