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 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
js上传图片预览的实现方法
May 09 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 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+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
自学python的建议和周期预算
2019/01/30 Python
20行python代码实现人脸识别
2019/05/05 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android