20151212jquery學習筆記--工具函式

破玉發表於2015-12-12

工具函式是指直接依附於 jQuery 物件,針對 jQuery 物件本身定義的方法,即全域性性 的函式。它的作用主要是提供比如字串、陣列、物件等操作方面的遍歷。

一.字串操作 

在 jQuery 中,字串的工具函式只有一個,就是去除字串左右空格的工具函式: $.trim()。 

//$.trim()去掉字串兩邊空格 

varstr='   jQuery    ';  
alert(str); 
alert($.trim(str));

二.陣列和物件操作

jQuery 為處理陣列和物件提供了一些工具函式,這些函式可以便利的給陣列或物件進行 遍歷、篩選、搜尋等操作。

//$.each()遍歷陣列 

vararr=['張三', '李四','王五', '馬六']; 
$.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()資料篩選 

vararr=[5,2,9,4,11,57,89,1,23,8];
vararrGrep=$.grep(arr,function(element,index){ 
returnelement<6&&index<5;
 });
 alert(arrGrep);

  

注意:$.grep()方法的 index 是從 0 開始計算的。

//$.map()修改資料

vararr=[5,2,9,4,11,57,89,1,23,8]; 
vararrMap =$.map(arr,function(element,index){
 if(element<6&&index<5){
 returnelement+1; 
} 
}); 
alert(arrMap);

  //$.inArray()獲取查詢到元素的下標 

vararr=[5,2,9,4,11,57,89,1,23,8];
 vararrInArray=$.inArray(1,arr); 
alert(arrInArray);

  

注意:$.inArray()的下標從 0 開始計算。

//$.merge()合併兩個陣列 

vararr=[5,2,9,4,11,57,89,1,23,8]; 
vararr2=[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>

  

vardivs=$('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));
//判斷是否由{}或 newObject()創造出的物件
 var obj=window;
 alert($.isPlainObject(obj));

  

注意:如果使用 newObject('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={ 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 盒子也被刪除。 並且 http://api.jquery.com/jQuery.support/官網也不提供屬性列表和解釋,給出一個 Modernizr 第三方小工具來輔組檢測。

六.其他操作 

jQuery 提供了一個預備繫結函式上下文的工具函式:$.proxy()。這個方法,可以解決諸 如外部事件觸發呼叫物件方法時 this 的指向問題。 

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

  

 

相關文章