软件开发培训班 >> 编程开发 >> JavaScript

jQuery数组处理详解(含实例演示)

　　本文标签：jQuery,数组处理

<!doctype html> 
<html> 
<head> 
<meta charset="gbk"> 
<title>jQuery数组处理详解(含实例演示)@Mr.Think</title> 
<style> 
/*reset css*/ 
body{font-size:0.8em;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} 
div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0} 
input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle} 
h1{font-size:1em;font-weight:normal} 
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} 
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} 
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} 
/*demo css*/ 
#demo{width:600px;margin-bottom:100px} 
h2{line-height:24px;font-size:16px;font-weight:normal;} 
h2 span{margin-right:30px;padding:3px 10px;background:#D2D9DF;letter-spacing:1px} 
pre{margin-bottom:20px;padding:10px;background:#eee;border:1px solid #ccc;line-height:18px} 
</style> 
<meta name="author" content="Mr.Think青鸟" /> 
<meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> 
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> 
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> 
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> 
</head> 
<body> 
 
<div id="demo"> 
<h2><span>演示所用数组</span></h2> 
<pre> 
var _mozi=[墨家,墨子,墨翟,兼爱非攻,尚同尚贤]; 
</pre> 
<h2><span>1. $.each遍历示例[常用]</span><input type="button" id="js_each" value=" 运行 " /></h2> 
<pre> 
$.each(_mozi,function(key,val){ 
//回调函数有两个参数,第一个是元素索引,第二个为当前值 
alert(_mozi数组中 ,索引 : +key+ 对应的值为: +val); 
}); 
</pre>

<h2><span>2. $.grep()过滤数组[常用]</span><input type="button" id="js_grep" value=" 运行 " /></h2> 
<pre> 
$.grep(_mozi,function(val,key){ 
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引 
if(val==墨子){ 
alert(数组值为 墨子 的下标是: +key); 
} 
});

var _moziGt1=$.grep(_mozi,function(val,key){ 
return key>1; 
}); 
alert(_mozi数组中索引值大于1的元素为: +_moziGt1);

var _moziLt1=$.grep(_mozi,function(val,key){ 
return key>1; 
},true); 
//此处传入了第三个可靠参数,对过滤函数中的返回值取反 
alert(_mozi数组中索引值小于等于1的元素为: +_moziLt1); 
</pre>

<h2><span>3. $.map()按给定条件转换数组[一般]</span><input type="button" id="js_map" value=" 运行 " /></h2> 
<pre> 
var _mapArrA=$.map(_mozi,function(val){ 
return val+[新加]; 
}); 
var _mapArrB=$.map(_mozi,function(val){ 
return val==墨子 ? [只给墨子加]+val : val; 
}); 
var _mapArrC=$.map(_mozi,function(val){ 
//为数组元素扩展一个新元素 
return [val,(val+[扩展])]; 
}); 
alert(在每个元素后面加\[新加]\字符后的数组为: + _mapArrA); 
alert(只给元素 墨子 添加字符后的数组为: + _mapArrB); 
alert(为原数组中每个元素,扩展一个添加字符\[新加]\的元素,返回的数组为 +_mapArrC); 
</pre>

<h2><span>4. $.inArray()判断值是否存在于数组中[常用]</span><input type="button" id="js_inarray" value=" 运行 " /></h2> 
<pre> 
var _exist=$.inArray(墨子,_mozi); 
var _inexistence=$.inArray(卫鞅,_mozi) 
if(_exist>=0){ 
alert(墨子 存在于数组_mozi中,其在数组中索引值是: +_exist); 
} 
if(_inexistence<0){ 
alert(卫鞅 不存在于数组_mozi中!,返回值为: +_inexistence+!); 
} 
</pre>

<h2><span>5. $.merge()合并两个数组[一般]</span><input type="button" id="js_merge" value=" 运行 " /></h2> 
<pre> 
//原生concat()可能比它还简洁点 
_moziNew=$.merge(_mozi,[鬼谷子,商鞅,孙膑,庞涓,苏秦,张仪]) 
alert(合并后新数组长度为: +_moziNew.length+. 其值为: +_moziNew); 
</pre>

<h2 class="js_unique"><span>6. $.unique()过滤数组中重复元素[不常用]</span><input type="button" id="js_unique" value=" 运行 " /></h2> 
<pre> 
var _h2Arr=$.makeArray(h2obj); 
//将数组_h2Arr重复一次 
_h2Arr=$.merge(_h2Arr,_h2Arr); 
var _curLen=_h2Arr.length; 
_h2Arr=$.unique(_h2Arr); 
var _newLen=_h2Arr.length; 
alert(数组_h2Arr原长度值为: +_curLen+ ,过滤后为: +_newLen 
+ .共过滤 +(_curLen-_newLen)+个重复元素) 
</pre>

<h2><span>7. $.makeArray()类数组对象转换为数组[不常用]</span><input type="button" id="js_makearray" value=" 运行 " /></h2> 
<pre> 
var _makeArr=$.makeArray(h2obj); 
alert(h2元素对象集合的数据类型转换为: +_makeArr.constructor.name); 
</pre>

<h2><span>8. $.toArray()将所有DOM元素恢复成数组[不常用]</span><input type="button" id="js_toarray" value=" 运行 " /></h2> 
<pre> 
var _toArr=$(h2).toArray(); 
alert(h2元素集合恢复后的数据类型是: +_toArr.constructor.name); 
</pre>

</div> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
/******************************* 
* @author Mr.Think 
* @author blog http://mrthink.net/ 
* @2010.10.31 
* @可自由转载及使用,但请注明版权归属 
*******************************/ 
$(function(){ 
var _mozi=[墨家,墨子,墨翟,兼爱非攻,尚同尚贤]; 
//用原生getElementsByTagName获取h2元素的对象集合 
var h2obj=document.getElementsByTagName(h2);

//$.each()遍历数组 
$(input#js_each).click(function(){ 
$.each(_mozi,function(key,val){ 
//回调函数有两个参数,第一个是元素索引,第二个为当前值 
alert(_mozi数组中 ,索引 : +key+ 对应的值为: +val); 
}); 
});

//$.grep()过滤数组 
$(input#js_grep).click(function(){ 
$.grep(_mozi,function(val,key){ 
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引 
if(val==墨子){ 
alert(数组值为 墨子 的下标是: +key); 
} 
});

var _moziGt1=$.grep(_mozi,function(val,key){ 
return key>1; 
}); 
alert(_mozi数组中索引值大于1的元素为: +_moziGt1);

var _moziLt1=$.grep(_mozi,function(val,key){ 
return key>1; 
},true); 
//此处传入了第三个可靠参数,对过滤函数中的返回值取反 
alert(_mozi数组中索引值小于等于1的元素为: +_moziLt1); 
});

//$.map()按给定条件转换数组 
$(input#js_map).click(function(){ 
var _mapArrA=$.map(_mozi,function(val){ 
return val+[新加]; 
}); 
var _mapArrB=$.map(_mozi,function(val){ 
return val==墨子 ? [只给墨子加]+val : val; 
}); 
var _mapArrC=$.map(_mozi,function(val){ 
//为数组元素扩展一个新元素 
return [val,(val+[扩展])]; 
}); 
alert(在每个元素后面加\[新加]\字符后的数组为: + _mapArrA); 
alert(只给元素 墨子 添加字符后的数组为: + _mapArrB); 
alert(为原数组中每个元素,扩展一个添加字符\[新加]\的元素,返回的数组为 +_mapArrC); 
});

//$.inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值 
$(input#js_inarray).click(function(){ 
var _exist=$.inArray(墨子,_mozi); 
var _inexistence=$.inArray(卫鞅,_mozi) 
if(_exist>=0){ 
alert(墨子 存在于数组_mozi中,其在数组中索引值是: +_exist); 
} 
if(_inexistence<0){ 
alert(卫鞅 不存在于数组_mozi中!,返回值为: +_inexistence+!); 
} 
});

//$.merge()合并两个数组 
$(input#js_merge).click(function(){ 
//原生concat()可能比它还简洁点 
_moziNew=$.merge(_mozi,[鬼谷子,商鞅,孙膑,庞涓,苏秦,张仪]) 
alert(合并后新数组长度为: +_moziNew.length+. 其值为: +_moziNew); 
});

//$.unique()过滤数组中重复元素(仅限DOM元素数组) 
$(input#js_unique).click(function(){ 
var _h2Arr=$.makeArray(h2obj); 
//将数组_h2Arr重复一次 
_h2Arr=$.merge(_h2Arr,_h2Arr); 
var _curLen=_h2Arr.length; 
_h2Arr=$.unique(_h2Arr); 
var _newLen=_h2Arr.length; 
alert(数组_h2Arr原长度值为: +_curLen+ ,过滤后为: +_newLen+ .共过滤 +(_curLen-_newLen)+个重复元素); 
});

//$.makeArr()类数组转换 
$(input#js_makearray).click(function(){ 
var _makeArr=$.makeArray(h2obj); 
alert(h2元素对象集合的数据类型转换为: +_makeArr.constructor.name); 
});

//$(dom).toArray()将所有DOM元素恢复成数组 
$(input#js_toarray).click(function(){ 
var _toArr=$(h2).toArray(); 
alert(h2元素集合恢复后的数据类型是: +_toArr.constructor.name); 
}); 
}); 
</script> 
</body> 
</html>

技术文章快速查找

为EasyUI的Tab标签添加右键菜单的方法

javascript实现促销倒计时+fixed固定在底部

图像替换新技术状态域方法

javaScript同意等待代码实现心得

一行代码实现纯数据json对象的深度克隆实现思路

JavaScript 监听textarea中按键事件

超酷的鼠标拖拽翻页(分页)效果实现javascript代码

JavaScript 高效运行代码分析

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建