zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    84. Largest Rectangle in Histogram (Solution 2)
    84. Largest Rectangle in Histogram (Solution 1)
    73. Set Matrix Zeroes
    【JavaScript】Symbol 静态方法
    【JavaScript】Date
    【JavaScript】Math
    725. Split Linked List in Parts把链表分成长度不超过1的若干部分
    791. Custom Sort String字符串保持字母一样,位置可以变
    508. Most Frequent Subtree Sum 最频繁的子树和
    762. Prime Number of Set Bits in Binary Representation二进制中有质数个1的数量
  • 原文地址:https://www.cnblogs.com/sjqq/p/6397868.html
Copyright © 2011-2022 走看看