使用jQuery簡化Ajax開發—Ajax開發入門[2]

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

使用jQuery簡化Ajax開發—Ajax開發入門[2]
4. 讓你的html動起來你可以使用jQuery做一些基本的動畫和效果。動畫效果的核心就是函數animate(), 它可以隨時改變指定的css樣式. 舉例來說, 你可以改變高度, 寬度, 透明度或者位置. 你還可以指定動畫的速度, 改變速度...查看完整版>>使用jQuery簡化Ajax開發—Ajax開發入門[2]
 
結合AJAX進行PHP開發之入門
結合AJAX進行PHP開發之入門
  異步 javaScript 和 xml(Asynchronous Javascript and XML,Ajax)無疑是最流行的新 Web 技術。本文中我們將完全使用 php 和 Simple Ajax Toolkit (Sajax) 創建一個簡單的相冊作爲在線 Web 應用程序。我們首先用...查看完整版>>結合AJAX進行PHP開發之入門
 
進階:怎樣使用AJAX進行WEB應用程序開發
閱讀提要 AJAX,一個異步JavaScript和XML的縮略詞,是當今快速發展的Web開發界十分熱門的技術。在這項新技術提供巨大能力的同時,它也燃發了在"Back"按鈕問題上的不容置疑的爭論。本文作者將向你解釋怎樣在真實世界中...查看完整版>>進階:怎樣使用AJAX進行WEB應用程序開發
 
怎樣使用AJAX進行WEB應用程序開發
  閱讀提要 AJAX,一個異步JavaScript和XML的縮略詞,是當今快速發展的Web開發界十分熱門的技術。在這項新技術提供巨大能力的同時,它也燃發了在"Back"按鈕問題上的不容置疑的爭論。本文作者將向你解釋怎樣在真實世...查看完整版>>怎樣使用AJAX進行WEB應用程序開發
 
使用Java Web Services Developer Pack1.6開發WebService入門
介紹本文主要介紹Java Web Services Developers Pack1.6的基礎知識,並且利用Eclipse開發一個入門程序。Java Web Services Developer Pack簡介Java Web Services Developer Pack(JWSDP)是一個免費的集成工具,它幫...查看完整版>>使用Java Web Services Developer Pack1.6開發WebService入門
 
J2ME入門-(7)使用KjavaGUI組件的開發
  第七章:使用KJava GUI組件的開發 介紹本章中,我們來學習如何使用 KJava API 進行 GUI 開發。首先看一下 KJava GUI 開發的介紹,然後使用 KJava API 開發我們的第一個 J2ME 應用程序。HelloWorld ,將示範一個使...查看完整版>>J2ME入門-(7)使用KjavaGUI組件的開發
 
使用C#開發SmartPhone程序入門
使用C#開發SmartPhone程序入門
  介紹  本文的目的是引導SmartPhone編程的初學者進入SmartPhone世界,以及學會如何使用C#編寫SmartPhone程序。本文首先介紹了什麽是SmartPhone,以及SmartPhone的一些特性和用于編程的API。爲了更好地掌握如何使...查看完整版>>使用C#開發SmartPhone程序入門
 
ASP.NET 2.0移動開發入門之使用樣式
  每個ASP.NET移動控件都提供了若幹樣式屬性,使用這些屬性可以自定義控件的呈現方式。當然你也可以使用StyleSheet控件來定義樣式信息,然後在同一個頁面的不同控件上應用StyleSheet控件定義的樣式信息.我們在前面已...查看完整版>>ASP.NET 2.0移動開發入門之使用樣式
 
使用DriverStudio開發WDM設備驅動程序入門
編者按:本文的內容主要由DriverStudio的隨機文檔翻譯整理而來。本文的讀者最好有以下軟件:DriverStudio2.5,Visual Studio6.0,以及Windows 2000 DDK。本文假設你已安裝了這些軟件。DriverStudio2.5可在驅動開發網(...查看完整版>>使用DriverStudio開發WDM設備驅動程序入門
 
 
回到王朝網路移動版首頁