學習要點：

• 1.字符串操作
• 2.數組和對象操作
• 3.測試操作
• 4.URL 操作
• 5.瀏覽器檢測
• 6.其他操作

工具函數是指直接依附於 jQuery 對象，針對 jQuery 對象本身定義的方法，即全局性的函數。它的作用主要是提供比如字符串、數組、對象等操作方面的遍歷。

一．字符串操作

在 jQuery 中，字符串的工具函數只有一個，就是去除字符串左右空格的工具函數：$.trim()。

//$.trim()去掉字符串兩邊空格
var str = ‘ jQuery ‘;
alert(str);
alert($.trim(str));

二．數組和對象操作

jQuery 為處理數組和對象提供了一些工具函數，這些函數可以便利的給數組或對象進行遍歷、篩選、搜索等操作。

//$.each()遍歷數組
var arr = [‘張三‘, ‘李四‘, ‘王五‘, ‘馬六‘];
$.each(arr, function (index, value) {
　　$(‘#box‘).html($(‘#box‘).html() + index + ‘.‘ + value + ‘<br />‘);
});

//$.each()遍歷對象
$.each($.ajax(), function (name, fn) {
　　$(‘#box‘).html($(‘#box‘).html() + name + ‘.‘ + ‘<br /><br />‘);
})
//註意：$.each()中 index 表示數組元素的編號，默認從 0 開始。
 


//$.grep()數據篩選
var arr = [5,2,9,4,11,57,89,1,23,8];
var arrGrep = $.grep(arr, function (element, index) {
　　return element < 6 && index < 5;
});
alert(arrGrep);

//註意：$.grep()方法的 index 是從 0 開始計算的。
//$.map()修改數據
var arr = [5,2,9,4,11,57,89,1,23,8];
var arrMap = $.map(arr, function (element, index) {
　　
 
if (element < 6 && index < 5) {
　　　　return element + 1;
　　}
});
alert(arrMap);

//$.inArray()獲取查找到元素的下標
var arr = [5,2,9,4,11,57,89,1,23,8];
var arrInArray = $.inArray(1, arr);
alert(arrInArray);
//註意：$.inArray()的下標從 0 開始計算。

//$.merge()合並兩個數組
var arr = [5,2,9,4,11,57,89,1,23,8];
var arr2 = [23,2,89,3,6,7];
alert($.merge(arr, arr2));

//$.unique()刪除重復的 DOM 元素
<div></div>
<div></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
var divs = $(‘div‘).get();
divs = divs.concat($(‘.box‘).get());
alert($(divs).size());
$.unique(divs);
alert($(divs).size());

//.toArray()合並多個 DOM 元素組成數組
alert($(‘li‘).toArray());

三．測試操作

在 jQuery 中，數據有著各種類型和狀態。有時，我們希望能通過判斷數據的類型和狀態做相應的操作。jQuery 提供了五組測試用的工具函數。

//判斷是否為數組對象
var arr = [1,2,3];
alert($.isArray(arr));

//判斷是否為函數
var fn = function () {};
alert($.isFunction(fn));

//判斷是否為空對象
var obj = {}
alert($.isEmptyObject(obj));

//判斷是否由{}或 new Object()創造出的對象
var obj = window;
alert($.isPlainObject(obj));
//註意：如果使用 new Object(‘name‘);傳遞參數後，返回類型已不是Object，而是字符串，所以就不是純粹的原始對象了。


//判斷第一個 DOM 節點是否含有第二個 DOM 節點
alert($.contains($(‘#box‘).get(0), $(‘#pox‘).get(0)));

//$.type()檢測數據類型
alert($.type(window));

//$.isNumeric 檢測數據是否為數值
alert($.isNumeric(5.25));
//$.isWindow 檢測數據對象是否為 window 對象
alert($.isWindow(window));

四．URL 操作

URL 地址操作，只有一個方法：$.param()，將對象的鍵值對轉化為 URL 鍵值對字符串形式。

//$.param()將對象鍵值對轉換為 URL 字符串鍵值對
var obj = {
　　name : ‘Lee‘,
　　age : 100
};
alert($.param(obj));

五．瀏覽器檢測

由於在早期的瀏覽器中，分 IE 和 W3C 瀏覽器。而 IE678 使用的覆蓋率還很高，所以，早期的 jQuery 提供了$.browser 工具對象。而現在的 jQuery 已經廢棄刪除了這個工具對象，如果還想使用這個對象來獲取瀏覽器版本型號的信息，可以使用兼容插件。

//獲取火狐瀏覽器和版本號
alert($.browser.mozilla + ‘:‘ + $.browser.version);

註意：火狐采用的是 mozilla 引擎，一般就是指火狐；而谷歌 Chrome 采用的引擎是webkit，一般驗證 Chrome 就用 webkit。

還有一種瀏覽器檢測，是對瀏覽器內容的檢測。比如：W3C 的透明度為 opacity，而 IE的透明度為 alpha。這個對象是$.support。

//$.support.ajax 判斷是否能創建 ajax
alert($.support.ajax);
//$.support.opacity 設置不同瀏覽器的透明度
if ($.support.opacity == true) {
　　$(‘#box‘).css(‘opacity‘, ‘0.5‘);
} else {
　　$(‘#box‘).css(‘filter‘, ‘alpha(opacity=50)‘);
}

註意：由於 jQuery 越來越放棄低端的瀏覽器，所以檢測功能在未來使用頻率也越來越低。所以，$.brower 已被廢棄刪除，而$.support.boxModel 檢測 W3C 或 IE 盒子也被刪除。

六．其他操作

jQuery 提供了一個預備綁定函數上下文的工具函數：$.proxy()。這個方法，可以解決諸如外部事件觸發調用對象方法時 this 的指向問題。

//$.proxy()調整 this 指向
var obj = {
　　name : ‘Lee‘,
　　test : function () {
　　　　alert(this.name);
　　}
};
$(‘#box‘).click(obj.test); //指向的 this 為#box 元素
$(‘#box‘).click($.proxy(obj, ‘test‘)); //指向的 this 為方法屬於對象 box

Jquery14 工具函數