• 学习JQuery中文文档之map()函数和get()函数


    今天学到一个新的函数map()。

    map(callback)

    官方概述:

    将一组元素转换成其他数组(不论是否是元素数组)

    你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

    参数:

    给每个元素执行的函数

    为了让学习者更容易理解这个函数,于是就有了下面这个栗子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试各种JQuery函数</title>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <p class="textmap"><b>Values: </b></p>
        <form class="textmapForm">
              <input type="text" name="name" value="John"/>
              <input type="text" name="password" value="password"/>
              <input type="text" name="url" value="http://ejohn.org/"/>
        </form>
        <script>
        $(function(){
            $(".textmap").append( $("input").map(function(){
                  return $(this).val();
            }).get().join(", ") );
            console.log($("input").map(function(){
                  return $(this).val();
            }));
        });
        </script>
    </body>
    </html>

    本来我是理解的,看完这个栗子,我就蒙了!

    $("input").map(function(){return $(this).val();})

    map函数已经完成了遍历和替换了,后面乱入的get()是咋回事呢?

    作为一个爱学习的好孩子,我又把两个函数的返回值再看了一遍,看完我还是很纠结,两个函数返回的都是对象,都是数组集合,那还需要多此一举加个get()是为啥?

    为了弄清楚这是为什么,我就自己试验了一下,把get()去掉,看看是如何执行的,结果……

    就报错了,报错内容是$.map().join()是不合法的。

    好吧,基础不好的孩纸真是伤不起,只能靠百度。

    度娘果然强大,很快就帮我把这个问题弄清楚了。

    原来JQuery下有一个概念叫“类数组”,例如$("li");获取的集合就是类数组,有数组的一些属性,但是不是真正的数组,这类数组的instance of Array是false。

    从jQuery对象和js对象的角度来理解的话就是JQuery这种类数组可以理解为属于JQuery对象的数组,所以不能应用JS对象的方法。

    这个时候就需要使用get()函数将JQuery对象转化为JS对象,从而可以使用数组的一些方法。

    顺便在巩固一下map()的工作机制。

    map()的工作有两步:

    1、遍历。遍历集合中的每一个元素。

    2、替换。对每一个元素执行callback,用返回值替换集合中原本的值。

    所以值虽然变了,但是依然属于JQuery对象。

    总结:

    map()函数返回JQuery对象的数组。

    get()函数返回JS对象的数组。

    ps:jQuery对象只能用JQuery的方法。

    放下过去,才能迎接未来! 未来的每一天我都要过的精彩!
  • 相关阅读:
    Modelsim SE 问题集锦【原创】
    Android Fastboot
    sd_fusing总结
    Quartus II 文件类型及备份【原创】
    GNU ARM汇编的.balignl对齐实验
    uboot_smdkv210 分析一:源码目录结构
    怎样理解阻抗匹配【转】
    单文件上传与微信多媒体文件转码
    获取微信签名
    Linux 环境下svn 服务器搭建
  • 原文地址:https://www.cnblogs.com/lilylearning1992/p/4651156.html
Copyright © 2020-2023  润新知