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>