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 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
javascript打开word文档的方法
Apr 16 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
浅析TypeScript 命名空间
Mar 19 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
zend framework多模块多布局配置
2011/02/26 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
python关键字and和or用法实例
2015/05/28 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
python中安装django模块的方法
2020/03/12 Python
Python 代码调试技巧示例代码
2020/08/11 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python绘制高斯曲线
2021/02/19 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
教师队伍管理制度
2014/01/14 职场文书
捐款倡议书
2014/04/14 职场文书
《恐龙》教学反思
2014/04/27 职场文书
法制宣传日活动总结
2014/04/29 职场文书
人代会标语
2014/06/30 职场文书
服务宗旨标语
2014/07/01 职场文书
生物学专业求职信
2014/07/23 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
失职检讨书大全
2015/01/26 职场文书
婚宴致辞
2015/07/28 职场文书
六年级数学教学反思
2016/02/16 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python