5、jquery使用工具函数

时间 2019-11-17

原文原文链接

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

　工具函数处理对象的不一样，能够将其分为几大类别：浏览器的检测、数组和对象的操做、字符串的操做、测试的操做、URL的操做。html

1.浏览器的检测java

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

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

**$.brower对象的属性**
属性名称	攻技能描述
webkit	若是是Webkit相关的浏览器，为true，不然为false。这是1.4以上版本新增的属性
mozilla	若是是Mozilla相关的浏览器，为true，不然为false。
safari	若是是Safari相关的浏览器，为true，不然为false。
opera	若是是Opera相关的浏览器，为true，不然为false。
msie	若是是Opera相关的浏览器，为true，不然为false。
version	获取浏览器版本号

示例代码：ajax

 <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.盒子模型api

盒子模型是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为被合并的对象，便可以将一个或多个对象合并成一个对象，最后返回该对象