Jquery中对数组的操作代码


Posted in Javascript onAugust 12, 2011

而在Jquery中则使用$.map()、$.each()来操作数组:
首先是普通的数组(索引为整数的数组):

$.map(arr,fn); 
对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
var newarr = $.map(arr, function(item) {return item*2 }); 
alert(newarr); 
$.each(array,fn)对数组array每个元素调用fn函数进行处理,没有返回值 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
$.each(arr, function(key, value) { alert("key:" + key + "value:" + value); }); 
还可以省略function的参数,这个时候this可以得到遍历的当前元素的值 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
$.each(arr, function() { alert(this); });

然后是索引为字符串的 键值对数组,针对这类数组,
一般采用$.each(array,fn)来操作:
var arr = { "jim": "11", "tom": "12", "lilei": "13" };
$.each(arr, function(key, value) { alert("姓名:"+key+"年龄:"+value); });
当然也可以使用无参的的function进行遍历;
当这类数据从服务器端获取时可以如下进行:
服务器端:
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Web.Script.Serialization; 
using System.Collections.Generic; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
Person p1 = new Person { Age = "22", Name = "tom" }; 
Person p2 = new Person { Age = "23", Name = "jim" }; 
Person p3 = new Person { Age = "24", Name = "lilei" }; 
IList<Person> persons = new List<Person> {p1,p2,p3}; 
JavaScriptSerializer js = new JavaScriptSerializer(); 
string s= js.Serialize(persons); 
context.Response.Write(s); 
} 
public class Person 
{ 
public string Name { get; set; } 
public string Age { get; set; } 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

先实例化了三个person对象,然后放到一个集合中,最后把这个集合序列化成字符串流到客户端;
客户端:
客户端通过$.parseJSON()将后台传递过来的字符串转化为js数组对象,接下来我们就使用操作普通数组的方式来操作这个得到的数组
第三种就是通过标签选择器获取的Jquery对象数组,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$("p").text("这是p标签"); 
}); 
</script> 
</head> 
<body> 
<p></p> 
<p></p> <p></p> <p></p> <p></p> 
<p></p> 
</body> 
</html>

在浏览器中运行的效果为:
Jquery中对数组的操作代码
在dom加载完成后为每一个p元素动态的添加了文本,首先$("p")获取p标签的集合,相当于Javascript中的 document.getElementByTagName只是这里得到的是Jquery对象的数组,这样就有了Jquery固有的隐式迭代的功能,后面的text("这是p标签")的操作就迭代到了每一个P标签上,我们也可以显示的调用each函数来显示的迭代获得的Jquery对象数组,下面的代码同样可以实现上面的效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$("p").each(function() { 
$(this).text("这是p标签"); 
}); 
}); 
</script> 
</head> 
<body> 
<p></p> 
<p></p> <p></p> <p></p> <p></p> 
<p></p> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
基于jQuery的星级评分插件
Aug 12 #Javascript
基于jQuery的投票系统显示结果插件
Aug 12 #Javascript
JavaScript中的View-Model使用介绍
Aug 11 #Javascript
仿jQuery的siblings效果的js代码
Aug 09 #Javascript
html中table数据排序的js代码
Aug 09 #Javascript
最常用的12种设计模式小结
Aug 09 #Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 #Javascript
You might like
PHP与javascript的两种交互方式
2006/10/09 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python实现求特征选择的信息增益
2018/12/18 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python如何实现定时器功能
2020/05/28 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
小学生优秀评语大全
2014/04/22 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
公司借条范本
2015/05/25 职场文书
利用python做数据拟合详情
2021/11/17 Python