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編程的看法.