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文件:

Java代码

<!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文件:

Java代码

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数组处理：

Java代码

<!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对象的更多相关文章

  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. 基于Win7 Python2.7的Numpy安装包分享

    Numpy-1.9.2安装包: http://pan.baidu.com/s/1i3WZRoT 下载后双击安装即可! 另外分享一个安装教程,mark一下慢慢看: http://blog.csdn.ne ...

  2. DFS(White-Gray-Black)

    参考<数据结构与算法> 本书在复杂深度优先遍历图时,采用三种颜色标记图中节点 1 white 表示未访问 2 gray 表示已经正在访问,其相邻节点 3 black 表示该节点所有的相邻节 ...

  3. hdu 2841 Visible Trees

    /** 大意: 求[1,m], [1,n] 之间有多少个数互素...做了 1695 ,,这题就so easy 了 **/ #include <iostream> #include < ...

  4. Apple Watch程序开发30分钟秒懂

    苹果公司Apple Watch智能手表正在备受追捧,迅速掌握Apple Watch的APP架构,环境搭建,及实例开发将会让开发者占尽先机.我赢职场全国首发,30分钟玩转Apple Watch应用开发实 ...

  5. iOS NSRuntime机制

    什么是Objective-C runtime? 简单来说,Objective-C runtime是一个实现Objective-C语言的C库.对象可以用C语言中的结构体表示,而方法(methods)可以 ...

  6. E - Phone List（字典序，string类型使用）

    Description Given a list of phone numbers, determine if it is consistent in the sense that no number ...

  7. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  8. Oracle AWR 报告详解

    转自:http://blog.csdn.net/laoshangxyc/article/details/8615187 持续更新中... Oracle awr报告详解 DB Name DB Id In ...

  9. 2015 款 Macbook Pro 的 ForceTouch 触控板开启 三指拖动

    RT, 默认的触控板设置中没有了三指拖动这个选项, 但是可以通过勾选 辅助功能 -> 鼠标与触控板 -> 触控板选项 中的 启用拖移 来启用三指拖动...

  10. php 学习笔记 数组2

    10.切割数组 array_slice(array, offset, length);返回一个由原始数组中的连续元素组成的新数组,参数1为原始数组,参数2为要复制的起始位置, 参数3要复制的个数:新数 ...