JQuery中的工具函數總結

前提引入

前提固然也是要引入Jquery啦。。。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

工具方法

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

在jQuery中，經過$.browser對象能夠獲取瀏覽器的名稱和版本信息，如$.browser.chrome爲true，表示當前爲Chrome瀏覽器，$.browser.mozilla爲true，表示當前爲火狐瀏覽器，還能夠經過$.browser.version方式獲取瀏覽器版本信息。

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

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

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

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

③檢測對象是否爲空

在jQuery中，能夠調用名爲$.isEmptyObject的工具函數，檢測一個對象的內容是否爲空，若是爲空，則該函數返回true，不然，返回false值，調用格式以下：

$.isEmptyObject(obj);

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

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

④檢測對象是否爲原始對象

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

$.isPlainObject (obj);

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

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

⑤檢測兩個節點的包含關係

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

$.contains (container, contained);

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

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

⑥字符串操做函數

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

$.trim (str);

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

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

⑦URL操做函數

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

$. param (obj);

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

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

序列化後：

備註：上一篇博文提到的$.serialize方法與這個方法有什麼區別呢？$.param方法是對任意的參數進行URL地址格式的轉換，而$.serialize方法僅屬於form提交的數據轉換。

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

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

$. extend ({options});

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

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

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

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

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

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

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

結果：

從圖中能夠看出，當兩個對象經過$.extend()函數擴展合併後，返回一個包含兩個對象中所有屬性元素的新對象，相同名稱的「name」屬性，前者被後者覆蓋。

好啦。還有Jquery插件總結改天再寫啦~~~~

歡迎關注個人我的微信訂閱號：前端生活