• jQuery功能函数详解


    jQuery通过$.browser对象获取浏览器信息。

    属性 说明
    msie 如果是ie为true,否则为false
    mozilla 如果是mozilla相关的浏览器为true,否则为false
    safari 如果是Safari浏览器为true,否则为false
    poera 如果是opera浏览器为true,否则为false
    version 浏览器的版本号
    在使用时,开发者可以直接调用这些属性来获取浏览器属性。如下:

    <script type="text/javascript">
                $(function() {
                    function detect() {
                        if ($.browser.msie)
                            return "IE";
                        if ($.browser.mozilla)
                            return "Mozilla";
                        if ($.browser.safari)
                            return "Safari";
                        if ($.browser.opera)
                            return "Opera";
                    }
                    var sBrowser = detect();
                    document.write("您的浏览器是:" + sBrowser + "<br>版本为:" + $.browser.version)

                });
            </script>

    $.each(object,fn);
    其中,object为需要遍历的对象,fn为object中每个元素都执行的函数,其中函数fn可以接受两个参数,第一个参数为数组元素的序号或者是对象的属性。第二个参数为元素或者属性的值

    例子:用$.each()函数遍历数组和对象

    <script type="text/javascript">
                var aArray = ["one", "two", "three", "four", "five"];
                $.each(aArray, function(iNum, value) {
                    //征对数组
                    document.write("序号" + iNum + "值" + value + "<br>");
                });
                var oObj = {
                    one: 1,
                    two: 2,
                    three: 3,
                    four: 4,
                    five: 5
                };
                $.each(oObj, function(pro, value) {
                    //征对对象
                    document.write("属性" + pro + "值" + value + "<br>")
                });
            </script>

    从上面的例子可以看到,$.each()对遍历数组和对象都十分方便,例如对未知的属性$.browser,使用$.each进行遍历

    $.each($.browser, function(iNum, value) {
                    //征对数组
                    document.write("属性" + iNum + "值" + value + "<br>");
                });
    得值:

    属性chrome值true
    属性version值39.0.2171.99
    属性webkit值true


    ii.过滤数据

    对于数组中的数据,很多时候开发者需要对其进行筛选,如果使用纯javascript,往往需for循环进行逐一检查。jQuery提供了$.grep()方法。能够便捷的过滤数组的数据。

    其语法如下:

    $.grep(Array,fn,[invert])
    其中,array是需要过滤的数组对象名称,fn为过滤函数,对数组中的每个对象,如果返回true则保留,否则去除。可选的invert为布尔值,如果设置为true.则函数fn取反,满足条件的被去除。

    var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
                var aResult = $.grep(aArray, function(value) {
                    return value >= 4;
                });         
                document.write(aResult.join());

    首先定义了数组aArray,然后用$.grep()方法将值大于等于4挑选出来得到新的数组

    例子2,过滤数组的高级方法。

    <script type="text/javascript">
                var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];
                var aResult = $.grep(aArray, function(value, index) {
                    //元素的值和value和序号同时判断
                    return (value >= 4 && index > 3);
                });

                document.write(aResult.join());
            </script>

    iii转化数组

    很多时候开发者希望某个数组中的元素能够统一的转化,例如将所有的元素都乘以2.虽然在javascript中例如for循环可以实现,但是jQuery提供了更为便利的$.map()方法。这个方法如下

    $.map(array,fn)
    其中,array为要转化的数组,fn为转化函数,对数组中的每一项都执行,该函数同样可以接受两个函数,1个参数为元素的值。2个参数为元素的序号,是可选参数。

    <script type="text/javascript">
                $(function() {
                    var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
                    $("p:eq(0)").text(aArray.join());
                    aArray = $.map(aArray, function(value, index) {
                        //将数组转化为大写并添加了序号
                        return (value.toUpperCase() + index);
                    });
                    $("p:eq(1)").text(aArray.join());

                    cArray = $.map(aArray, function(value) {
                        return value + value;
                    });
                    $("p:eq(2)").text(cArray.join());
                });
            </script>
            <p></p>
            <p></p>
            <p></p>

    使用$.map()函数进行转移后,数组长度不一定与原来的数组相同。可以通过设置null来删除数组的元素。

    <script type="text/javascript">
                $(function() {
                    var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
                    $("p:eq(0)").text(aArray.join());
                    $("p:eq(1)").text("aArray长度:" + aArray.length + "值:" + aArray.join());
                    cArray =$.map(aArray,function(value){
                        //比1大的+1后返回,否则通过设置为null将其删除
                        return value>1?value+1:null;
                    });
                    $("p:eq(2)").text("cArray长度:" + cArray.length + "值:" + cArray.join());
                });
            </script>
            <p></p>
            <p></p>
            <p></p>

    除了删除元素外,$.map转化数组时同样可以增加数组元素。

     <script type="text/javascript">
                $(function() {
                    var aArray = ["one", "two", "three", "four", "five"];
                    $("p:eq(0)").text(aArray.join());
                    cArray =$.map(aArray,function(value){
                        return value.split("");
                    });
                    $("p:eq(1)").text("cArray长度:" + cArray.length + "值:" + cArray.join());
                });
            </script>
            <p></p>
            <p></p>

    iiii搜索数组元素

    对于字符串,可以通过indexOf()来搜索特定字符所处的位置,对于数组元素,javascript没有提供类似的方法。在jQ中,$.inArray()函数可以很好的数组元素的搜索功能。语法如下:

    $.inArray(value,array)
    其中,value为希望查找的对象,array为数组本身,如果找到了则返回第一个匹配元素在数组的位置。如果没有则返回-1.

     <script type="text/javascript">
                $(function() {
                    var aArray = ["one", "two", "three", "four", "five"];
                    var cx1 = $.inArray("two", aArray);
                    var cx2 = $.inArray("www", aArray);
                    $("p:eq(0)").text(cx1);
                    $("p:eq(1)").text(cx2);
                });
            </script>
            <p></p>
            <p></p>

    4.获取外部代码

    在一些较大工程中,开发者将不同的js放在不同的js文件中,有时根据补贴的需求加载不同的代码。jQuery提供了$.getScript()实现外边的代码加载。使用方法如:

    $.getScript(url,[callback])
    其中,url为外部资源的地址,可以是相对的,也可以是绝对的地址。callback为加载成功后的回调函数,可选。

    <script type="text/javascript">
                $(function() {
                    $("p:eq(0)").click(function() {
                        $.getScript("1.js");
                    });
                    $("p:eq(1)").click(function() {
                        textfun();
                    });
                });
            </script>
            <p>点击1</p>
            <p>点击2</p>

  • 相关阅读:
    【Opencv】直方图函数 calchist()
    【Lintcode】070.Binary Tree Level Order Traversal II
    【C++】*p++ = *p不同环境下操作不同
    【Python】String 字符串
    【Python】File IO
    栈和队列
    链表
    printf 的格式
    Linux的基本指令--
    机器人的运动范围
  • 原文地址:https://www.cnblogs.com/sjqq/p/6397868.html
Copyright © 2020-2023  润新知