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 相关文章推荐
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Angular实现表单验证功能
Nov 13 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 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中对xml读取的相关函数的介绍一
2008/06/05 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
促销活动总结怎么写
2014/06/25 职场文书
早读课迟到检讨书
2014/09/25 职场文书
初中作文评语
2014/12/25 职场文书
居安思危观后感
2015/06/11 职场文书
基于python实现银行管理系统
2021/04/20 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android