讀[6]--實用工具函數

官方地址：http://api.jquery.com/category/utilities/

一、數組和對象操作

1. $.each——遍歷

$.each(obj,function(param1,param2))
遍歷數組時：param1爲元素序號，param2爲元素內容；
遍歷對象時：param1爲元素屬性名，param2爲元素屬性值。

例如：
①遍歷數組:
 

$(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 type="text/javascript">
        $(function() {
            var strContent = "<li class='title'>屬性：值</li>";
            $.each($.get, function(Property, Value) {
                strContent += "<li>" + Property + "：" + Value + "</li>";
            })
            $("ul").append(strContent);
        })
    </script >

2.$.grep——篩選數組

$.grep(array,function(element,index))：array爲要篩選的數組，element爲數組中的元素，index爲元素在數組中的序號（0起）。

<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);
        },true)
    </script >

   執行結果：

篩選前數據：2,8,3,7,4,9,3,10,9,7,21
篩選後數據：8,7,9,10

3.$.map——數據變更

$.map(array,function(element,index))：array爲要篩選的數組，element爲數組中的元素，index爲元素在數組中的序號

<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>

執行結果：

變更前數據：2,8,3,7,4,9,3,10,9,7,21
變更後數據：9,8,10,11

4.$.inArray()——查找數組元素

$.inArray(value,array)：查找元素在數組中的元素，如果不存在則返回-1。

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

執行結果：

待搜索數據：4,21,2,12,5
12搜索結果：3

二、瀏覽器檢測

$.browser對象，可以處理瀏覽器相關檢測。
注意：該對象在jquery1.4.2添加，但是1.9中已經刪除。

$.support.boxModel檢測頁面是否爲標準盒子模型。經測試該對象在1.10中測試也已經去掉。

三、字符串操作

   $.trim()：去掉字符串左右兩側的空格。這是jquery核心庫中唯一針對字符串處理的函數。

四、測試函數

1.$.isEmptyObject(obj)：檢測參數是否爲空對象。

<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = { "name" : "taoguorong" };
            var obj2 = [];
            var obj3 = [1];
            var obj4;
            var strTmp = "obj0是否爲空：" + $.isEmptyObject(obj0);           //true
            strTmp += "<br><br>obj1是否爲空：" + $.isEmptyObject(obj1);//false
            strTmp += "<br><br>obj2是否爲空：" + $.isEmptyObject(obj2);//true
            strTmp += "<br><br>obj3是否爲空：" + $.isEmptyObject(obj3);//false
            strTmp += "<br><br>obj4是否爲空：" + $.isEmptyObject(obj4);//true
            $( "#divTip").append(strTmp);
        })
    </script >

2.$.isPlainObject(obj)：檢測參數是否爲原始對象，即通過{}或者new Object()創建。

<script type="text/javascript">
        $( function() {
            var obj0 = {};
            var obj1 = new Object();
            var obj2 = "null" ;
            var obj3 = { "a" : 1 };
            var obj4 = new Object(1);
            var obj5 = 1;
            var strTmp = "obj0是否爲原始對象：" + $.isPlainObject(obj0);           //true
            strTmp += "<br><br>obj1是否爲原始對象：" + $.isPlainObject(obj1);//true
            strTmp += "<br><br>obj2是否爲原始對象：" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj3是否爲原始對象：" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj4是否爲原始對象：" + $.isPlainObject(obj2);//false
            strTmp += "<br><br>obj5是否爲原始對象：" + $.isPlainObject(obj2);//false
            $( "#divTip").append(strTmp);
        })
    </script >

說明：當new Object()方法帶參數時，不是原始對象。

3.$.contain(container,contained)：兩個參數均爲dom對象，如果container對象包含contained對象則返回true，否則返回false。

五、URL操作

$.param(obj)：其中obj爲數組或者jquery對象，該方法將其序列化爲鍵值對。

<script type="text/javascript">
        $( 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; //結果：id=101&name=tao&sex=0
            strTmp += "<br><br><b>arrScore數組序列化後</b>：" ;
            strTmp += arrNewScore;//結果：Score%5Bchinese%5D=90&Score%5Bmaths%5D=100&Score%5Benglish%5D=98&SunNum%5BScore%5D=288&SunNum%5BNum%5D=3
            strTmp += "<br><br><b>arrScore序列化解碼後</b>：" ;
            strTmp += arrDecScore;//結果：Score[chinese]=90&Score[maths]=100&Score[english]=98&SunNum[Score]=288&SunNum[Num]=3
            //顯示在頁面中
            $( "#divTip").append(strTmp);
        })
    </script >

六、$.extend——擴展工具函數

擴展

; (function ($) {
            $.extend({
                "test": function (p1, p2) {
                    return p1 && p2;
                }
            })
        })(jQuery);

調用
$.test(true, true);

七、$.proxy——改變事件函數的作用域

兩種格式：
$.proxy(function,scope)：function爲指定的事件方法，scope爲事件函數設置作用域的對象。
$.proxy(scope,functionName)：scope爲函數的作用域對象，functionName爲函數名，它必須是scope對象的一個屬性。

<script type="text/javascript">
        $( function() {
            var objMyInfo = {
              name: "小張", //設置對象name屬性
                sex: "男", //設置對象sex屬性
                ShowEvent: function() { //設置執行的事件
                    $( "#divShow").html("姓名：" +
                     this.name + "<br><br>性別：" +
                     this.sex);
                }
            }
            $( "#Button1").bind("click" ,objMyInfo.ShowEvent);//結果：姓名:""，性別:undefined
            $( "#Button1").bind("click" ,$.proxy(objMyInfo, "ShowEvent")); //通過proxy函數綁定設置的事件。結果：姓名:小張,性別:男。
            $( "#Button1").bind("click" , $.proxy(objMyInfo.ShowEvent, objMyInfo));//通過proxy函數綁定設置的事件。結果：姓名:小張,性別:男。
        })
    </script >

八、實例——檢測對象類型

 

<!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>使用jQuery 擴展工具函數實現對字符串指定類型的檢測</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:11px}
           fieldset{width:410px}
           fieldset div{padding:8px}
           fieldset div select{font-size:9pt;padding:1px}
           #divTip{margin-top:10px;padding:10px;border:solid 1px #666;
           background-color:#eee;width:210px;display:none}
           .txt{border:#666 1px solid;padding:2px;width:120px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:60px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        /*------------------------------------------------------------/
        功能：返回檢測字符串指定類型的結果
        參數：checkType 爲檢測字符串的類型;strS 爲待檢測的字符串
        返回：一個bool值,true 表示是指定的類型，false 表示不是指定的字符類型
        示例：$.chkStrByType("陶國榮", "zh_cn");
        /------------------------------------------------------------*/
         ; (function($) {
             $.extend({
                 chkStrByType: function(strS, chkType) {
                     var result;
                     switch (chkType) {
                         case 'odd'://奇數型
                             var chkStr = arrRegExp['number'];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             if (true == result) {
                                 var num = parseInt(strS) % 2;
                                 if (1 == num) {
                                     result = true;
                                 } else {
                                     result = false;
                                 }
                             } else {
                                 result = false;
                             }
                             break;
                         case 'even'://偶數型
                             var chkStr = arrRegExp['number'];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             if (true == result) {
                                 var num = parseInt(strS) % 2;
                                 if (num == 0) {
                                     result = true;
                                 } else {
                                     result = false;
                                 }
                             } else {
                                 result = false;
                             }
                             break;
                         default://其它類型按正則表達式檢測
                             var chkStr = arrRegExp[chkType];
                             var reg = RegExp(chkStr, 'g');
                             var result = reg.test(strS);
                             break;
                     }
                     return result;
                 }
             });
             /*  正則驗證字符串表達式  */
             var arrRegExp = {};
             arrRegExp['email'] = '\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*';
             arrRegExp['telephone'] = '(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{7,8}';
             arrRegExp['mobile'] = '(86)*0*1[3,5]\\d{9}';
             arrRegExp['postcode'] = '^\\d{6}$';
             arrRegExp['number'] = '^-?[0-9]\\d*$';
             arrRegExp['zh_cn'] = '[\\u4e00-\\u9fa5]';
             arrRegExp['url'] = '[a-zA-z]+://[^\\s]*';
         })(jQuery);

         $(function() {
             $("#btnChkStr").click(function() {
                 //獲取待檢測的字符串與指定的類型
                 var $ChkStr = $("#txtChkStr").val();
                 var $ChkType = $("#selStrType").val();
                 //保存檢測後的結果值
                 var blnResult = $.chkStrByType($ChkStr, $ChkType);
                 //返回檢測後的結果
                 var strTmpShow = "";
                 var strTmpType = blnResult ? " 是 " : " 不是 ";
                 strTmpShow = $ChkStr + strTmpType;
                 strTmpShow = strTmpShow + $("select :selected").text();
                 strTmpShow = strTmpShow + " 類型";
                 //將返回後的結果顯示在頁面中
                 $("#divTip").show().html("").append(strTmpShow);
             });
         });
    </script>
</head>
<body>
   <fieldset><legend>指定類型檢測字符串</legend>
      <div>
       <span>檢測內容：</span><input id="txtChkStr" type="text" class="txt" />
       <span>選擇類型：</span>
       <select id="selStrType">
        <option value="email">郵箱</option>
        <option value="telephone">電話號碼</option>
        <option value="mobile">手機號碼</option>
        <option value="postcode">郵政編碼</option>
        <option value="number">整數</option>
        <option value="zh_cn">漢字</option>
        <option value="url">網址</option>
        <option value="odd">奇數</option>
        <option value="even">偶數</option>
       </select>
       <input id="btnChkStr" type="button" value="檢測" class="btn" />
       <div id="divTip"></div>
      </div>
   </fieldset>
</body>
</html>

出處:http://www.cnblogs.com/janes/p/3541429.html