您的位置:首页 > Web前端 > JQuery

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

2013-12-13 11:06 891 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: