zoukankan      html  css  js  c++  java
  • 学习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的方法。

    放下过去,才能迎接未来! 未来的每一天我都要过的精彩!
  • 相关阅读:
    泛微协同OA制造业解决方案
    泛微协同OA房地产行业解决方案
    基于内置web工作流的政府OA解决方案
    泛微协同OA广告行业解决方案
    成功导入数据
    首页做完了
    终于知道如何才能取得HtmlEditor里的数据了
    国庆放假了!
    最近这两天
    Dictionary<string, string>是一个泛型使用说明
  • 原文地址:https://www.cnblogs.com/lilylearning1992/p/4651156.html
Copyright © 2011-2022 走看看