五、jquery使用工具函数

　　工具函数对应的网址在 http://api.jquery.com/categouy/utilities/

　   工具函数处理对象的不同，可以将其分为几大类别：浏览器的检测、数组和对象的操作、字符串的操作、测试的操作、URL的操作。

1.浏览器的检测

在浏览其的进啊侧中，又可分为浏览器类型与特征的检测，前者获取浏览器的名称或版本信息，今后这检测浏览是否支持标准的W3C盒子模型。

1-1.虽然jquery有很好的浏览器兼容性，但有时程序开发人员需要获取浏览器的相关信息，提供给用户或程序。在jquery中，可以通过访问$.brower对象的属性获取。$.brower对象即jQuery.brower对象，用于处理与浏览器相关的事务，该对象的属性如表所示：

$.brower对象的属性

属性名称	攻技能描述
webkit	如果是Webkit相关的浏览器，为true，否则为false。这是1.4以上版本新增的属性
mozilla	如果是Mozilla相关的浏览器，为true，否则为false。
safari	如果是Safari相关的浏览器，为true，否则为false。
opera	如果是Opera相关的浏览器，为true，否则为false。
msie	如果是Opera相关的浏览器，为true，否则为false。
version	获取浏览器版本号

 

示例代码：

 <script type="text/javascript">
        $(function() {
            var strTmp = "您的浏览器名称是：";
            if ($.browser.msie) { //IE浏览器
                strTmp += "IE";
            }
            if ($.browser.mozilla) { //火狐相关浏览器
                strTmp += "Mozilla FireFox";
            }
            strTmp += " 版本号是：" //获取版本号
                   + $.browser.version;
            $("#divTip").html(strTmp);
        })
    </script>

 

1-2.盒子模型

盒子模型是CSS中的专术名词，用以描述页面设置中的各种属性，如内容（content）、填充（padding）、边框（border）、边界（margin）。由于这些属性平和在一起，与日常生活中的“盒子”很相像，因此成为盒子模型。

盒子模型分为两类：一类是W3C盒子模型；另一类是IE盒子模型。两者最根本的区别在于height与width这两个只是否包含padding与border。

W3C盒子模型不包含padding与border，仅值内容（content）的的height和width。IE盒子模型的height和width的长度包含padding与border。

在jquery中，可以通过jquery.suport.boxModel对象返回的属性值，确定页面是否是标准的W3C盒子模型，其调用的方法有两种，如下所示：

jQuery.support.boxModel
$.support.boxModel

　　该方法返回一个布尔值，如果是true表示是W3C盒子模型，否则不是W3C盒子模型。

示例代码：

    <script type="text/javascript">
        $(function() {
            var strTmp = "您打开的页面是：";
            if ($.support.boxModel) { //是W3C盒子模型
                strTmp += "W3C盒子模型";
            }
            else { //是IE盒子模型
                strTmp += "IE盒子模型";
            }
            $("#divTip").html(strTmp);
        })
    </script>

 

2.数组和对象的操作

2-1.遍历数组

使用$.each()工具函数可以实现页面中元素的遍历，此外还可以完成制定数组的遍历，其调用语法格式如下：

$.each(obj,fn(para1,para2))

其中，参数obj表示要遍历的数组或对象。fn为每个遍历元素执行的回调函数，该函数包含两个参数：para1表示数组的序号或对象的属性；para2表示数组的元素和对象的属性。

示例代码：

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

 

2-2.遍历对象

$.each()函数除了遍历数组外，还可以遍历对象，获取对象的属性和值。常用于对一些位置对象的遍历，其使用方法与遍历数组比本一致，示例代码如下：

    <script type="text/javascript">
        $(function() {
            var strContent = "<li class='title'>属性：值</li>";
            $.each($.ajaxSettings, function(Property, Value) {
            strContent += "<li>" + Property + "：" + Value + "</li>";
            })
            $("ul").append(strContent);
        })
    </script>

结果：

3.数据筛选

在数组操作时，有时需要根据各种个条件筛选元素，传统的javascript代码将遍历整个数组，在遍历中设置晒寻规则，然后获取复合规则的严肃。而在jquery中，可以使用工具函数jquery.grep()，很方便地筛选数组中的任何元素，该函数调用的语法格式如下：

$grep(array,function(elementOfArray,indexInArray),[invert])

参数array为要筛选的原数组，回调函数fn中可以设置两个参数，其中elementOfArray为数组中的元素，indexInArray为元素中的序列号。另外，可选项[invert]为布尔值，表示是否根据fn的规则去反向结果，默认为false，表示不取反，如果为true表示取反，即返回与回调函数规则相反的数据。

示例代码：

    <script type="text/javascript">
        $(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
            })
            strTmp += arrNum.join();
            strTmp += "<br/><br>筛选后数据："
            strTmp += arrGet.join();
            $("#divTip").append(strTmp);
        })
    </script>

 

4.数据变更

如果要指定条件修改数组中的所选元素，需要另外一个工具函数$.map()，其调用的语法格式如下：

$.map(array,callback(elementOfArray,indexInArray)

参数array为要筛选的原数组，回调函数fn中可以设置两个参数，其中elementOfArray为数组中的元素，indexInArray为元素中的序列号。

示例代码：

    <script type="text/javascript">
        $(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);
        })
    </script>

结果：

 

 5.数据搜索

在工具函数$.inArray()中，入股哦找到了制定的某个元素，则返回钙元素在数组中的索引号，否则返回-1值。其调用的格式如下所示：

$.inArray(value,array)

其中，参数value表示要搜索的对象，array表示搜索对象的数组

示例代码：

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

结果：

6.字符串操作

在jquery中，入股要除掉字符中左右里爱你改变的空格符，可以使用工具函数$.teim()。该函数常用语字符串的操作，也是jquery和辛苦中唯一针对字符串操作的工具函数，其调用的语法格式如下所示：

$.trim(str)

其中，参数str为需要删除左右边空格符的字符串。

示例代码：

    <script type="text/javascript">
        $(function() {
            var strTmp = "内容：";
            var strOld = "  jQuery,write less do more    ";
            var strNew = $.trim(strOld);
            strTmp += strOld;
            strTmp += "<br/><br>除掉空格符前的长度："
            strTmp += strOld.length;
            strTmp += "<br/><br>除掉空格符后的长度："
            strTmp += strNew.length;
            $("#divTip").append(strTmp);
        })
    </script>

结果：

7.测试操作

7-1.检测对象是否为空

$.isEmptyObect()函数可以检测对象本身和原型集成属性这两个特征是否为空，对象的原型集成属性是指对象是否使用hasOwnProperty，拥有自己的属性名称。

$.isEmptyObect()函数的参数是一个普通的javascript对象，该函数返回true时，表示是一个空对象，否则为一个非空对象。

示例代码：

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

结果：

7-2.检测对象是否为原始对象

通过$.isPlainObject()函数检测对象是否是一个纯粹、原始的对象，即对象是否通过{}或new Object()关键则创建。

示例代码：

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

 

7-3.检测两个节点的包含关系

$.cntains()函数的作用是检测在一个DOM节点中是否包含另外一个DOM节点，其调用的语法格式如下：

$.contains(container,contained)

其中，参数container为Object，是一个DOM元素，作为容器可以包容其他DOM元素；参数contained也是一个DOM节点，可能被其他元素所包含。整个函数返回一个布尔值，如果container对象包含contained对象，则结果为true，否则结果为false。

 

8.URL操作

URL操作即，使用seralize()方法来徐立华表单向服务器提交的数据，而serialize()方法的核心就是工具函数$.param()。通过该函数可以使用数组或工具jquery对象按照name/value的格式进行序列化，普通对象按照key/value的格式进行序列化。

工具函数$.param()的调用语法格式为：

$.param(obj.[traditional])

其中，参数obj表示需要进行序列化的对象，该对象可以是数组、jquery元素、普通对象。可选项参数[traditional]表示是否使用普通的方式恰能序列化，该函数返回一个序列化后的字符串。

 

9.其他工具函数

9-1.$.proxy()函数

$.proxy()函数返回一个新的函数，并且这个函数始终个保持特定的作用域。当一个事件函数被元素帮i的那个时，其作用域原则上应指向钙元素，但是有些时间函数的作用域，在被元素绑定时并不只想元素本身，而是指向另外一个对象。这时，为了使用元素的绑定事件能正常执行，必须调用$.proxy()函数进行处理，经过处理后的事件函数不仅可以被绑定的元素执行，而且还可以传递原先函数取消事件的绑定，该函数调用的语法格式为：

$.proxy(function,scope)

其中，参数function为要改变作用域的事件函数，参数scope为被事件函数设置作用域的对象，即事件函数作用域将设置到该对象中.

该函数还有另外一种调用方式，低吗如下：

$.proxy(scope,name)

其中，参数scope为被事件函数设定的作用域对象；参数name为将要设置作用域的函数名，并且该参数必须是scope作用域对象的一个属性。

 

11.工具函数的扩展

11-1.使用$.extend()扩展工具函数

　　工具函数的扩展，其实质就是自己编写类级别的插件用于扩展jquery对象本身。为实现这一目的，我们引入另外一个工具函数$.extend().

　　通过$.extend()函数可以很方便地定义自己的工具函数。

示例代码如下：

    <script type="text/javascript">
        /*------------------------------------------------------------/
        功能：返回两个数中最大值
        参数：数字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, 8);
            $("#divTip").append(strTmp);
        })
    </script>

结果：

11-2.使用$.extend()扩展Object对象

　　工具函数$.extend()除可以扩展jquery自身函数外，还有另外一个很强悍的功能，就是扩展已有的Object对象，其调用的语法格式为：

$.extend(target,oject1,...[objectN])

其中，参数target表示合并后的对象；object为被合并的对象，即可以将一个或多个对象合并成一个对象，最后返回该对象