首页
所有分类
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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
JS Timing
Apr 21 Javascript
JavaScript 撑出页面文字换行
Jun 15 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由
Jun 28 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
js快速排序的实现代码
Dec 08 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
微信小程序常见页面跳转操作简单示例
May 01 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
name_scope (1) blinker(1) 三子棋(2) 定时任务(2) variable_scope(1) 信号库(1) Keras(3) turtle(1) 绘图(1) 计时器(1)
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
php实现递归的三种基本方式
2020/07/04 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JavaScript事件学习小结（三）js事件对象
2016/06/09 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
2017/07/26 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
比利时的在线灯具店：Lampen24.be
2019/07/01 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
个人务虚会发言材料
2014/10/20 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript