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 ready函数源代码研究
Dec 06 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
angularJS 入门基础
Feb 09 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue中template的三种写法示例
Oct 21 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生成html文件方法总结
2014/12/01 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
详解python中的模块及包导入
2019/08/30 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
django实现用户注册实例讲解
2019/10/30 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
详解python tcp编程
2020/08/24 Python
公司晚会策划方案
2014/05/17 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
小学捐书活动总结
2014/07/05 职场文书
四风问题查摆材料
2014/08/25 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
python中的装饰器该如何使用
2021/06/18 Python