zoukankan      html  css  js  c++  java
  • jQuery工具函数

    一、$.browser对象属性                                                                                               

      属性列表                  说明

      webkit       webkit相关浏览器则返回true,否则返回false,如google,傲游。

      mozilla       mozilla相关浏览器则返回true,否则返回false,如火狐

      safari         safari相关浏览器则返回true,否则返回false,如safari

      opera        opera相关浏览器则返回true,否则返回false,如opera

      msie        msie相关浏览器则返回true,否则返回false,如IE,360,搜狗

      version       返回对应浏览器的版本

     
            $(function () {
                if ($.browser.msie) {
                    alert("IE浏览器");
                }
                if ($.browser.webkit) {
                    alert("webkit浏览器");
                }
                if ($.browser.mozilla) {
                    alert("mozilla浏览器");
                }
                if ($.browser.safari) {
                    alert("safari浏览器");
                }
                if ($.browser.opera) {
                    alert("opera浏览器");
                }
                alert($.browser.version);
            })
     

    二、boxModel                                                                                                           

      返回一个布尔值,如果是W3C盒子模型则返回true,否则返回false。

      盒子模型分两类,一类是W3C盒子模型,一类是IE盒子模型。两者的根本区别在于W3C的盒子模型不包括padding与border,仅指content的Height和Width,而IE盒子模型  包含padding与border。

     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="jQuery.1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                if ($.support.boxModel) {
                    alert("W3C盒子模型!");
                }
                else {
                    alert("IE盒子模型!");
                }
            })
        </script>
    </head>
    <body>
    
    </body>
    </html>
     

      上面的例子弹出W3C盒子模型,如果删除掉顶部的两行,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">。则弹出的是IE盒子模型。

    数组和对象的操作

    三、$.each()                                                                                                             

      此工具函数不仅能够完成指定数组的遍历,还能够实现页面中元素的遍历。

      语法:$.each(obj,fn(para1,para2))  obj要遍历的数组或对象,fn为每个遍历元素执行的回调函数,para1表示数组的序号或对象的属性,para2表示数组的元素和对象的属性。

     
            $(function () {
                var arr = [1, 2, 3, 4, 5];
                $.each(arr, function (index, value) {
                    document.write(index + ":");
                    document.write(value + "<br/>");
                });
            })     输出:       0:1       1:2       2:3       3:4       4:5
     

      $.each()遍历数组。

     
            $(function () {
                var arr = { "张三": "23","李四": 22,"王五": "21" };
                $.each(arr, function (index, value) {
                    document.write(index + ":");
                    document.write(value + "<br/>");
                });
            })     输出:张三:23        李四:22         王五:21
     

       元素遍历

     
    <head>
        <title></title>
        <script src="jQuery.1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("p").each(function () {
                    $(this).css("background-color", "red");
                });
           //一下三行代码与以上三行效果一样 //$.each($("p"), function () { // $(this).css("background-color", "red"); //}) }) </script> </head> <body> <p>我是第一个P</p> <p>我是第二个P</p> <p>我是第三个P</p> <p>我是第四个P</p> <p>我是第五个P</p> </body> </html>
     

    四、$.grep()                                                                                                             

      筛选符合条件的元素,返回一个新数组

        语法:$.grep(Arrar,fn(value,index));  要注意下回调函数的参数的顺序,第一个是值,第二个是索引。

           $.grep(Arrar,fn(value,index),[bool]);  第三个参数表示是否取反,true表示取反,false表示不取反。

     
            $(function () {
                var arr = [2, 5, 34, 22, 8];
                var arr1 = $.grep(arr, function(value, index) {
                    return index <= 2 && value < 10;
                })
                document.write(arr1.join());  //输出2,5
            })
     

    六、$.map()                                                                                                              

      改变函数内的数据,接受一个数组或类数组对象作为参数

     
            $(function () {
                var arr = [2, 5, 34, 22, 8];
                var arr1 = $.map(arr, function (value, index) {
                    if (value > 5 && index < 3) {
                        return value - 10;
                    }
                })
                document.write(arr.join() + "<br/>");  //2,5,34,22,8  可以看到原数组不改变
                document.write(arr1.join());        //24  新数组只获得了操作之后的结果
            })
     

    七、$.inArray()                                                                                                        

      如果数组中存在被搜索元素,则返回被搜索元素的索引

            $(function () {
                var arr = [1, 2, 3, 4, 5];
                alert($.inArray(4,arr));  //弹出 3
            })

     八、$.trim()

      去除字符串两边的空格

            $(function () {
                var str = " 你在他乡还好吗? ";
                document.write("11" + str + "11" + "<br/>");  //输出 11 你在他乡还好吗? 11
                document.write("11" + $.trim(str) + "11");   //输出 11你在他乡还好吗?11    //加个11是为了看清楚差别。
            })

    九、测试操作                                                                                                                

        $.isArray(obj)    检测参数是否是数组

        $.isFunction(obj)   检测参数是否是一个函数

        $.isEmptyObject(obj)  检测参数是否是一个空对象

        $.isPlainObject(obj)   检测参数是否是一个纯粹对象,即对象是否通过{}或new Object()关键字创建。

        $.contains(container,contained)  检测一个DOM节点是否包含另一个DOM节点。是则返回true否则表示false。注意参数是DOM对象并非jQuery对象。

            $(function () {
                var arr = [1, 2, 3, 2, 1];
                document.write(jQuery.isArray(arr));  //返回true
                var str = "123";
                document.write(jQuery.isArray(str));  //返回false         })
            $(function () {
                var f = fun1;
                alert($.isFunction(fun1));  //返回true
            })
            function fun1() { }
            $(function () {
                var obj1 = {};
                var obj2 = { name: "张飞" };
                alert($.isEmptyObject(obj1));  //返回true  obj1是空对象
                alert($.isEmptyObject(obj2));  //返回false  obj2不是空对象
            })
     
            $(function () {
                var obj1 = {};
                var obj2 = { name: "张飞" };
                var obj3 = new Object();
                var obj4 = null;
                alert($.isPlainObject(obj1));  //true  通过{}创建
                alert($.isPlainObject(obj2));  //true  通过{}创建
                alert($.isPlainObject(obj3));  //true  通过new Object()创建
                alert($.isPlainObject(obj4));  //flase  不是通过{}或new Object()创建
            })
     
            $(function () {
                alert($.contains($("#div1")[0],$("#p1")[0]));  //返回true,注意参数是DOM对象,并非jQuery对象
            })

    十、$.param()                                                                                                          

      序列化成url字符串

        $.param(obj,[bool]);  第二个参数为可选参数,表示是否浅层序列化

     
            $(function () {
                var man = { Name: "张飞", Age: 23 };
                var str = $.param(man);
                document.write(str);      //Name=%E5%BC%A0%E9%A3%9E&Age=23
                var str1 = decodeURI(str);
                document.write("<br>" + str1);  //Name=张飞&Age=23
            })
     

    十一、$.makeArray()                                                                                               

      将数组或类数组对象的属性复制到一个新的数组(真的是数组)中,并返回该新数组。

            var arr = [1,3,5,7,9];
            $(function () {
                var arr1 = $.makeArray(arr);
                document.write(arr1.join());  //输出 1,3,5,7,9
            })

    十二、$.merge()                                                                                                      

      该函数接受两个数组或类数组对象,将第二个参数附加到第一个参数上面,返回第一个参数,第一个数组会修改,第二个不会。

     
            var arr1 = [1, 3, 5, 7, 9];
            var arr2 = [2, 4, 6, 8, 10];
            $(function () {
                var arr3 = $.merge(arr1, arr2);
                document.write(arr1.join() + "<br/>");    //1,3,5,7,9,2,4,6,8,10
                document.write(arr2.join() + "<br/>");    //2,4,6,8,10
                document.write(arr3.join() + "<br/>");    //1,3,5,7,9,2,4,6,8,10
            })
     

    十三、$.parseJSON()                                                                                               

      该函数会解析JSON格式的字符串,并返回解析结果(对象)。 类似于JSON.parse(),注意:jQuery只定义了JSON解析函数,并没有定义序列化函数。

            var man = { name: "张三", age: 23 };
            var str = JSON.stringify(man);
            document.write(str + "<br/>");  //{"name":"张三","age":23}
            var man1 = $.parseJSON(str);
            document.write(man1.name + man1.age);   //张三23

    十四、$.proxy()                                                                                                         

      类似于Function对象的bind()方法,接受函数作为第一个参数,对象作为第二个参数,并返回一个新函数,该函数会作为第二个参数对象的方法调用。

     
      $(function () {
        var obj = {
          name: "John",
          test: function () {
            alert(this.name);    //当id为test的按钮点击时,弹出姓名
            $("#test").unbind("click", obj.test);  //并取消事件绑定(下次再点击不会弹出姓名)
        }
      };
        $("#test").click(jQuery.proxy(obj, "test"));  //绑定object对象里面的方法test
      })
     

    十五、$.unique(array)                                                                                            

      删除元素数组中的重复元素

    $(function () {
        var arr = [1, 2, 3, 2, 1];
        jQuery.unique(arr);
        alert(arr.join());  //返回  3,2,1
    })

    十六、$.extend()                                                                                                     

      合并对象中的元素

    $(function(){
        var result=$.extend({},{name:"Tom",age:21},    {name:"Jerry",sex:"Boy"});
      alert(result.name);    //输出 Jerry 后面的会覆盖前面的,result始终只是一个对象
    })

      省略dest参数,extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去。

      要特别注意的一点是:后面的值会覆盖前面同名的值。

    $(function(){
        $.extend({
            hello:function(){alert('hello');}  //该方法只有一个参数,意味着将hello方法合并到jQuery全局对象中去
        });
        $.hello();    //弹出 hello
    })

      命名空间示例:

     
    $(function(){
        $.extend({net:{}});        //扩展一个命名空间
        $.extend($.net,{
            hello:function(){alert('hello');}    //将hello方法绑定到命名空间net里去
        })
        $.net.hello();    //通过net命名空间调用方法
    })
     

      拷贝方法原型:

    extend(boolean,dest,src1,src2,src3...)

      其中第一个参数boolean表示是否进行深层拷贝。

     
    $(function(){
        var result=$.extend( true,  {},  
            { name: "John", location: {city: "Boston",country:"USA"} },  
            { last: "Resig", location: {state: "MA",country:"China"} } ); 
        alert(result.location.state);        //输出 MA
    
        //result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
    
        var result=$.extend( false,  {},  
            { name: "John", location: {city: "Boston",country:"USA"} },  
            { last: "Resig", location: {state: "MA",country:"China"} } ); 
        alert(result.location.city);        //输出 undefined
    
        //result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}    注意没有city,只是合并了location,location里面的属性不管
    })
  • 相关阅读:
    第04组 Beta冲刺 (2/5)
    第04组 Beta冲刺 (1/6)
    第04组 Alpha冲刺 总结
    二叉树的递归与非递归
    各类典例模板
    选择题合辑2
    运算符重载
    链表题目
    集合的模拟实现(类模板)
    2018Final静态成员(黑名单)
  • 原文地址:https://www.cnblogs.com/feng-NET/p/4541090.html
Copyright © 2011-2022 走看看