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之工具类函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 考研语法？看这篇就够了 #考研英语语法#
- 下一篇： 微型计算机原理和接口技术试卷,2017-