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中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
原生js编写焦点图效果
Dec 08 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
js仿微信抢红包功能
Sep 25 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
js实现点击选项置顶动画效果
Aug 25 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添加MySQL数据记录代码
2008/06/07 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php给图片加文字水印
2015/07/31 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python文件操作之目录遍历实例分析
2015/05/20 Python
python fabric实现远程部署
2017/01/05 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python适配器模式代码实现解析
2019/08/02 Python
详解python datetime模块
2020/08/17 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
教师师德师风个人整改方案
2014/09/18 职场文书
计划生育证明格式及范本
2014/10/09 职场文书