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> $('p',$(this).parents('p:first'))：拿取该p的上（至少都是父节点）的第一个p节点 $('~ 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(p)); //arr.reverse(); // 使用数组翻转函数 $.each(arr,function(n,value) { //do something here //alert(n+' '+value); //alert(value.html()); }); var arr2 =$.unique(document.getelementsbytagname_r(p)); //获得唯一的对象，看api,说得很模 糊,http://docs.jquery.com/utilities/jquery.unique alert(); $.each(arr2,function(n,value) { //do something here alert(n+' '+value); }); }); </script> </head> <body> <p>first</p><p>second</p><p>third</p><p>fourth</p><p>fourth</p> </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(p)); //arr.reverse(); // 使用数组翻转函数 $.each(arr,function(n,value) { //do something here //alert(n+' '+value); //alert(value.html()); }); var arr2 =$.unique(document.getelementsbytagname_r(p)); //获得唯一的对象，看api,说得很模 糊,http://docs.jquery.com/utilities/jquery.unique alert(); $.each(arr2,function(n,value) { //do something here alert(n+' '+value); }); }); </script> </head> <body> <p>first</p><p>second</p><p>third</p><p>fourth</p><p>fourth</p> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery从数组移除选中值步骤详解
jquery插件实现表格隔行换色并且与鼠标事件实现互动
以上就是jquery遍历筛选数组与json对象的方法合集的详细内容。