4. 讓你的html動起來

你可以使用jQuery做一些基本的動畫和效果。動畫效果的核心就是函數animate(), 它可以隨時改變指定的CSS樣式. 舉例來說, 你可以改變高度, 寬度, 透明度或者位置. 你還可以指定動畫的速度, 改變速度的時候你可以使用毫秒(milliseconds),或者你也可以使用預定的速度值: 慢速, 正常或者快速(slow, normal, or fast).

下面是個同時改變元素寬和高的動畫示例. 注意, 沒有初始值,只有最終的值. 初始值可以直接從現有元素取到. 同時, 我還添加了一個回調函數:

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){alert('The element is done growing!');});使用jQuery 的這些內建函數, 使動畫效果做起來也相當容易了. 你可以使用show() 函數以及hide() 函數來顯示和隱藏元素, 可以設定立即執行或者指定速度. 你還可以使用fadeIn()函數和fadeOut()函數或者slideDown()和slideUp()函數來顯示或者隱藏一個元素, 這要看你想要哪種效果了. 下面是個簡單的例子, 展示導航條的幻燈片效果(slide down):

$('#nav').slideDown('slow');5. DOM腳本以及事件處理jQuery最擅長的可能就是操作DOM以及進行事件處理了. 遍歷以及操作DOM其實很容易, 綁定移除以及調用事件用起來也很自然順手,并且和手動寫這些代碼相比,可以大大的減少錯誤.事實上, jQuery簡化了DOM的各種操作. 你可以創建一個元素并且使用append()函數把它鏈接到其他元素上, 可以使用clone()復制元素, 可以使用html()設置內容,可以使用empty()函數刪除內容,使用remove()函數刪除元素以及內容, 甚至,可以使用wrap()函數來使用另一個元素包裝此元素.有一些函數,可以靠遍歷DOM來改變jQuery對象本身的內容. 又可以得到一個元素的siblings(),parents(), 或者children().你還可以使用next()和PRev()來尋找兄弟元素. find()也許是這些函數中最強大的一個了. 它允許你使用一個jQuery選擇符來在你的jQuery對象以及其子孫節點中進行搜索.如果配合end()函數,這些函數將變得更加強大. end()函數就像執行撤銷一樣, 會讓你的jQuery對象回退到你調用find()或者parents()或者其他任一個遍歷函數之前的狀態.如果使用上面我們講到的方法鏈接,那就可以讓很復雜的功能以簡介的代碼來實現. Listing7展示了一個例子,你將找到一個登錄表單,并對其上的元素進行 一些操作.Listing 7. Traversing and manipulating the DOM with ease$('form#login')// hide all the labels inside the form with the 'optional' class.find('label.optional').hide().end()// add a red border to any passWord fields in the form.find('input:password').css('border', '1px solid red').end()// add a submit handler to the form.submit(function(){return confirm('Are you sure you want to submit?');});信不信由你,這個例子其實只有單一個鏈接起來的一行代碼,中間加了一些空格而已. 首先,我選中了登錄表單. 然后,我找到里邊可選的label,隱藏他們,然后調用end()回到表單. 我找到密碼輸入框, 把邊框變成紅色,然后再次調用end()返回到表單. 最后,我給這個表單增加了一個提交時間處理函數. 特別有趣的是,除了代碼格外簡潔以外, jQuery還自己優化了所有的操作,以保證當一切都很好的鏈接起來的時候,你不需要兩次尋找一個元素.處理一般的事件也很簡單,就像調用函數click(),submit(),或者mouSEOver(),然后傳給一個事件監聽函數一樣. 另外,你還可以使用bind('eventname', function(){})來指定事件處理函數, 你可以使用unbind('eventname')解除綁定某事件,或者使用unbind()解除所有事件. 更多關于這一系列函數的信息以及使用方法,請查閱jQuery的應用程序接口文檔(API).6. 揭秘jQuery選擇符的威力

通常, 你使用ID選擇元素, 比如#myid; 或者使用類名來選擇,比如div.myclass. 然而,jQuery有一套相當復雜而且完備的選擇符語法,可以讓你使用單一的選擇符就可以找到任意組合的元素.

jQuery 的選擇符語法很大程度上基于CSS3以及XPath. 你對CSS3以及XPath 了解的越多, 你越能更好的使用jQuery. 關于jQuery 選擇符的詳細心意, 包括CSS3和XPath, 可以參考文后的資源鏈接.

CSS3 包含一些并不是所有瀏覽器都支持的語法, 所以你有可能不怎么會經常見到它. 但是, 你仍然在jQuery里可以使用它來選擇元素, 因為, jQuery有他自己定制的選擇符解析引擎. 舉例來說, 要給表格中的每一空列增加一個短橫線, 則可以使用:empty 偽操作符:

$('td:empty').html('-');如何找到每個不包含特定類名的元素呢? CSS3有個針對這種情況的特定語法,使用:not偽操作符. 下面的代碼將隱藏所有不含有required類名的文本輸入框元素.$('input:not(.required)').hide();你還可以使用逗號把多個選擇符連到一起,就像在css里處理的一樣. 下面的代碼將同時隱藏頁面上各種不同類型的列表元素.$('ul, ol, dl').hide();XPath是在一個文檔中找元素的強大工具. 他和CSS有些不同,可以讓你找到使用CSS無法找到的許多東西. 比如,想要給所有的復選框的父元素增加一個邊框,可以這樣做:$("input:checkbox/..").css('border', '1px solid #777');jQuery 也有一些css和XPath里都沒有的額外的選擇符, 比如,為了增加一個表格的可讀性, 你可能需要設定奇數行和偶數行使用不同的類名, 這就是斑馬條. 使用jQuery做這個就是小菜一碟,這多虧了:odd為選擇符. 下面代碼演示使用striped類改變表格中奇數行的背景色:$('table.striped > tr:odd').css('background', '#999999');看到了吧,jQuery強大的選擇符能夠簡化你的代碼. 無論你想要影響什么元素,也無論它多么清晰或者模糊,你總可以找到一個方法使用一個簡單的jQuery選擇符定位到它.7. 使用插件擴展jQuey不像其他的軟件那樣, 給jQuery寫插件絕不是對著一堆復雜的API的一個痛苦的煎熬. 事實上,給jQuery寫插件是如此的簡單,以至于你等下都有可能想寫個插件來使你的代碼更加簡練.下面就是你要寫的插件最基本的部分:$.fn.donothing = function(){return this;};盡管十分簡單, 但是還需要稍微解釋一下. 首先,要為每個jQuery對象增加一個函數,你必須把它指定到$.fn上, 其次, 這個函數必須返回this(jQuery對象)來保證不會破壞上面提到的方法鏈接規則.你可以很容易的在上面代碼基礎上擴展. 要寫一個改變背景色的插件來代替使用css('background'),你可以這樣:$.fn.background = function(bg){return this.css('background', bg);};注意我可以直接返回css()函數的結果,因為它本身已經是一個jQuey對象了,因此,方法鏈接可以很好的工作.我建議當你發現你在不斷的重復代碼的時候使用jQuery插件. 比如, 當你使用each()函數來一遍又一遍的處理某個相同的事情的時候,你可以考慮使用插件[譯注:不是很明白.].由于jQuery的插件十分容易開發,因此已經有成千上萬個插件可以供你使用. jQuery 有針對表格,圓角,幻燈效果,提示,日期選擇以及任何你能想到的應用方面的插件.你可以在文后的資源列表中找到完整的插件列表.最復雜并且使用最廣泛的插件是Interface, 一個處理排序,拖動效果,各種復雜特效以及其他有趣的復雜的用戶界面效果的動畫插件. Interface對jQuery就像Scriptaculous對Prototype來說一樣.同樣流行并且有用的插件是Form插件,允許你簡單的使用Ajax在后臺提交一個表單. 這個插件用在這種情況下:當你需要劫持表單提交事件,然后找到所有不同的文本輸出字段,并使用他們來構建ajax調用.8. jQuery之后我只是講述了關于jQuery的一些皮毛罷了. jQuery用起來很有意思, 因為你學的這些新特性新方法看起來都十分的自然十分順理成章. 你一旦使用jQuery,就會體會到它可以簡化你的javascript以及Ajax開發, 你每學一點東西, 就會使代碼變得更簡單一點.

學習jQuery之后, 我在Javascript編程里找到了許多樂趣, 所有無聊的東西都被很好的處理, 所以我只需要關注最核心的部分. 使用jQuery之后, 我幾乎記不得我上一次使用for 循環是什么時候. 我甚至害怕使用其他Javascript庫. jQuery徹底的改變了我對Javascript編程的看法.