ch.6 jQuery utility functions

這章會介紹除了操作elements外的utility functions

6.1 Using the jQuery flags

這節要介紹三個jQuery flags
$.browser
$.boxModel
$.styleFloat

6.1.1 Detecting the user agent
(jQuery1.3已經不建議使用$.browser，而有新增一個新的物件$.support)

檢測使用者所用的瀏覽器
一開始是先介紹使用判斷method的方法

if (element.attachEvent) {
  element.attachEvent('onclick',someHandler);
}
else if (element.addEventListener) {
  element.addEventListener('click',someHandler);
}
else {
  throw new Error('event handling not supported');
}

而這個可能發生的問題是 method可以使用
但是裡面帶的參數因為不同的瀏覽器而有不同的意義
所以jQuery提供了一個辨識瀏覽器的方法

$.browser
if($.browser.msie){
	alert('這是IE瀏覽器');
}

會有下面幾個值
$.browser.msie
$.browser.mozilla
$.browser.safari
$.browser.opera
$.browser.version
前面四個返回的是boolean值
是將瀏覽器歸類到四大類
如果為該類即返回true
其餘會是false
而有些瀏覽器因為版本不同 也可能會有差異 所以$.browser.version是使用的版本

建議是method方法也無法判別了才使用$.browser

6.1.2 Determining the box model
(jQuery1.3已經不建議使用$.boxModel，而有新增一個新的物件$.support)
$.boxModel

$.boxModel返回一個boolean值
當是使用W3C standard box model時返回true
而使用IE box model(或是說traditional box model)時返回false
這個需要用到的時機
書中提到的是關於width跟height的解釋
使用W3C standard box model時
計算width跟height不會包含padding跟border的pixels
而IE box model則會包含
所以可能會造成elements的大小在不同瀏覽器看起來會不太一樣

6.1.3 Detecting the correct float style to use
$.styleFloat

在不同的瀏覽器對於float有不同的名字
在IE是styleFloat 其他的則是cssFloat
所以使用$.styleFloat就不用擔心這個問題了

element.style[$.styleFloat] = 'left';

不過通常使用css(‘float’)就可以了
$.styleFloat主要是給plugins或是extensions製作的人使用

6.2 Using other libraries with jQuery
$.noConflict()

在Ch1有稍微提到
如果在同個頁面上要使用其他的javascript library
可以使用$.noConflict()來避免衝突

var $j = jQuery.noConflict();

這樣就可以使用$j來代替jQuery或是$了

或是可以使用下面這樣

//要注意有帶參數$喔
(function($) { /* function body here */ })(jQuery);
//或是下面這個ready function
jQuery(function($){alert('$ = '+ $);});

在裡面就還是可以使用$來操作囉

6.3 Manipulating JavaScript objects and collections
6.3.1 Trimming strings
$.trim(value)
$('#someField').val($.trim($('#someField').val()));

就像PHP中trim()的函式
將字串前後的空白都消除掉
在表單驗證中很常用到

6.3.2 Iterating through properties and collections
$.each(container,callback)

對一個array或object中的值依序作處理

var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
  //do something here
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
  //do something here
});

container是要處理的array或是object
callback是作處理的function
這個function會有兩個參數 第一個是index 第二個是value

6.3.3 Filtering arrays
$.grep(array,callback,invert)

以某個條件過濾一個array以生成另一個新的array 

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var newarr = $.grep(arr, function(n, i){
					      return (n > 5);
					    });
//新生成的newarr會是 [9, 8, 6, 9, 7, 8, 6, 9]

第一個參數array很明顯的就是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index
第三個參數invert是個boolean值
如果省略invert或是填寫false時 當callback返回值為true的話 就會將這個值放進新生成的array中
如果invert填入true 則當callback返回值為false才會將這個值放進新生成的array中

var bigNumbers = $.grep(originalArray,'a>100');
//這時jQuery會自己建立一個function
function(a,i){return a>100;}
//而a就是value ,i就是index

如上所示 callback也可以簡寫為一個string

6.3.4 Translating arrays
$.map(array,callback)

對一個array作處理並生成為一個新array
第一個參數array是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index

//將array中的每個值都+1
var oneBased = $.map([0,1,2,3,4],function(value){return value+1;});
//callback如同$.grep()一樣 也是可以寫成一個string
var oneBased = $.map([0,1,2,3,4],'a+1');

而有一點要注意的是
如果callback返回值為null或是undefined
則這個值就不會被放進新array中
所以新的array元素個數是有可能比原本的array少

var characters = $.map(
  ['that','other thing'],
  function(value){return value.split('');}
);
//characters會是['t','h','a','t','o','t','h','e','r',' ','t','h','i','n','g']

如上所示 另一個可以提的是
如果callback處理值完之後 回傳的是一個array
則會將這些所有回傳的array都和在同一個新的array中

6.3.5 More fun with JavaScript arrays
$.inArray(value,array)

判斷一個array中有沒有某個值

var index = $.inArray(2,[1,2,3,4,5]);
//會返回1

第一個參數value是要判斷的值
當第二個參數array中遇到第一個值為value的時候 會返回其index
找不到的時候則會返回-1

$.makeArray(object)
var images = document.getElementsByTagName("img");
//這樣是一個NodeList

將一個array-like object(像是一個NodeList)轉換成array

$.unique(array)

將array中相同的值剔除掉

6.3.6 Extending objects
$.extend(target,source1,source2, … sourceN)

將數個object合併
下面是一個簡單的例子

var target =  { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$.extend(target,source1,source2);

如果沒有返回給一個新的object
則是會合併在第一個參數target
而這個例子中 target會變為{a: 1, b: 2, c: 4, d: 5, e: 7, f: 8, g: 9}
有一點要注意的是
如果objects中有相同的property 則後面的object的會蓋過前面的
(這個例子就是source1的c:4會蓋過target的c:4，source2的e:7會蓋過source1的e:6)

6.4 Dynamically loading scripts
$.getScript(url,callback)

依據條件或是情況下再讀取其他的外部script 而不是在頁面load時就讀取script
第一個參數url是要讀取的script的路徑
第二個參數是讀取script完成後會執行的function