JQuery之工具類函數

1、獲取瀏覽器的名稱與版本信息

在jQuery中，通過$.browser對象可以獲取瀏覽器的名稱和版本信息，如$.browser.chrome爲true，表示當前爲Chrome瀏覽器，$.browser.mozilla爲true，表示當前爲火狐瀏覽器，還可以通過$.browser.version方式獲取瀏覽器版本信息。已在jQuery1.9中被移除，因爲識別方法不準確。

例如，調用$.browser對象，獲取瀏覽器名稱並顯示在頁面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">獲取瀏覽器名稱和版本號</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var strTmp = "您的瀏覽器名稱是：";
                if ($.browser.chrome) { //谷歌瀏覽器
                    strTmp += "Chrome";
                }
                if ($.browser.mozilla) { //火狐相關瀏覽器
                    strTmp += "Mozilla FireFox";
                }
                strTmp += "<br /><br /> 版本號是：" //獲取版本號
                       +?;
                $(".content").html(strTmp);
            });
        </script>
    </body>

2、檢測瀏覽器是否屬於W3C盒子模型

瀏覽器的盒子模型分爲兩類，一類爲標準的w3c盒子模型，另一類爲IE盒子模型，兩者區別爲在Width和Height這兩個屬性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型則包含，而在jQuery 中，可以通過$.support.boxModel對象返回的值，檢測瀏覽器是否屬於標準的w3c盒子模型。

例如，根據頁面的特徵，並通過$.support.boxModel屬性的返回值，顯示當前瀏覽器是否屬於標準的w3c盒子模型，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">檢測是否是盒子模型</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var strTmp = "您打開的頁面是：";
                if ($.support.boxModel) { //是W3C盒子模型
                    strTmp += "W3C盒子模型";
                }
                else { //是IE盒子模型
                    strTmp += "IE盒子模型";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

3、檢測對象是否爲空
在jQuery中，可以調用名爲$.isEmptyObject的工具函數，檢測一個對象的內容是否爲空，如果爲空，則該函數返回true，否則，返回false值，調用格式如下：

$.isEmptyObject(obj);

其中，參數obj表示需要檢測的對象名稱。

例如，通過$.isEmptyObject()函數，檢測某個指定的對象是否爲空，並將結果顯示在頁面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">檢測對象是否爲空</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = { "姓名": "土豪一族" };
                var strTmp = "您定義了一個：";
                if ($.isEmptyObject(obj)) { //檢測是否爲空
                    strTmp += "空對象";
                }
                else {
                    strTmp += "非空對象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

4、檢測對象是否爲原始對象

調用名爲$.isPlainObject的工具函數，能檢測對象是否爲通過{}或new Object()關鍵字創建的原始對象，如果是，返回true，否則，返回false值，調用格式爲：

$.isPlainObject (obj);

其中，參數obj表示需要檢測的對象名稱。

例如，通過$.isPlainObject()函數，檢測某個指定的對象是否爲原始，並將結果顯示在頁面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">檢測對象是否爲原始對象</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var obj = "null";
                var strTmp = "您定義了一個：";
                if (?) { //檢測是否爲原始對象
                    strTmp += "原始對象";
                }
                else {
                    strTmp += "非原始對象";
                }
                $(".content").html(strTmp);
            });
        </script>
    </body>

5、檢測兩個節點的包含關係

調用名爲$.contains的工具函數，能檢測在一個DOM節點中是否包含另外一個DOM節點，如果包含，返回true，否則，返回false值，調用格式爲：

$.contains (container, contained);

參數container表示一個DOM對象節點元素，用於包含其他節點的容器，contained是另一個DOM對象節點元素，用於被其他容器所包含。

例如，通過$.contains()函數，檢測兩個節點對象間是否存在包含關係，並將檢測的結果顯示在頁面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">檢測兩個節點的包含關係</span> 
            </div>
            <div class="content"></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var node_a = document.body.firstChild;
                var node_b = document.body;
                var strTmp = "對象node_a";
                if (?) { //檢測是否包含節點
                    strTmp += " 包含 ";
                }
                else {
                    strTmp += " 不包含 ";
                }
                strTmp += "對象node_b";
                $(".content").html(strTmp);
            });
        </script>
    </body>

6、字符串操作函數

調用名爲$.trim的工具函數，能刪除字符串中左右兩邊的空格符，但該函數不能刪除字符串中間的空格，調用格式爲：

$.trim (str);

參數str表示需要刪除左右兩邊空格符的字符串。

例如，通過$.trim()函數，除掉一個兩邊均有空格符的字符串，並將其執行前後的字符長度都顯示在頁面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">字符串操作函數</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="計算" />
                </span>
            </div>
            <div class="content">
                <input id="txtName" name="txtName" type="text" />
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "內容：";
                    var strOld = $("#txtName").val();
                    var strNew =?;
                    strTmp += strOld;
                    strTmp += "<br/><br>除掉空格符前的長度："
                    strTmp += strOld.length;
                    strTmp += "<br/><br>除掉空格符後的長度："
                    strTmp += strNew.length;
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>

7、URL操作函數

調用名爲$. param的工具函數，能使對象或數組按照key/value格式進行序列化編碼，該編碼後的值常用於向服務端發送URL請求，調用格式爲：

$. param (obj);

參數obj表示需要進行序列化的對象，該對象也可以是一個數組，整個函數返回一個經過序列化編碼後的字符串。

例如，通過$.param()函數，對指定的對象進行序列化編碼，使其成爲可執行傳值的URL地址，並將該地址顯示在頁面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">URL操作函數</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                //基本信息對象
                var objInfo = new Object();
                objInfo.name = "白富美";
                objInfo.sex = 1;
                //序列化對象
                var objNewInfo =$.param(objInfo);
                //顯示序列化後的對象
                var strTmp = "<b>對象 白富美 序列化後</b>：<br/><br/>";
                strTmp += objNewInfo;
                //顯示在頁面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>

8、使用$.extend()擴展工具函數

調用名爲$. extend的工具函數，可以對原有的工具函數進行擴展，自定義類級別的jQuery插件，調用格式爲：

$. extend ({options});

參數options表示自定義插件的函數內容。

例如，調用$.extend()函數，自定義一個用於返回兩個數中最大值的插件，並在頁面中將插件返回的最大值顯示在頁面中，

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定義工具函數求兩值中最小值</span> 
                <span class="fr">
                    <input id="btnShow" name="btnShow" type="button" value="計算" />
                </span>
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            /*------------------------------------------------------------/
            功能：返回兩個數中最小值
            參數：數字p1,p2
            返回：最小值的一個數
            示例：$.MinNum(1,2);
            /------------------------------------------------------------*/
            (function ($) {
                $.extend({
                    "MinNum": function (p1, p2) {
                        return (p1 > p2) ? p2 : p1;
                    }
                });
            })(jQuery);
            $(function () {
                $("#btnShow").bind("click", function () {
                    $(".tip").html("");
                    var strTmp = "17與18中最小的數是：";
                    strTmp +=$.MinNum(17, 18);
                    //顯示在頁面中
                    $(".tip").show().append(strTmp);
                });
            });
        </script>
    </body>

9、使用$.extend()擴展Object對象

除使用$.extend擴展工具函數外，還可以擴展原有的Object對象，在擴展對象時，兩個對象將進行合併，當存在相同屬性名時，後者將覆蓋前者，調用格式爲：

$. extend (obj1,obj2,…objN);

參數obj1至objN表示需要合併的各個原有對象。

例如，調用$.extend()函數對兩個已有的對象進行合併，並將合併後的新對象元素內容顯示在頁面中，

 <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">合併原有對象</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "歡迎與我聯繫！" };
                var objNewInfo =$.extend(objInfo,objMess);
                var strTmp = "<b>對象 白富美 合併後</b>：<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //顯示在頁面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>

<!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>自定義focusColor插件</title>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <style>
            .fl{ 
                background:purple; 
                padding:5px; 
                color:white;
            }
            .content ul li span{ 
                padding-right:20px;
            }
            .content ul li{
               background:aquamarine; 
            }
        </style>
    </head>
    
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">自定義focusColor插件</span>
            </div>
            <div class="content">
                <ul id="test">
                    <li><span>橘子</span><span>水果</span></li>
                    <li><span>芹菜</span><span>蔬菜</span></li>
                    <li><span>香蕉</span><span>水果</span></li>
                </ul>
            </div>
        </div>
        
        
        <script type = "text/javascript">
            $(function(){
                $("#test li").each(function(index){
                    $(this).focusColor("gray");
                });
            });
            (function ($) {
                $.fn.extend({
                    "focusColor": function (newColor) {
                       var oldColor = $(this).css('background-color');
                       $(this).hover(
                           function(){
                               $(this).css('background-color',newColor)
                               
                           },
                           function(){
                               $(this).css('background-color',oldColor)
                               
                           }
                       );
                       return $(this);
                    }
                });
            })(jQuery);
            
            
            
        </script>
    </body>
</html>

最近在整理一些資源工具，放在網站分享 http://tools.maqway.com
歡迎關注公衆號：麻雀唯伊，不定時更新資源文章，生活優惠，或許有你想看的

JQuery之工具類函數

Window 安裝 Python 失敗 0x80070643，發生嚴重錯誤

《最新出爐》系列入門篇-Python+Playwright自動化測試-41-錄製視頻

Github與Git

Elastic Stack安裝入門

SSM配置redis

JQuery之UI插件

服務器請求端口轉發

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結