jquery map方法使用示例


Posted in Javascript onApril 23, 2014

jQuery.map( array, callback(elementOfArray, indexInArray) )

Returns: Array

感觉jquery的map方法非常好用,特向大家分享下。

方法作用:将数组或单个对象,替换为新的内容。
应用实例:获取一组checkbox的值,以英文逗号分隔,进行拼接。

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
<script> 
$(function(){ 
$("input").click(function(){ 
var str = $(":checked").map(function(){ 
return this.value; 
}).get().join(",") 
$("span").html(str); 
}) 
}) 
</script> 
</head> 
<body> 
<input type="checkbox" value="a"/>a 
<input type="checkbox" value="b"/>b 
<input type="checkbox" value="c"/>c 
<br/> 
结果展示:<span/> 
</body> 
</html>

对于CSDN的代码编辑,实在不敢恭维,我在jsFiddle创建了上述例子,附链接:http://jsfiddle.net/dV8eh/。
Javascript 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
基于Vue CSR的微前端实现方案实践
May 27 Javascript
js瀑布流布局的实现
Jun 28 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 #Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 #Javascript
Jquery实现Div上下移动示例
Apr 23 #Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 #Javascript
JQuery下拉框应用示例介绍
Apr 23 #Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 #Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
Python正则表达式经典入门教程
2017/05/22 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
村班子对照检查材料
2014/08/18 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2016年元旦致辞
2015/08/01 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS