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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
javascript的几种写法总结
Sep 30 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
Element Card 卡片的具体使用
Jul 26 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中include()与require()的区别说明
2010/03/10 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php发送与接收流文件的方法
2015/02/11 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python处理RSTP视频流过程解析
2020/01/11 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
年终考核评语
2014/01/19 职场文书
购房协议书
2014/04/11 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
安全保证书格式
2015/02/28 职场文书
保安辞职信范文
2015/02/28 职场文书
贫困证明书范文
2015/06/16 职场文书
酒店员工管理制度
2015/08/05 职场文书
《确定位置》教学反思
2016/02/18 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server