首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery遍历筛选数组的几种方法和遍历解析json对象

Posted in Javascript onDecember 13, 2013

jquery grep()筛选遍历数组 

$().ready( 
function(){ 
var array = [1,2,3,4,5,6,7,8,9]; 
var filterarray = $.grep(array,function(value){ 
return value > 5;//筛选出大于5的 
}); 
for(var i=0;i<filterarray.length;i++){ 
alert(filterarray[i]); 
} 
for (key in filterarray){ 
alert(filterarray[key]); 
} 
} 
);

jquery each()筛选遍历数组 
$().ready( 
function(){ 
var anObject = {one:1,two:2,three:3};//对json数组each 
$.each(anObject,function(name,value) { 
alert(name); 
alert(value); 
}); 
var anArray = ['one','two','three']; 
$.each(anArray,function(n,value){ 
alert(n); 
alert(value); 
} 
); 
} 
);

jquery inArray()筛选遍历数组 
$().ready( 
function(){ 
var anArray = ['one','two','three']; 
var index = $.inArray(‘two',anArray); 
alert(index);//返回该值在数组中的键值，返回1 
alert(anArray[index]);//value is two 
} 
);

jquery map()筛选遍历数组 
$().ready( 
function(){ 
var strings = ['0','1','2','3','4','S','6']; 
var values = $.map(strings,function(value){ 
var result = new Number(value); 
return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写 
} 
); 
for (key in values) { 
alert(values[key]); 
} 
} 
);

js遍历解析json对象1 
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; 
for(var i=0,l=json.length;i<l;i++){ 
for(var key in json[i]){ 
alert(key+':'+json[i][key]); 
} 
}

js遍历解析json对象2

有如下 json对象：
var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法： 

for(var p in obj){ 
str = str+obj[p]+','; 
return str; 
}

下面通过例子来说明下具体实现方法

JQuery拿取对象的方式

$(‘#id') ：通过元素的id
$(‘tagName') : 通过元素的标签名
$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')
$(‘tagName#id): 通过元素的id和标签名
$(‘:checkbox'):拿取input的 type为checkbox'的所有元素:
Eg: <input type="checkbox" name="appetizers"
value="imperial"/>

$('span[price] input[type=text]') ：拿取下面的input元素
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
</span>
$('div',$(this).parents('div:first'))：拿取该div的上（至少都是父节点）的第一个div节点
$('~ span:first',this)： locates the first sibling of this that's a <span> element.

延迟加载js文件：
$.getScript

例子：
Html文件: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>$.getScript Example</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#loadButton').click(function(){ 
$.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题) 
'new.stuff.js'//,function(){$('#inspectButton').click()} 
); 
}); 
$('#inspectButton').click(function(){ 
someFunction(someVariable); 
test() 
}); 
}); 
</script> 
</head> <body> 
<button type="button" id="loadButton">Load</button> 
<button type="button" id="inspectButton">Inspect</button> 
</body> 
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>$.getScript Example</title> 
<link rel="stylesheet" type="text/css" href="../common.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('#loadButton').click(function(){ 
$.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题) 
'new.stuff.js'//,function(){$('#inspectButton').click()} 
); 
}); 
$('#inspectButton').click(function(){ 
someFunction(someVariable); 
test() 
}); 
}); 
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button> 
<button type="button" id="inspectButton">Inspect</button> 
</body> 
</html>

Js文件: 
alert("I'm inline!"); var someVariable = 'Value of someVariable'; 
function someFunction(value) { 
alert(value); 
} 
function test() { 
alert('test'); 
} 
alert("I'm inline!"); 
var someVariable = 'Value of someVariable'; 
function someFunction(value) { 
alert(value); 
} 
function test() { 
alert('test'); 
}

jquery数组处理： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Hi!</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
var $ = 'Hi!'; 
jQuery(function(){ 
alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了 
//alert(jQuery) }); 
jQuery(function($){ 
//------------遍历数组 .each的使用------------- 
var anArray = ['one','two','three']; 
$.each(anArray,function(n,value) { 
//do something here 
//alert(n+' '+value); 
}); 
var anObject = {one:1, two:2, three:3}; 
$.each(anObject,function(name,value) { 
//do something here 
//alert(name+' '+value); 
}); 
//-----------过滤数组 .grep的使用------------ 
var originalArray =[99,101,103]; 
var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤 
$.each(bigNumbers,function(n,value) { 
//do something here 
//alert(n+' '+value); 
}); 
//------------转换数组 .map的使用------------ 
var strings = ['1','2','3','4','S','K','6']; 
var values = $.map(strings,function(value){ 
var result = new Number(value); 
return isNaN(result) ? null : result;//如果result不是数字则 返回null（返回null在这里相当于不返回） 
}); 
$.each(values,function(n,value) { 
//do something here 
//alert(value); 
}); 
var characters = $.map( 
['this','that','other thing'], 
function(value){return value.split('');}//分离字符串用返回给characters 
); 
//alert(characters.length); 
//------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回-1 
var index = $.inArray(2,[1,2,3,4,5]); 
//alert(index); 
//------------makeArray(obj)的使用------------将类数组对象转换为数组对象。 
var arr = jQuery.makeArray(document.getElementsByTagName_r("div")); 
//arr.reverse(); // 使用数组翻转函数 
$.each(arr,function(n,value) { 
//do something here 
//alert(n+' '+value); 
//alert(value.html()); 
}); 
var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模 
糊,http://docs.jquery.com/Utilities/jQuery.unique 
alert(); 
$.each(arr2,function(n,value) { 
//do something here 
alert(n+' '+value); 
}); 
}); 
</script> 
</head> 
<body> 
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div> 
</body> 
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Hi!</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
var $ = 'Hi!'; 
jQuery(function(){ 
alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了 
//alert(jQuery) 
}); 
jQuery(function($){ 
//------------遍历数组 .each的使用------------- 
var anArray = ['one','two','three']; 
$.each(anArray,function(n,value) { 
//do something here 
//alert(n+' '+value); 
}); 
var anObject = {one:1, two:2, three:3}; 
$.each(anObject,function(name,value) { 
//do something here 
//alert(name+' '+value); 
}); 
//-----------过滤数组 .grep的使用------------ 
var originalArray =[99,101,103]; 
var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤 
$.each(bigNumbers,function(n,value) { 
//do something here 
//alert(n+' '+value); 
}); 
//------------转换数组 .map的使用------------ 
var strings = ['1','2','3','4','S','K','6']; 
var values = $.map(strings,function(value){ 
var result = new Number(value); 
return isNaN(result) ? null : result;//如果result不是数字则 返回null（返回null在这里相当于不返回） 
}); 
$.each(values,function(n,value) { 
//do something here 
//alert(value); 
}); 
var characters = $.map( 
['this','that','other thing'], 
function(value){return value.split('');}//分离字符串用返回给characters 
); 
//alert(characters.length); 
//------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回 
-1 
var index = $.inArray(2,[1,2,3,4,5]); 
//alert(index); 
//------------makeArray(obj)的使用------------将类数组对象转换为数组对象。 
var arr = jQuery.makeArray(document.getElementsByTagName_r("div")); 
//arr.reverse(); // 使用数组翻转函数 
$.each(arr,function(n,value) { 
//do something here 
//alert(n+' '+value); 
//alert(value.html()); 
}); 
var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模 
糊,http://docs.jquery.com/Utilities/jQuery.unique 
alert(); 
$.each(arr2,function(n,value) { 
//do something here 
alert(n+' '+value); 
}); 
}); 
</script> 
</head> 
<body> 
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div> 
</body> 
</html>

jquery遍历筛选数组的几种方法和遍历解析json对象

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
Extjs4中的分页应用结合前后台
Dec 13 #Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 #Javascript
window.print打印指定div实例代码
Dec 13 #Javascript
Javascript中call的两种用法实例
Dec 13 #Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 #Javascript
数据类型(8) Geospatial(1) Vmware(3) Hash(1) 入门基础(1) RabbitMQ(3) 触发器(3) plus.io(1) html5+(1) 虚拟机(3)
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
模拟xcopy的函数
2006/10/09 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
jQuery+AJAX实现遮罩层登录验证界面（附源码）
2020/09/13 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
jQuery实现立体式数字动态增加（animate方法）
2016/12/21 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
Python编写登陆接口的方法
2017/07/10 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
波兰在线儿童和婴儿用品零售商：pinkorblue
2019/06/29 全球购物
幼师求职信
2014/06/23 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
力学专业求职信
2014/07/23 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
合作与交流自我评价
2015/03/09 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers