`
dacoolbaby
  • 浏览: 1254294 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuer each函数 map函数使用简介

阅读更多

其实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中map函数与each函数的区别实例介绍

    ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的。 ​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个新的数组。如果在没有必要的情况下使用...

    jQuery函数map()和each()介绍及异同点分析

    主要介绍了jQuery函数map()和each()介绍及异同点分析,需要的朋友可以参考下

    JQuery权威指南源代码

    使用$.map()工具函数变更数组中的元素 使用$.inArray()工具函数搜索数组中指定元素的位置 使用$.trim()工具函数除掉字符串的空格符 使用$.isEmptyObject()函数检测对象是否为空 使用$.isPlainObject()函数检测...

    jQuery权威指南-源代码

    9.5 综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测/305 9.5.1 需求分析/305 9.5.2 效果界面/305 9.5.3 功能实现/306 9.5.4 代码分析/309 9.6 本章小结/311 第10章 jQuery性能优化与最佳...

    jQuery 1.4.1 中文参考

    2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...

    jQuery详细教程

    jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用...

    jquery-1.1.3 效率提高800%

    // the options for this ajax request }timeout 数据类型: Number 如果通过$.ajaxSetup设置了一个全局timeout,那么此函数使用一个局部timeout覆盖了全局timeout(单位为毫秒)。例如,你可以设置比较长的...

    JQuery新版中文手册

    jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get([index]) index...

    原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考,具体如下: 一、原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项。 ②....

    jQuery完全实例.rar

    jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...

    jquery1.11.0手册

    jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector context get([index]) ...

    Jquery中对数组的操作代码

    而在Jquery中则使用$.map()、$.each()来操作数组: 首先是普通的数组(索引为整数的数组): 代码如下: $.map(arr,fn); 对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 var arr...

    Jquery 1.3 简体中文手册

    jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context get() get(index) index...

    JQuery 1.3 中文参考手册

    jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context get() get(index) index...

Global site tag (gtag.js) - Google Analytics