使用jQuery簡化Ajax開發——Ajax開發入門[2]
日期:2008-07-11 作者:喜騰小二 來源:PHPChina
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編程的看法.
Copyright 2004 - 2009 SYSTN.COM