Jquery知识点二 jquery下对数组的操作


Posted in Javascript onJanuary 15, 2011

首先是普通的数组(索引为整数的数组):
$.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对象,然后放到一个集合中,最后把这个集合序列化成字符串流到客户端;

客户端:

<!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" > 
$.get("Handler.ashx", function(data) { 
var persons = $.parseJSON(data); 
$.each(persons, function(key, person) { 
alert("Age:"+person.Age+"Name:"+person.Name) }); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

客户端通过$.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知识点二 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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 #Javascript
JavaScript去掉数组中的重复元素
Jan 13 #Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 #Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 #Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 #Javascript
异步加载script的代码
Jan 12 #Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
brook javascript框架介绍
2011/10/10 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python和js交互调用的方法
2020/06/23 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
计划生育标语
2014/06/23 职场文书
小学毕业感言200字
2015/07/30 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python