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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
前端开发之便利店收银系统代码
Dec 27 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之PHP语法学习笔记1
2006/12/17 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php下载文件的代码示例
2012/06/29 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python生成式的send()方法(详解)
2017/05/08 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript