jQuery工具函式

2022-05-17 17:50:02 字數 3960 閱讀 8315

要點:

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

//$.each()遍歷物件

$.each($.ajax(), function (name, fn) )

注意:$.each()中 index 表示陣列元素的編號,預設從 0 開始。

//for與for in遍歷:

for (var i = 0; i < arr.length; i++)

for (var i in arr)

//$.grep()資料篩選

var arr = [5,2,9,4,11,57,89,1,23,8];

var arrgrep = $.grep(arr, function (element, index) );

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)

});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 元素

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 位址操作,在之前的 ajax 章節其實已經講到過。只有乙個方法:$.param(),將對

象的鍵值對轉化為 url 鍵值對字串形式。

//$.param()將物件鍵值對轉換為 url 字串鍵值對

var obj = ;

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

注意:由於 jquery 越來越放棄低端的瀏覽器,所以檢測功能在未來使用頻率也越來越

低。所以,$.brower 已被廢棄刪除,而$.support.boxmodel 檢測 w3c 或 ie 盒子也被刪除。

並且 官網也不提供屬性列表和解釋,給出乙個 modernizr

第三方小工具來輔組檢測。

六.其他操作

jquery 提供了乙個預備繫結函式上下文的工具函式:$.proxy()。這個方法,可以解決諸

如外部事件觸發呼叫物件方法時 this 的指向問題。

//$.proxy()調整 this 指向

var obj =

};$('#box').click(obj.test); //指向的 this 為#box 元素

$('#box').click($.proxy(obj, 'test')); //指向的 this 為方法屬於物件 box

jQuery 工具函式

一 字串操作 trim string 去除左右空格 二 陣列和物件操作 each 遍歷陣列 var arr 張三 李四 王五 馬六 each arr,function index,value alert arrgrep map 修改資料 var arr 5,2,9,4,11,57,89,1,23,8...

jquery工具類函式

檢測物件是否為空 isemptyobject obj 檢測物件是否為原始物件 isplainobject obj 檢測兩個節點的包含關係 contains container,contained 字串操作函式 trim str url操作函式 param obj param和serialize的區別...

jQuery 工具類函式

1.獲取瀏覽器的名稱與版本資訊 browser物件可以獲取瀏覽器的名稱和版本資訊 browser.chrome為true,表示當前為chrome瀏覽器 browser.mozilla為true,表示當前為火狐瀏覽器 browser.version 獲取瀏覽器版本資訊。2.檢測瀏覽器是否屬於w3c盒子...