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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
vue中的scope使用详解
Oct 29 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
第十四节--命名空间
2006/11/16 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
Javascript实现的分页函数
2006/12/22 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python k-近邻算法实例分享
2014/06/11 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
Linux的主要特性
2014/10/06 面试题
七年级英语教学反思
2014/01/15 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
葬礼司仪主持词
2014/03/31 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
中英文求职信范文
2015/03/19 职场文书
自考生自我评价
2019/06/21 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
人民币符号
2022/02/17 杂记