学习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()函数的更多相关文章
- 学习JQuery中文文档之get()函数
前端大神群的群主告诉我们:学习一个框架最好的方法是去把官方文档研究一遍. 现在正式开始我的前端之路,从JQuery的中文文档开始. 基础不牢固,看起来有点慢,但是我会一直坚持下去的.把遇到的问题都记录 ...
- 学习JQuery中文文档之index()函数
最初认识index()是在轮播图中,获取当前点击对象在数组中的位置.那时候,对index()的使用只有eq($(this).index()),看了文档之后,才知道自己有多幼稚! <!DOCTYP ...
- （十）unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...
- （二十二）unity4.6学习Ugui中文文档-------交互-Eventsystem & Binding
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...
- unity4.6学习Ugui中文文档-------参考-UGUI Rect Transform
1 . Rect Transform Rect Transform 是 2D 与 3D 图形的 Transform 组件对应.它用来指定用户界面系统中的大小. 位置和旋转的控件 Properties ...
- （二十一）unity4.6学习Ugui中文文档-------交互-Supported Events & Raycasters
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:mod=guide&view=m ...
- （九）unity4.6学习Ugui中文文档-------參考-UGUI Rect Transform
大家好.我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...
- jQuery中文文档
http://www.jquery123.com/ http://www.shifone.cc/
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
随机推荐
- Cadence Allegro导网表的错误问题解决
在Allegro导入网表的时候,有时候会出现这样一个错误问题,如下: ------ Oversights/Warnings/Errors ------ #1 ERROR(SPMHNI-235): ...
- DBA一天干的活
一.检查活动状态 通过查询基本视图,确认数据库和实例处于正常运行状态,可以对外提供数据服务. 1.1实例状态 SELECT instance_name,status FROM v$instance; ...
- jad安装
见:http://www.myexception.cn/eclipse/1469829.html 最开始看了一个坑爹的博客,由于是低级菜鸟一直被误导(设置的是.class的打开方式) 执行完链接够的步 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 删除特定影响因素(字段列)下的重复记录（MySQL）
;CREATE TABLE TabTest ( `id` ) NOT NULL AUTO_INCREMENT ,`factorA` ) NOT NULL DEFAULT ' ' ,`factorB` ...
- PHP 截取字符串专题
1. 截取GB2312中文字符串 < ?php//截取中文字符串function mysubstr($str, $start, $len) { $tmpstr = "" ...
- [搜片神器]之DHT网络爬虫的C++程序初步开源
回应大家的要求,特地整理了一开始自己整合的代码,这样最简单,最直接的可以分析流程,至于文章里面提供的程序界面更多,需要大家自己开发. 谢谢园子朋友的支持,已经找到个VPS进行测试,国外的服务器: ht ...
- 一个强大的LogParser的UI工具--logparserlizard简介
日志分析,特别是IIS日志,一般人都会想到LogParser工具,的确很强.但是命令行的操作界面令很多非专业的管理人员望而生畏,现在好了,有一个可视化的LogParser的UI工具可以使用了! Log ...
- hihocoder 1356 分隔相同整数 简单贪心
分析:考虑贪心,考虑填ans[i],前i-1个合法,现在剩下一些数, 那么挑出出现次数最多的数,次数为mx,当前剩余总数为sum 如果sum-mx>=mx-1那么肯定有解,这个想想就知道了(这种 ...
- 为我所用之Monkey
文章由来:有朋友问到Monkey的使用的问题,就整理一下Monkey的基本使用,以备后用查询. Monkey是一Android中的一个命令行工具,eclipse中有自带此工具,可以运行在模拟器以及真实 ...