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 相关文章推荐
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
Javascript Objects详解
Sep 04 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
微信小程序 checkbox使用实例解析
Sep 09 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
javascript实现画板功能
Apr 12 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
微信小程序实现分页加载效果
Nov 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
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
Python os模块介绍
2014/11/30 Python
Python创建系统目录的方法
2015/03/11 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python实现ftp文件传输功能
2020/03/20 Python
如何将json数据转换为python数据
2020/09/04 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
年终自我鉴定
2013/10/09 职场文书
业务部经理岗位职责
2014/01/04 职场文书
学生评语大全
2014/04/18 职场文书
作风年建设汇报材料
2014/08/14 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
使用Redis实现分布式锁的方法
2022/06/16 Redis