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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery遍历筛选数组的几种方法和遍历解析json对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8365字，纯文字阅读大概需要12分钟。

内容图文

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对象全部内容，希望文章能够帮你解决jquery遍历筛选数组的几种方法和遍历解析json对象所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/364236.html

来源：【匿名】

【上一篇】jquery改变disabled的boolean状态的三种方法【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jquery遍历筛选数组的几种方法和遍历解析json对象】教程文章相关的互联网学习教程文章

JQuery学习笔记（2）——数组属性事件【代码】

each遍历JQueryObjectArray.each(function(index,Element))复制$(".myTable").each(function(i,ele){//使用模板函数//这里的ele是一个DOM对象，要想使用jQuery对象，可以这样写$(this)//function里面的i和ele两个参数，根据实际情况填console.log(`${i}: ele.innerText`); });toFixed(2) 保留2位小数数组map拼接数组调用map，会自动拼接成一个字符串复制 $.getJSON(‘json_data.html‘, {name1: ‘参数值‘, name2: ‘value2‘}, f...

jquery 选择器选择元素名为数组的元素【代码】

$(‘input[name=items\\[\\]]‘) 参考链接：http://stackoverflow.com/questions/2340806/jquery-select-all-checkboxes-with-js-array-name原文：http://www.cnblogs.com/unsea/p/5089343.html

jquery发送数组【代码】

假设keywordid_list是一个javascript数组，将它发送到keywordbatchsetting.php。$.ajax({ url:"keywordbatchsetting.php", data:{"keywordid_list[]":keywordid_list}, type:"GET", traditional:true, success:function(msg){} }); 原文：http://www.cnblogs.com/ymy124/p/3830398.html

JQuery判断数组中是否包含某个元素$.inArray("js", arr);

var arr = [ "xml", "html", "css", "js" ]; $.inArray("js", arr); //返回 3,如果不包含在数组中,则返回 -1;JQuery判断数组中是否包含某个元素$.inArray("js", arr);原文：http://www.cnblogs.com/soundcode/p/4943322.html

JS Jquery 合并数组，合并对象，去除数组重复元素【代码】

代码1var arr1 = [‘a‘, ‘b‘]; var arr2 = [‘a‘, ‘c‘]; var arr3 = arr1.concat(arr2); // arr3: [‘a‘, ‘b‘, ‘a‘, ‘c‘]concat:1，合并数组2，返回一个新数组3，按顺序组合用法：newArr=arr1.concat(arr2); 代码2 var obj1 = {name: ‘张三‘, age: 22}; var obj2 = {name: ‘李四‘, sex: ‘boy‘}; var obj3 = Object.assgin(obj1, obj2); // obj3: {name: ‘李四‘, age: 22, sex: ‘boy‘} Object.assgin:1，合并...

jquery 循环数组输出显示在html页面【图】

jquery 没有双向数据绑定，但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上，这时我们可以用字符串拼接，元素添加的方法去实现js部分如下： $(function(){ var a=["1aa","2bb","3cc"]; $("#come").click(function(){ var div1=‘<div class="yk" onclick="cheakitem(this)" style="background: red; margin-top: 5px;">‘; var div2=‘</div>‘; $.each(a,function(i,t){ $("#shu").app...

jQuery数组处理全解

jQuery的数组处理、便捷、功能齐全。最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生JavaScript数组不能企及的功能。最近时间紧迫,今天抽了些时间回过头来看jQuery中文文档中对数组的介绍,顺便对jQuery数组做个总结，温故而知新。强烈建议你打开DEMO演示后再看下面的详解：http://mrthink.net/demo/ijq20101125.htm1. $.each(array, [callback]) 遍历[常用]解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例...

Jquery 数组操作(转)

在jquery中处理JSON数组的情况中遍历用到的比较多，但是用添加移除这些好像不是太多。今天试过json[i].remove(),json.remove(i)之后都不行，看网页的DOM对象中好像JSON数据是以数组的形式出现的，查阅了下相关JS中数组的操作一试果然很爽。记录下来。1、数组的创建var arrayObj = new Array();　//创建一个数组var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([eleme...

jquery遍历json与数组方法总结

来自：http://www.php100.com/html/program/jquery/2013/0905/5927.html 先我们来参考each() 方法,each()规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环语法$(selector).each(function(index,element))例 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)将输出0，1，2alert(val)将输出aaa，bbb，ccceac...

JavaScript之jQuery-6 jQuery 类数组的操作【图】

一、jQuery 类数组的操作类数组简介 - jQuery 对象封装的多个 DOM 对象 - 类: 指的是类似 - 具备自己特有的操作方法类数组的操作 - length属性 - each(fn)遍历类数组，fn用来处理DOM对象。在fn中this表示正在被遍历的那个DOM对象。fn函数正在被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标(从0开始) - eq(index):将下标等于index的DOM对象取出来 - get(): 返回一个DOM对象组成的数组 - ...

jQuery的ajax和遍历数组json实例代码

jQuery的ajax和遍历数组json实例代码jQuery.ajax({type: "POST",url: "server.json",dataType:json,data: "",success: function(msg){var title = "";jQuery.each(msg,function(key,value){alert(value.ec_id+" "+value.ec_title);})}});以上这篇jQuery的ajax和遍历数组json实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。更多jQuery的ajax和遍历数组json实例代码相关文章请关注PH...

jquerydom对象的事件隐藏显示和对象数组示例_jquery

1.事件处理 1.1.事件绑订 bind(type,fn); 例子: 代码如下: $(function(){ //正式的写法 $(#d1).bind(click,function(){ $(this).css(font-size,80px); }); //简写形式 $(#d1).click(function(){ $(this).css(font-size,80px); }); }); 1.2.绑订方式的简写形式代码如下: click(function(){ }); 1.3.合成事件 hover(enter,leave) : 模拟光标悬停事件 toggle(fn1,fn2...) : 模拟鼠标连续单击事件例子1: 代码如下: $(function()...

javascript-在多个数组中搜索一个字符串,然后设置一个var-jQuery【代码】

我想根据一个字符串存在的数组来设置一个变量. 例如：var primary = ["red", blue", "yellow"]; var secondary = ["orange", "purple", "green"];然后检查“紫色”并返回它在“第二”数组中,并将其分配给变量以供以后使用. jQuery或Javascript都可以.解决方法:不确定要为变量分配什么,所以我只是使用警报来说明结果var plen = primary.length;var idx = $.inArray( 'purple', primary.concat( secondary ) );if( idx === -1 ) {a...

javascript-如何使用jQuery和图像数组更改#header的css属性？【代码】

我正在尝试编辑一个脚本,该脚本更改div的图像,如下所示,以更改#header的background-image属性. 正如您在我的小提琴中看到的那样,http://jsfiddle.net/HsKpq/460/我正在尝试将图像显示到$(‘#header’).css(‘background-image’,…… …)fadeTo( ‘慢’,1); 我怎样才能做到这一点？我想我也必须更改其他一些部分.var img = 0; var imgs = ['http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-...

javascript向后台传送相同属性的参数即数组参数_jquery

我们在传送参数时，经常会碰到向后台传送一些相同属性的参数，最好的选择是采用数组的方式。当我们向后台传送时只需要在javascript中正常定义并使用数组，将其作为参数向后台传递：代码如下: var arry= new Array(); arry[0] = "102"; arry[1] = "103"; arry[2] = "104"; url = "test.jsp?arry="+arry; 在后台的接受方法： [code] String arry = request.getParmeter("arry"); String[] par = arry.split(","); [code] 此时的pa...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【jquery遍历筛选数组的几种方法和遍历解析json对象】教程文章相关的互联网学习教程文章

JQuery学习笔记（2）——数组属性事件【代码】

jquery 选择器选择元素名为数组的元素【代码】

jquery发送数组【代码】

JQuery判断数组中是否包含某个元素$.inArray("js", arr);

JS Jquery 合并数组，合并对象，去除数组重复元素【代码】

jquery 循环数组输出显示在html页面【图】

jQuery数组处理全解

Jquery 数组操作(转)

jquery遍历json与数组方法总结

JavaScript之jQuery-6 jQuery 类数组的操作【图】

jQuery的ajax和遍历数组json实例代码

jquerydom对象的事件隐藏显示和对象数组示例_jquery

javascript-在多个数组中搜索一个字符串,然后设置一个var-jQuery【代码】

javascript-如何使用jQuery和图像数组更改#header的css属性？【代码】

javascript向后台传送相同属性的参数即数组参数_jquery

JQUERY - 相关标签

JSON - 相关标签

数组 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程