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 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
7个JS基础知识总结
Mar 05 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
opencv+python实现均值滤波
2020/02/19 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
副厂长岗位职责
2014/02/02 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
安全教育的主题班会
2015/08/13 职场文书
六五普法学习心得体会
2016/01/21 职场文书
《植树问题》教学反思
2016/03/03 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python