首页
所有分类
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中Math对象使用说明
Jan 16 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
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
EditText(1) openEuler(1) Switch(1) exists(2) REST(1) 慢日志(1) cmd(1) Spring JPA(1) 远程桌面(2) Spring Bean(1)
You might like
建立文件交换功能的脚本（一）
2006/10/09 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
php 实现进制相互转换
2016/04/07 PHP
JavaScript中的私有成员
2006/09/18 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
js实现贪吃蛇小游戏（容易理解）
2017/01/22 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
美国二手奢侈品寄售网站：TheRealReal
2016/10/29 全球购物
美国首屈一指的礼品篮供应商：GiftTree
2018/01/06 全球购物
雅诗兰黛加拿大官网：Estee Lauder加拿大
2019/07/31 全球购物
澳大利亚窗帘商店：Curtain Wonderland
2019/12/01 全球购物
中国一家综合的外贸B2C电子商务网站：DealeXtreme(DX)
2020/03/10 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
商场总经理岗位职责
2014/02/03 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
三年级小学生评语
2014/04/22 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
2015年度党员个人总结
2015/02/14 职场文书
大学生年度个人总结
2015/02/15 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
MySQL索引失效的典型案例
2021/06/05 MySQL
基于PyQt5制作一个群发邮件工具
2022/04/08 Python