首页
所有分类
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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
Jquery代码实现图片轮播效果（一）
Aug 12 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
React.js入门学习第一篇
Mar 30 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
基于jQuery拖拽事件的封装
Nov 29 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
条码(1) 延时任务(1) 日志(1) openGauss(1) 太阳码(1) Eclipse(1) JDBC(3) Word(2) 二维码(2) pdf(1)
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php使用GeoIP库实例
2014/06/27 PHP
如何批量清理系统临时文件(语言：C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jquery 插件学习（一）
2012/08/06 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python元组知识点总结
2019/02/18 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python实现银行实战系统
2020/02/26 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
国贸专业求职信
2014/06/28 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Python实现byte转integer
2021/06/03 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python