jQuery基礎之七 -- 工具函數

瀏覽器及特性檢測

$.support

$.support主要包括以下測試:
boxModel:  如果這個頁面和瀏覽器是以W3C CSS盒式模型來渲染的,則等於true。通常在IE 6和IE 7的怪癖模式中這個值是false。在document準備就緒前,這個值是null。 
cssFloat:   如果用cssFloat來訪問CSS的float的值,則返回true。目前在IE中會返回false,他用styleFloat代替。
hrefNormalized:   如果瀏覽器從getAttribute("href")返回的是原封不動的結果,則返回true。在IE中會返回false,因爲他的URLs已經常規化了。 
htmlSerialize:       如果瀏覽器通過innerHTML插入鏈接元素的時候會序列化這些鏈接,則返回true,目前IE中返回false。
leadingWhitespace:  如果在使用innerHTML的時候瀏覽器會保持前導空白字符,則返回true,目前在IE 6-8中返回false。
noCloneEvent:            如果瀏覽器在克隆元素的時候不會連同事件處理函數一起復制,則返回true,目前在IE中返回false。
objectAll:     如果在某個元素對象上執行getElementsByTagName("*")會返回所有子孫元素,則爲true,目前在IE 7中爲false。
opacity:        如果瀏覽器能適當解釋透明度樣式屬性,則返回true,目前在IE中返回false,因爲他用alpha濾鏡代替。
scriptEval:  使用 appendChild/createTextNode 方法插入腳本代碼時,瀏覽器是否執行腳本,目前在IE中返回false,IE使用 .text 方法插入腳本代碼以執行。
style:            如果getAttribute("style")返回元素的行內樣式,則爲true。目前IE中爲false,因爲他用cssText代替。
tbody:          如果瀏覽器允許table元素不包含tbody元素,則返回true。目前在IE中會返回false,他會自動插入缺失的tbody。

例如: jQuery.support.boxModel  //檢測瀏覽器是否支持盒式模型
 $.browser
可用值: safari, opera, msie, mozilla 此屬性在 DOM 樹加載完成前即有效,可用於爲特定瀏覽器設置 ready 事件
$.browser.msie   //在 Microsoft's Internet Explorer 瀏覽器中返回 true。
if ($.browser.safari) {alert("this is safari!");}   //僅在 Safari 中提示 "this is safari!" 。
 $.browser.version 
if ( $.browser.msie )  alert( $.browser.version );    //顯示當前 IE 瀏覽器版本號。

$.boxModel

當前頁面中瀏覽器是否使用標準盒模型渲染頁面。 建議使用 jQuery.support.boxModel 代替,在 Internet Explorer 怪癖模式(QuirksMode)中返回 False。
數組和對象操作

$.each(object, [callback])

通用例遍方法,可用於例遍對象和數組。不同於例遍 jQuery 對象的 $().each() 方法,此方法可用於例遍任何對象。回調函數擁有兩個參數:第一個爲對象的成員或數組的索引,第二個爲對應變量或內容。如果需要退出 each 循環可使回調函數返回 false,其它返回值將被忽略。
$.each( [0,1,2], function(i, n){
	alert( "Item #" + i + ": " + n );
});

$.each( { name: "John", lang: "JS" }, function(i, n){
	alert( "Name: " + i + ", Value: " + n );
});

$.extend([deep], target, object1, [objectN])

用一個或多個其他對象來擴展一個對象,返回被擴展的對象。如果不指定target,則給jQuery命名空間本身進行擴展。這有助於插件作者爲jQuery增加新方法。
如果第一個參數設置爲true,則jQuery返回一個深層次的副本,遞歸地複製找到的任何對象。否則的話,副本會與原對象共享結構。
未定義的屬性將不會被複制,然而從對象的原型繼承的屬性將會被複制。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);   //合併 settings 和 options,修改並返回settings, { validate: true, limit: 5, name: "bar" }

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options); //合併 defaults 和 options, 不修改 defaults。

結果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

$.grep(array, callback, [invert])

使用過濾函數過濾數組元素。此函數至少傳遞兩個參數:待過濾數組和過濾函數。過濾函數必須返回 true 以保留元素或 false 以刪除元素。
如果 "invert" 爲 false 或爲設置,則函數返回數組中由過濾函數返回 true 的元素,當"invert" 爲 true,則返回過濾函數中返回 false 的元素集。
$.grep( [0,1,2], function(n,i){
   return n > 0;
});   //過濾數組中小於 0 的元素。 [1, 2]

$.grep( [0,1,2], function(n,i){
   return n > 0;
}, true);  //排除數組中大於 0 的元素,使用第三個參數進行排除。[0]

$.makeArray(obj)

將類數組對象轉換爲數組對象。
var arr = $.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用數組翻轉函數
$.map(array, callback)
將一個數組中的元素轉換到另一個數組中。
$.map( [0,1,2], function(n){
     return n + 4;
});  //將原數組中每個元素加 4 轉換爲一個新數組。 [4, 5, 6]

$.map( [0,1,2], function(n){
     return n > 0 ? n + 1 : null;  
});   //原數組中大於 0 的元素加 1 ,否則刪除。[2, 3]

$.map( [0,1,2], function(n){
     return [ n, n + 1 ];
});  //原數組中每個元素擴展爲一個包含其本身和其值加 1 的數組,並轉換爲一個新數組。[0, 1, 1, 2, 2, 3]

$.inArray(value, array)

確定第一個參數在數組中的位置,從0開始計數(如果沒有找到則返回 -1 )。
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);    //3
jQuery.inArray(4, arr);     //0
jQuery.inArray("David", arr);    //-1

$.toArray()

把jQuery集合中所有DOM元素恢復成一個數組。
alert($('li').toArray());   //得到所有li的元素數組

$.merge(first, second)

合併兩個數組,返回的結果會修改第一個數組的內容——第一個數組的元素後面跟着第二個數組的元素。要去除重複項,請使用$.unique()
$.merge( [0,1,2], [2,3,4] ) //合併兩個數組到第一個數組上。[0,1,2,2,3,4]
$.unique(array)
刪除數組中重複元素。只處理刪除DOM元素數組,而不能處理字符串或者數字數組。
$.unique(document.getElementsByTagName("div"));   //刪除重複 div 標籤。
$.parseJSON(json)

接受一個JSON字符串,返回解析後的對象。傳入一個畸形的JSON字符串會拋出一個異常。比如下面的都是畸形的JSON字符串:
{test: 1} ( test 沒有包圍雙引號)
{'test': 1} (使用了單引號而不是雙引號)
另外,如果你什麼都不傳入,或者一個空字符串、null或undefined,parseJSON都會返回 null 。
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );   //解析一個JSON字符串

函數操作

$.noop  一個空函數

$.proxy(function, scope)  返回一個新函數,並且這個函數始終保持了特定的作用域

var obj = {
	name: "John",
	test: function() {
	alert( this.name );
		$("#test").unbind("click", obj.test);
	}
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代碼跟上面那句是等價的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以與單獨執行下面這句做個比較。
// $("#test").click( obj.test );
測試操作

$.contains(container, contained)

一個DOM節點是否包含另一個DOM節點,container 作爲容器,可以包含其他元素,contained 可能被其他元素所包含
檢測一個元素是否包含另一個元素
$.contains(document.documentElement, document.body);   // true
$.contains(document.body, document.documentElement);   // false

$.isArray(obj)  用於測試對象是否爲數組

$.isFunction(obj)  用於測試對象是否爲函數

$.isEmptyObject(obj)  測試是否爲空對

$.isEmptyObject({}) // true 
$.isEmptyObject({ foo: "bar" }) // false

$.isPlainObject(obj)   用於測試是否爲純粹的對象

$.isPlainObject({}) // true
$.isPlainObject("test") // false

字符串操作

$.trim(str)

去掉字符串起始和結尾的空格。
$.trim(" hello, how are you? ");       //"hello, how are you?"

URL

$.param(obj, [traditional])

將表單元素數組或者對象序列化。是.serialize()的核心方法。
obj   數組或jQuery對象會按照name/value對進行序列化,普通對象按照key/value對進行序列化。
traditional  是否使用傳統的方式淺層序列化。

var params = { width:1680, height:1050 };
var str = $.param(params);      //按照key/value對序列化普通對象。
$("#results").text(str);       //width=1680&height=1050

對比兩種序列化方式
var myObject = {
	a: {
		one: 1, 
		two: 2, 
		three: 3
	}, 
	b: [1,2,3]
	};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);  //a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
alert(recursiveDecoded);  //a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=

var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);   //a=%5Bobject+Object%5D&b=1&b=2&b=3
alert(shallowDecoded);   //a=[object+Object]&b=1&b=2&b=3

插件編寫

$.error(message)

接受一個字符串,並且直接拋出一個包含這個字符串的異常。
$.error = console.error;     //重載jQuery.error,以便可以在Firebug裏顯示
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章