jQuer each函数 map函数使用简介

84483065

2013-05-17

其实jQuery对象本身就是一个数组。

比如我们将一个jQuery对象变成一个JavaScript对象要这么做：

var element = $('#id')[0] ;

我们使用jQuery对象进行遍历操作的时候，可以方便地使用each。

$('.input').each(function(){
        var text = $(this).val(); //jQuery对象
        alert(text);
});

JavaScript经常会遇到数组和对象的批量处理。

jQuery给了一层非常良好的封装。

这一个就是each了。

<!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,function(value) { 
            return value > 100; 
        }); 
        */ 
        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("div"));   
        //arr.reverse(); // 使用数组翻转函数    
        $.each(arr,function(n,value) {   
            //do something here   
            //alert(n+' '+value);   
            //alert(value.html());   
        });   
        var arr2 =$.unique(document.getElementsByTagName("div")); //获得唯一的对象，看API,说得很模
        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 var each alert