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;
}

下面通过例子来说明下具体实现方法

  1. JQuery拿取对象的方式
  2. $(‘#id’) ：通过元素的id
  3. $(‘tagName’) : 通过元素的标签名
  4. $(‘tagName tagName’) : 通过元素的标签名,eg: $(‘ul li’)
  5. $(‘tagName#id): 通过元素的id和标签名
  6. $(‘:checkbox’):拿取input的 type为checkbox’的所有元素:
  7. Eg: <input type="checkbox" name="appetizers"
  8.                  value="imperial"/>
  9.  
  10. $('span[price] input[type=text]') ：拿取下面的input元素
  11. <span price="3">
  12. <input type="text" name="imperial.quantity"
  13.                  disabled="disabled" value="1"/>
  14. </span>
  15. $('div',$(this).parents('div:first'))：拿取该div的上（至少都是父节点）的第一个div节点
  16. $('~ span:first',this)： locates the first sibling of this that’s a <span> element.
  17.  
  18. 延迟加载js文件：
  19. $.getScript
  20. 例子：
  21. Html文件:
  22. Java代码
  23. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  24. <html>
  25. <head>
  26.     <title>$.getScript Example</title>
  27.     <link rel="stylesheet" type="text/css" href="../common.css">
  28.     <script type="text/javascript"
  29.             src="../scripts/jquery-1.2.1.js"></script>
  30.     <script type="text/javascript">
  31.       $(function(){
  32.         $('#loadButton').click(function(){
  33.           $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
  34.             'new.stuff.js'//,function(){$('#inspectButton').click()}
  35.           );
  36.         });
  37.         $('#inspectButton').click(function(){
  38.           someFunction(someVariable);
  39.           test()
  40.         });
  41.       });
  42.     </script>
  43. </head>  
  44.  
  45. <body>
  46.     <button type="button" id="loadButton">Load</button>
  47.     <button type="button" id="inspectButton">Inspect</button>
  48. </body>
  49. </html>
  50. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  51. <html>
  52. <head>
  53.     <title>$.getScript Example</title>
  54.     <link rel="stylesheet" type="text/css" href="../common.css">
  55.     <script type="text/javascript"
  56.             src="../scripts/jquery-1.2.1.js"></script>
  57.     <script type="text/javascript">
  58.       $(function(){
  59.         $('#loadButton').click(function(){
  60.           $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
  61.             'new.stuff.js'//,function(){$('#inspectButton').click()}
  62.           );
  63.         });
  64.         $('#inspectButton').click(function(){
  65.           someFunction(someVariable);
  66.     test()
  67.         });
  68.       });
  69.     </script>
  70. </head>
  71. <body>
  72.     <button type="button" id="loadButton">Load</button>
  73.     <button type="button" id="inspectButton">Inspect</button>
  74. </body>
  75. </html>
  76.  
  77. Js文件:
  78. Java代码
  79. alert("I'm inline!");  
  80.  
  81. var someVariable = 'Value of someVariable';  
  82.  
  83. function someFunction(value) {
  84. alert(value);
  85. }  
  86.  
  87. function test() {
  88. alert('test');
  89. }
  90. alert("I'm inline!");
  91. var someVariable = 'Value of someVariable';
  92. function someFunction(value) {
  93. alert(value);
  94. }
  95. function test() {
  96. alert('test');
  97. }
  98.  
  99. jquery数组处理：
  100. Java代码
  101. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  102. <html>
  103. <head>
  104.     <title>Hi!</title>
  105.     <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
  106.     </script>
  107.     <script type="text/javascript">
  108.       var $ = 'Hi!';
  109.       jQuery(function(){
  110.         alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
  111.         //alert(jQuery)  
  112.  
  113.       });
  114.       jQuery(function($){
  115.         //------------遍历数组 .each的使用-------------
  116.         var anArray = ['one','two','three'];
  117.         $.each(anArray,function(n,value) {
  118.             //do something here
  119.             //alert(n+' '+value);
  120.         });
  121.         var anObject = {one:1, two:2, three:3};
  122.         $.each(anObject,function(name,value) {
  123.             //do something here
  124.             //alert(name+' '+value);
  125.         });  
  126.  
  127.         //-----------过滤数组 .grep的使用------------
  128.         var originalArray =[99,101,103];  
  129.  
  130.         var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤
  131.         $.each(bigNumbers,function(n,value) {
  132.             //do something here
  133.             //alert(n+' '+value);
  134.         });  
  135.  
  136.         //------------转换数组 .map的使用------------
  137.         var strings = ['1','2','3','4','S','K','6'];
  138.         var values = $.map(strings,function(value){
  139.             var result = new Number(value);
  140.             return isNaN(result) ? null : result;//如果result不是数字则 返回null（返回null在这里相当于不返回）
  141.         });
  142.         $.each(values,function(n,value) {
  143.             //do something here
  144.             //alert(value);
  145.         });  
  146.  
  147.         var characters = $.map(
  148.             ['this','that','other thing'],
  149.         function(value){return value.split('');}//分离字符串用返回给characters
  150.         );
  151.         //alert(characters.length);  
  152.  
  153.         //------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回-1
  154.         var index = $.inArray(2,[1,2,3,4,5]);
  155.         //alert(index);  
  156.  
  157.         //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
  158.         var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
  159.         //arr.reverse(); // 使用数组翻转函数
  160.         $.each(arr,function(n,value) {
  161.             //do something here
  162.             //alert(n+' '+value);
  163.             //alert(value.html());
  164.         });
  165.         var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模
  166. 糊,http://docs.jquery.com/Utilities/jQuery.unique
  167.         alert();
  168.         $.each(arr2,function(n,value) {
  169.             //do something here
  170.             alert(n+' '+value);
  171.         });
  172.       });
  173.     </script>
  174. </head>
  175. <body>
  176.     <div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
  177. </body>
  178. </html>
  179. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  180. <html>
  181. <head>
  182.     <title>Hi!</title>
  183.     <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
  184.     </script>
  185.     <script type="text/javascript">
  186.       var $ = 'Hi!';
  187.       jQuery(function(){
  188.         alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
  189.    //alert(jQuery)
  190.       });
  191.    jQuery(function($){
  192.    //------------遍历数组 .each的使用-------------
  193.    var anArray = ['one','two','three'];
  194.    $.each(anArray,function(n,value) {
  195.     //do something here
  196.     //alert(n+' '+value);
  197.    });
  198.    var anObject = {one:1, two:2, three:3};
  199.    $.each(anObject,function(name,value) {
  200.     //do something here
  201.     //alert(name+' '+value);
  202.    });
  203.    //-----------过滤数组 .grep的使用------------
  204.    var originalArray =[99,101,103];
  205.  
  206.    var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤
  207.    $.each(bigNumbers,function(n,value) {
  208.     //do something here
  209.     //alert(n+' '+value);
  210.    });
  211.    //------------转换数组 .map的使用------------
  212.    var strings = ['1','2','3','4','S','K','6'];
  213.    var values = $.map(strings,function(value){
  214.     var result = new Number(value);
  215.     return isNaN(result) ? null : result;//如果result不是数字则 返回null（返回null在这里相当于不返回）
  216.    });
  217.    $.each(values,function(n,value) {
  218.     //do something here
  219.     //alert(value);
  220.    });
  221.    var characters = $.map(
  222.     ['this','that','other thing'],
  223.    function(value){return value.split('');}//分离字符串用返回给characters
  224.    );
  225.    //alert(characters.length);
  226.    //------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回
  227. -1
  228.    var index = $.inArray(2,[1,2,3,4,5]);
  229.    //alert(index);
  230.    //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
  231.    var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
  232.    //arr.reverse(); // 使用数组翻转函数
  233.    $.each(arr,function(n,value) {
  234.     //do something here
  235.     //alert(n+' '+value);
  236.     //alert(value.html());
  237.    });
  238.    var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模
  239. 糊,http://docs.jquery.com/Utilities/jQuery.unique
  240.    alert();
  241.    $.each(arr2,function(n,value) {
  242.     //do something here
  243.     alert(n+' '+value);
  244.    });
  245.    });
  246.     </script>
  247. </head>
  248. <body>
  249. <div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
  250. </body>
  251. </html>

jquery遍历筛选数组的几种方法和遍历解析json对象的更多相关文章

  1. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  2. 遍历php数组的几种方法

    第一.foreach() foreach()是一个用来遍历数组中数据的最简单有效的方法. <?php $urls= array('aaa','bbb','ccc','ddd'); foreach ...

  3. 遍历Javascript数组的一种方法！

    应用场景: 如果您的数组只用一次的话就适用这种方法,因为遍历完后数组便清空了.代码如下: var arr=[1,5,6,2,3]; for(;i=arr.shift();){ console.log( ...

  4. Java遍历字符串数组的几种方法

    1. for循环 for(int i = 0; i < fields[].length; i++){ } 2 for each循环 for(String x:fields){ } 3. JDK8 ...

  5. Java遍历list集合的4种方法

    list集合的遍历4种方法: package com.sort; import java.util.ArrayList; import java.util.Iterator; import java. ...

  6. JQuery遍历json数组的3种方法

    这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...

  7. JavaScript数组的22种方法

    原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法   前面的话 数组总共有22种方法,本文将其分为对象继 ...

  8. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  9. JavaScript利用数组原型，添加方法实现遍历多维数组每一个元素

    原型就是提供给我们为了让我们扩展更多功能的. 今天学习了用js模拟底层代码,实现数组多维的遍历.思想是在数组原型上添加一个方法. // js中的数组forEach方法,传入回掉函数 能够帮助我们遍历数 ...

随机推荐

  1. geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式

    一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...

  2. django最佳实践

    导入的时候使用绝对导入或者清晰的相对导入 相对导入用法: from __future__ import absolute_import from .models import what_u_need ...

  3. 浏览器对body节点scrollTop解析的差异

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style t ...

  4. ORACLE uuid自己主动生成主键

    -- Create table create table TECHNOLOGYCOMPANY ( ID VARCHAR2(32) default SYS_GUID() not null, FLOWID ...

  5. POJ 2104(K-th Number-区间第k大-主席树)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 31790   Accepted: 9838 Cas ...

  6. 异常语句：try（尝试）-catch（抓取）-finally 跳转语句：break

    跳转语句: 1.break:跳出的意思,如果在循环语句中使用则是跳出循环2.default,--默认语句通常与 switch case 配合使用3.continue--跳过一个,继续下一个继续retu ...

  7. 【Oracle】ORA-01722:无效数字(控制文件最后一个字段)

    原因: 每一行物理数据最后都存在一个换行符. 如果integer或者number类型的字段位于控制文件的最后,最后其实都会有CR/LF的换行符,在用sqlldr导入时会把换行符也算作那个数字的一部分, ...

  8. 已经上架的app(可供销售)在AppStore上搜不到的解决办法

    这两天很是头大, 因为3天前手动发布的app到现在都还没在AppStore上看到,打了无数电话给苹果和发邮件给review团队. 下面说说怎么解决我们在iTunes后台看到是绿灯(可供销售)但是就是在 ...

  9. Linux ldconfig 查看动态库连接

    /usr/lib64/tls: (hwcap: 0x8000000000000000) [root@wx02 ~]# ldconfig -v | grep keep libzookeeper_mt.s ...

  10. configure.ac

    # # Copyright (C) - Tobias Brunner # Copyright (C) - Andreas Steffen # Copyright (C) - Martin Willi ...