Notes on <jQuery in Action> - 3

Chapter 5: Energizing pages with animations and effects

5.1 顯示與隱藏元素

首先解釋下這裡的“隱藏”的含義，在HTML標籤的樣式的屬性中有個display，意為顯示，它通常有三個值：none、block或者inline。當一個元素的display被賦值為none時，它將被瀏覽器的佈局管理器（layout manager）忽略，於是視覺上它變為不可見，但是在HTML代碼標記中，它仍然存在，於是在DOM樹中也仍然存在；所以它仍然會被Javascript的操作DOM對象的函數獲取，進而被jQuery的選擇器獲取到。

在jQuery中，所有的令到一個元素隱藏的功能都是將其display屬性設定為none；而顯示則是將一個元素的display由none變回原來的默認值，對於DIV這樣的區塊元素就是block，對於SPAN這樣的則是inline。

5.2 緩動元素的顯示狀態

首先登場的是show()，hide()與toggle()函數，在沒有參數的情況下，它們將元素瞬間隱藏或者顯示，就是“突然一下”出現或者不見。

在有參數的情況下，它們會將元素同時在尺寸和透明度上逐漸變化，以致最終出現或者消失。

	Parameters	Returns
hide(speed,callback)	speed  (Number|String) Optionally specifies the duration of the effect as a number of milliseconds or as one of the predefined strings: "slow", "normal", or "fast". If omitted, no animation takes place, and the elements are immediately removed from the display. callback  (Function) An optional function invoked when the animation completes. No parameters are passed to this function, but the function context (this) is set to the element that was animated. The callback is fired for each element that undergoes animation.	The wrapped set.
show(speed,callback)
toggle(speed,callback)
toggle(condition)

現在隆重介紹本章的一個重要試驗程序：jQuery Effect Lab

這個實驗在IE8.0，Firefox，Chrome與AIR-HTMLLoader裏面都正常運行！！！

fadeIn()與fadeOut()則是專用來緩動元素的透明度的：

	Parameters	Returns
fadeIn(speed,callback)
fadeOut(speed,callback)

在介紹fadeTo()之前，需要強調一點就是，show()，hide()與toggle()函數在修改元素的透明度時，始終會記住該元素的初始透明度值作為起點或者終點，如果該元素的透明度值有在HTML內明確聲明，那麼即為這個值，否則就是默認值100。

	Parameters	Returns
fadeTo(speed,opacity,callback)

另外還有一組貌似不是太常用到的效果，將元素拉起來和降下來：

	Parameters	Returns
slideDown(speed,callback)
slideUp(speed,callback)
slideToggle(speed,callback)

最後介紹一個不常見的函數：stop()，這個函數過於神秘還有不常用，以至於我現在不想多說。

	Parameters	Returns
stop(clearQueue,gotoEnd)

5.3 定制緩動

jQuery里用animate()來制定元素的緩動動畫

	Parameters	Returns
animate(properties,duration,easing,callback)	properties  (Object) An object hash that specifies the values that supported CSS styles should reach at the end of the animation. The animation takes place by adjusting the values of the style properties from the current value for an element to the value specified in this object hash. (Be sure to use camel case when specifying multiword properties.)  duration  (Number|String) Optionally specifies the duration of the effect as a number of milliseconds or as one of the predefined strings: "slow", "normal", or "fast". If omitted or specified as 0, no animation takes place and the elements’ specified properties are immediately, and synchronously, set to the target values. easing  (String) The optional name of a function to perform easing of the animation. Easing functions must be registered by name and are often provided by plugins. Core jQuery supplies two easing functions registered as "linear" and "swing". (See chapter 9 for the list of easing functions provided by jQuery UI.) callback  (Function) An optional function invoked when the animation completes. No parameters are passed to this function, but the function context (this) is set to the element that was animated. This callback is fired individually for each animated element.
animate(properties,options)	options  (Object) Specifies the animation parameter values using an object hash. The supported properties are as follows: - duration—See previous description of duration parameter. - easing—See previous description of easing parameter. - complete—Function invoked when the animation completes. - queue—If false, the animation isn’t queued and begins running immediately. - step—A callback function called at each step of the animation. This callback is passed the step index and an internal effects object (that doesn’t contain much of interest to us as page authors). The function context is set to the element under animation.

屬性的目標值可以是個絕對值，也可以是個以“+=”或“-=”開頭的相對值，通常能夠用這個函數來緩動的屬性應該是那些可以量化的屬性，比如寬高和位置，默認情況它們的單位是px，但你也可以指定用em或者%。easing指的是緩動公式，這裡和Actionscript的Tweening Engine是一樣的。

在該函數的第二種形式里，options可以支持的選項中，queue的意思是是否將這個動畫加入序列中排隊執行，還是讓它與其他動畫同時進行。下面這個示例是展示本節中三個自定緩動動畫的頁面，在四個瀏覽器內都測試沒有問題。

5.4 動畫與隊列

首先，animate()函數的運作是異步的，意思就是說，它後面的代碼並不會等它創建的動畫執行完之後才運行，而是直接運行，這跟Actionscript是一模一樣的。但是，它的另外一個方面與Actionscript是不同的，作者通過這個示例來解釋這個問題：

其實通過animate()創建的動畫會被jQuery加入一個隊列中（jQuery自己內部會給每個被創建動畫的元素建立一個名為fx的屬性，它就是這樣一個隊列），然後順序地，就是說一個一個地執行它們。

在jQuery里，隊列這個概念被進一步推廣，並不僅限於創建動畫。有更為通用的做法可以用來建立一個函數隊列，讓這些函數順序地被執行。jQuery可以為任何一個元素建立一個隊列，作為其屬性，它的名字由你自己來定，於是需要queue()函數：

	Parameters	Returns
queue(name)
queue(name,function)
queue(name,queue)

與這個操作相關的還有另外幾個函數，暫時我不打算細緻討論這部份：

	Parameters	Returns
dequeue(name)
clearQueue(name)
delay(duration,name)

Chapter 6: Beyond the DOM with jQuery utility functions

6.1 使用jQuery的標記

jQuery有三個全局的變量：

$.fx.off

$.support

$.browser

$.fx.off與動畫有關，它用來設定創建動畫的函數在執行后，元素是否用動畫的形式被逐漸修改顯示狀態，直至最後隱藏或顯現。而另外兩個，存放著關於瀏覽器的各種信息，比如版本和它支持的功能，你可以直接使用這些信息，用它們來判斷你的某一些操作是要如何執行。簡單講你不需要自己寫代碼來判斷瀏覽器版本什麽的了。

6.2 將jQuery同其它類庫一起使用

假如要將jQuery與其他Js庫一同使用，需要首先調用jQuery的noConflict()函數。下面的部份比較有趣，可以用來探尋Javascript的一些特性。

只是調用noConflict()函數並不夠，在所有你將要使用$的地方，都要換成jQuery，這才是它的本名，$只是jQuery的簡化版的異名。但是，你可以自己定義一個異名給jQuery，雖然這看起來不是那麼有必要：

var $yourAliaName = jQuery;

下面有一種方法被創建jQuery插件的人們所熱衷，因為他們並不能夠假定使用這些插件的人總是會呼叫noConflict()。所以他們需要自己確保在他們所定義的函數里，$是指向jQuery的異名。這個方法的格式是這樣的：

(function($) { /* function body here */ })(jQuery);

簡單來講，這句表達式做的事情是定義一個函數，然後執行這個函數并把jQuery作為參數傳遞給它；而在函數的定義中它將$作為傳進來的實際參數的本地化名稱，即形式名稱，於是在這個函數的作用域內，$都將是jQuery的異名，即是說兩者指向同一個函數對象。

而有些時候，有些插件需要在jQuery.ready()里執行一些動作，這同樣面臨著不知道使用者是否會調用noConflict()函數的情況，所以解決辦法是：

jQuery(
	function($) {
		alert("I'm ready!");
	}
);

jQuery有一個習慣，就是往ready事件的處理函數傳遞一個它自身的引用，所以在跟jQuery註冊ready事件的處理函數時，將$作為形式參數名，將會導致在這個處理函數的作用域里，$是指向jQuery本身的。

提醒回顧：jQuery()這個構造函數本身的一個形式就是註冊一個ready事件的處理函數，它的簡化版本是$()，這是第一章的內容。

6.3 處理Javascript的對象與集合

這一節應該算是這一章的核心，因為這一章的名字是說出了DOM操作以外的，也就是jQuery提供的處理一般數據的方法。不過主要的話題都是關於數組和對象，也就是複合型數據的一些輔助函數。我先把函數羅列處理，暫不做過多描述。

字符串：

	Parameters	Returns
$.trim(value)

數組，這些方法的思路有點像PHP：

	Parameters	Returns
$.each(container,callback)		The container object.
$.grep(array,callback,invert)
$.map(array,callback)
$.inArray(value,array)
$.makeArray(object)
$.unique(array)
$.merge(array1,array2)

對象：

	Parameters	Returns
$.each(container,callback)
$.extend(deep,target,source1,source2, ... sourceN)
$.isArray(o)
$.isEmptyObject(o)
$.isFunction(o)
$.isPlainObject(o)
$.isXMLDoc(node)

參數：

	Parameters	Returns
$.param(params,traditional)

6.4 其它一些雜七雜八的輔助函數

什麽都不做的函數：

$.noop()

檢測包含關係：

$.contains()是個很有用的函數，它可以用來判斷DOM中的兩個元素是否是父子關係：

	Parameters	Returns
$.contains(container,containee)

操作自定義數據：

除了之前的第三章提到的方法，jQuery還提供了全局函數來做這個事情：

$.data(element,name,value)
$.removeData(element,name)

預先綁定一個函數的上下文：

其實這裡的上下文（context）指的是在函數內通過this將得到的對象。jQuery提供了一個方法，是開發者可以在無法使用Function.call()的情況下仍能設定一個函數運行時的上下文。

$.proxy(function,proxy)
$.proxy(proxy,property)

這套函數在某些時刻最為有用，比如說，你將一個自定義類的實例的某個成員方法去綁定到一個DOM元素的某個事件，作為處理函數。默認情況下，當函數被呼叫時，你在函數內通過this得到的對象是event對象，而不是這個你自己定義的實例，假如你不希望如此，就可以使用它們了。

var o = {
	id: 'o',
	hello: function() { alert("Hi there! I'm " + this.id); }
};

$(whatever).click(o.hello);

$(whatever).click($.proxy(o.hello,o));

或者

var o = {
	id: 'o',
	hello: function() { alert("Hi there! I'm " + this.id); }
};

$(whatever).click(o.hello);

$(whatever).click($.proxy(o,'hello'));

分析JSON：

	Parameters	Returns
$.parseJSON(json)	json  (String) The JSON string to be parsed.	The evaluation of the JSON string.

執行表達式：

	Parameters	Returns
$.globalEval(code)	code  (String) The JavaScript code to be evaluated.	The evaluation of the JavaScript code.

動態加載腳本：

	Parameters	Returns
$.getScript(url,callback)	url  (String) The URL of the script file to fetch. The URL is not restricted to the same domain as the containing page. callback  (Function) An optional function invoked after the script resource has been loaded and evaluated, with the following parameters: the text loaded from the resource, and a text status message: “success” if all has gone well.	The XMLHttpRequest instance used to fetch the script.