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里面的属性不管
})

查看全文

相关阅读:
Notes about "Exploring Expect"
Reuse Sonar Checkstyle Violation Report for Custom Data Analysis
Eclipse带参数调试的方法
 MIT Scheme Development on Ubuntu
Manage Historical Snapshots in Sonarqube
U盘自动弹出脚本
 hg的常用配置
 Java程序员的推荐阅读书籍
 使用shared memory 计算矩阵乘法（其实并没有加速多少）
CUDA 笔记

原文地址：https://www.cnblogs.com/makan/p/4790605.html