jQuery中工具函数

back>>

工具函数的一般格式如下：$.函数名()或jQuery.函数名()

1. 浏览器检测

    - 浏览器名称或版本信息
    可通过$.browser对象获取浏览器信息
    属性：
    webkit 为true表示是webkit相关的浏览器
    mozilla 为true表示是mozilla相关的浏览器
    safari 为true表示safari相关的浏览器
    opera 为true表示opera相关的浏览器
    msic 为true表示IE浏览器
    version 获取浏览器版本
    例子：

if ($.browser.msie) { //IE浏览器
                strTmp = "IE";
            }
            if ($.browser.mozilla) { //火狐相关浏览器
                strTmp = "Mozilla FireFox";
}
trTmp = " 版本号是："+ $.browser.version; //获取版本号

    在Mozilla 浏览器中，$.browser.version显示的是内核版本，不是浏览器版本

 

    - 盒子模型
    盒子模型是CSS术语，用来描述页面设置中的各种属性，如内容(content)，填充(padding)，边框(border)，边界(margin)
    有两类盒子模型：W3C模型和IE盒子模型
    W3C模型的属性height与Width取值不包含padding和border，仅仅指内容(content)的height与width
IE盒子模型的height与width属性值包含padding和border
    $.support.boxModel返回一个布尔值，为true表示是W3C盒子模型，否则表示IE盒子模型

if ($.support.boxModel) { //是W3C盒子模型
    strTmp += "W3C盒子模型";
}

 

2. 数组和对象操作
    - 遍历数组
    $.each()可以实现页面元素的遍历和指定数组的遍历
    $.each(obj,fn(para1,para2)) obj表示要遍历的数组或对象
    例子：

var arrStu = { "张三：": "60", "李四：": "70", "王二：": "80" }
    var strContent = "<li class='title'>姓名：分数</li>";
    $.each(arrStu, function(Name, Value) {
    strContent += "<li>" + Name + Value + "</li>";
})

 

    - 遍历对象

$.each($.ajaxSettings, function(Property, Value) {
            strContent += "<li>" + Property + "：" + Value + "</li>";
})

 

    - 数据筛选
    $.grep(array,function(elementOfArray,indexInArray),[event]) 根据条件筛选元素
    array为要筛选的数组，elementOfArray为数组中的元素值，indexInArray为元素在数组中的序号，[event]为布尔值，表示是否根据fn的规则取反向结果。默认为false，表示不取反。
    例子：查询素组中元素值大于5且序号小于8的元素

$(function() {
            var strTmp = "筛选前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.grep(arrNum, function(ele, index) {
                return ele > 5 && index < 8 //元素值大于5且序号小于8
            },【true】)
            strTmp += arrNum.join();
            strTmp += "<br/><br>筛选后数据："
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
})

 

    - 数据变更
    $.map(array,callback(elementOfArray,indexInArray))按指定条件修改数组中的所选元素
    例子：将数组中元素值大于5且序号小于8的元素都增加3

$(function() {
            var strTmp = "变更前数据：";
            var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
            var arrGet = $.map(arrNum, function(ele, index) {
                if (ele > 5 && index < 8){ //元素值大于5且序号小于8
                    return ele + 1; //元素增加1
                }
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>变更后数据："
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
})

 

    - 数据搜索

    $.inArray(value,array) 在数组中搜索某个元素，相当于javaScript中indexOf()搜索字符串中的某个字符。在$.inArray()中，如果找到了指定的某个元素，则返回该元素在数组中的索引号，否则返回-1。value表示搜索对象，array表示搜索数组。
    例子：

$(function() {
            var strTmp = "待搜索数据：";
            var arrNum = [4, 21, 2, 12, 5];
            var arrPos = $.inArray(2, arrNum);
            strTmp += arrNum.join();
            strTmp += "<br/><br>搜索后结果："
            strTmp += arrPos;
            $("#divTip").append(strTmp);
})

 

3. 字符串操作
    - $.trim(str)删除字符串str中左右两边的空格符
    - Startwith
    - Endwith

4. 测试操作
    - $.isArray(obj) 检测obj是否是数组对象
    - $.isFunction(obj)检测obj是否是一个函数
    - $.isEmptyObject(obj)检测obj是否是一个空对象
    例子：

$(function() {
            var obj0 = {};
            var obj1 = { "name": "taoguorong" };
            var strTmp = "obj0是否为空：" + $.isEmptyObject(obj0);//true
            strTmp += "<br><br>obj1是否为空：" + $.isEmptyObject(obj1);//false
            $("#divTip").append(strTmp);
})

 

    - $.isPlainObject(obj)检测obj是否是一个原始对象

 

$(function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null";
            var strTmp = "obj0是否为原始对象：" + $.isPlainObject(obj0);//true
            strTmp += "<br><br>obj1是否为原始对象：" + $.isPlainObject(obj1);//true
            strTmp += "<br><br>obj2是否为原始对象：" + $.isPlainObject(obj2);//false
            $("#divTip").append(strTmp);
})

 

    - $.contains(container,contained)检测一个dom节点是否包含另一个dom节点。

$(function() {
            var node0 = document.documentElement;//代表文档根节点
            var node1 = document.body;//文档根节点下的子节点
            var strTmp = "对象node0是否包含对象node1："
            strTmp += $.contains(node0, node1);//检测两者的包含关系 返回true
            $("#divTip").append(strTmp);
})

 

5. URL操作
     $.param(obj,[traditional]) 按照name/value的格式对数组或jQuery对象进行序列化，obj是要序列化的数组或对象。

$(function() {
            var arrInfo = { id: 101, name: "tao", sex: 0 }; //基本信息数组
            //分数和汇总信息数组
            var arrScore = { Score: { chinese: 90, maths: 100, english: 98 },
                SunNum: { Score: 288, Num: 3 }
            };
            //序列化各数组
            var arrNewInfo = $.param(arrInfo);
            var arrNewScore = $.param(arrScore);
            var arrDecScore = decodeURIComponent($.param(arrScore));
            //显示序列化后的数组
            var strTmp = "<b>arrInfo数组序列化后</b>：";
            strTmp += arrNewInfo;
            strTmp += "<br><br><b>arrScore数组序列化后</b>：";
            strTmp += arrNewScore;
            strTmp += "<br><br><b>arrScore序列化解码后</b>：";
            strTmp += arrDecScore;
            //显示在页面中
            $("#divTip").append(strTmp);
})

 

6. 自定义工具类函数
     $.extend()函数，可以编写自定义的工具函数

/*------------------------------------------------------------/
        功能：返回两个数中最大值
        参数：数字p1,p2
        返回：最大值的一个数
        示例：$.MaxNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MaxNum": function(p1, p2) {
                    return (p1 > p2) ? p1 : p2;
                }
            });
        })(jQuery);

        /*------------------------------------------------------------/
        功能：返回两个数中最小值
        参数：数字p1,p2
        返回：最小值的一个数
        示例：$.MinNum(1,2);
        /------------------------------------------------------------*/
        ; (function($) {
            $.extend({
                "MinNum": function(p1, p2) {
                    return (p1 > p2) ? p2 : p1;
                }
            });
        })(jQuery);
       
        $(function() {
            var strTmp = "5与6中最大的数是：";
            strTmp += $.MaxNum(5, 6);
            strTmp += "<br><br>7与8中最小的数是：";
            strTmp += $.MinNum(7, ;
            $("#divTip").append(strTmp);
        })

 

    $.extend()另外一个强悍的功能，就是可以扩展已有的Object对象：$.extend(target, object1,object2,…) 其中target表示合并后的对象，object表示被合并对象。

    例：

var objName={name:“张三”,sex:”男”};
var objInfo={name:”李四”,age:30};
var objLast=$.extent(objName,objInfo);
结果：objLast={name:”李四”,sex:”男”,age:”30”}

    可以看出，$.extend()函数在合并对象时，相同的参数名称，后面对象会覆盖前面对象的参数值。

7. $.proxy()处理不同作用域对象事件

    $.proxy(function,scope)
    $.proxy(scope,name)
    $.proxy()返回一个新的函数，这个函数始终保持特定的作用域。当一个事件函数被元素绑定时，其作用域原则上应指向该元素。参数scope为被事件函数设定的作用域对象
    例子：

$(function() {
            var objMyInfo = {
                name: "陶国荣", //设置对象name属性
                sex: "男", //设置对象sex属性
                ShowEvent: function() { //设置执行的事件
                    $("#divShow").html("姓名：" +
                     this.name + "<br><br>性别：" +
                     this.sex);
                }
            }
            $("#Button1").bind("click", $.proxy(objMyInfo, "ShowEvent"));//通过proxy函数绑定设置的事件
})

 

    $("#Button1").bind("click", $.proxy(objMyInfo, "ShowEvent"));与

$("#Button1").bind("click",objMyInfo.ShowEvent);的区别是，后者传递的this作用域与事件函数中的this的作用域不同，因此，无法访问事件函数中的name与sex属性。而前者指定作用域是objMyInfo，即，代表事件中this的作用域。前者等价于$("#Button1").bind("click", $.proxy(objMyInfo.ShowEvent, objMyInfo));

8. 正则表达式字符串类型检验