一、$.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里面的属性不管

})

source:http://www.cnblogs.com/kissdodog/archive/2012/12/27/2835561.html

jQuery 工具函数的更多相关文章

从零开始学习jQuery (九) jQuery工具函数
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就 ...
jQuery工具函数（转）
原文地址:http://www.cnblogs.com/kissdodog/archive/2012/12/27/2835561.html 作者:逆心 ------------------------ ...
jQuery工具函数
要点:1.字符串操作2.数组和对象操作3.测试操作4.URL 操作5.浏览器检测6.其他操作工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性的函数.它的作 ...
4月13日学习笔记——jQuery工具函数
浏览器及特性检测 jQuery.support.boxModel 如果这个页面和浏览器是以 W3C CSS 盒式模型来渲染的,则等于 true.通常在 IE 6 和 IE 7 的怪癖模式中这个值是 f ...
分享几个实用的jquery工具函数
1.$.browser对象属性属性列表说明 webkit webkit相关浏览器则返回true,否则返回false,如google,傲游. mozilla mozilla相关浏览器则返回tru ...
jquery工具函数browser() 辨别浏览器
1.browser属性不是一个函数是一个全局对象,可以辨别客户端浏览器. 2.属性1:$.browser.msie如果返回true则客户端浏览器是ie.相似的$.browser.safari返回tru ...
jQuery工具函数下
测试操作 1.判断是否为数组对象 $(function () { //判断是否为数组对象 var arr = [1,2,3,4]; alert($.isArray(arr));//true }); 2 ...
jQuery工具函数上
1.字符串操作 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
JQuery中的工具函数总结
前提引入前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

随机推荐

关于JS正则表达式
去除所有P标签 content=content.replace(/<([\/]?)(p)((:?\s*)(:?[^>]*)(:?\s*))>/g, ''); 将所有的 1. ...
iOS知识列表
Xib和StoryBoard,自动布局地图导航,实时公交,第三方地图应用本地推送通知,网络推送通知,真机调试,应用上传绘图,图表,曲线图 Xcode使用技巧多线程,runtime机制编码解码,加密设备 ...
BZOJ 1027 [JSOI2007]合金 ——计算几何
我们可以把每一种金属拆成一个二维向量,显然第三维可以计算出来,是无关的. 我们只需要考虑前两维的情况,显然可以构成点集所形成的凸包内. 然后我们枚举两两的情况,然后可以发现如果所有的点都在一侧是可以选 ...
hdu 2713
#include<stdio.h> #include<string.h> int map[151000][2]; int max(int a,int b) { return ...
PHP中使用GD库方式画时钟
 <body> <img id="time" src="test.php" /> &l ...
矩阵乘法 BZOJ 2738
矩阵乘法 [问题描述] 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. [输入格式] 第一行两个数N,Q,表示矩阵大小和询问组数:接下来N行N列一共N*N个数,表示这个矩阵: ...
Mysql Binlog日志文件介绍
一.Binlog简介官方文档参考 https://dev.mysql.com/doc/refman/5.5/en/binary-log.html Binlog(Binary Log) 指数据库的表创 ...
POJ2752 NEXT[J]特性应用利用。
题意:求一个字符串所有的前缀和后缀相同的情况,每个情况输出长度,如 ababcababababcabab :2 4 9 18 思路:next数组应用,利用j=nxet[i],i之前与开头相同的字符串长 ...
Delphi使用进行post数据时超时设置
因项目需要进行http的post提交数据,开始时用indy的idHttp组件,但是测试时发现当网络中断(如拔掉网线),idHttp的超时设置无效果,要等20秒才提示超时(参考网上的做法,将indy9升 ...
profile, bashrc, source, setup.*sh
一. source: 命令是使该文件立刻执行,这样刚才做的修改就可以立即生效了,否则要重新启动系统修改才能生效.(执行其后命令使之立即生效,不用重启) 二.bashrc: 1.linux系统:/etc ...

jQuery 工具函数