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通过class来获取元素实现代码
Feb 20 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 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 array操作10个小技巧分享
2011/06/23 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
python解析json实例方法
2013/11/19 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
纪律教育学习心得体会
2014/09/02 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python