如何用jQuery和Ajax構(gòu)建Internet應(yīng)用程序

本文小編為大家詳細(xì)介紹“如何用jQuery和Ajax構(gòu)建Internet應(yīng)用程序”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何用jQuery和Ajax構(gòu)建Internet應(yīng)用程序”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

Effects 模塊

從其名字往往容易得出這樣的結(jié)論，Effects 模塊只包含一些動畫和效果，而這些動畫和效果往往是一些 “正規(guī)” 的 Web 頁面所竭力避免的。但實際情況并非如此。幾乎所有的應(yīng)用程序都會遇到這樣的情況，即某個頁面元素需要隱藏或其視圖應(yīng)該根據(jù)另一個頁面元素的狀態(tài)進行切換。這類更改對于一個 RIA 而言非常重要，因為它們讓您能夠加載某個頁面的所有頁面元素，然后通過隱藏/顯示特定的元素只顯示所需的信息。重載頁面的方式并不可取。比如一個具有兩個選項的組合框，一個選項是隱藏 div，一個選項是顯示此 div。很顯然，與更改組合框并重載頁面隱藏/顯示    div 相比，用客戶端代碼隱藏/顯示此 div 更簡單和高效。而僅隱藏/顯示還是要讓它淡入/淡出，則完全取決于您。

如上所述，最基本的效果函數(shù)是 show() 和 hide() 函數(shù)。這非常直觀；它們可分別用來顯示和隱藏頁面上的某個元素。

清單 1. 隱藏和顯示函數(shù)

以下為引用的內(nèi)容：// shows every <p> on the page$("p").show();// hides every <p> on the page$("p").hide();// hides every other <p> on the page$("p:odd").hide();

除了這些基本操作，利用 show() 和 hide() 這兩個函數(shù)，還能更多地控制頁面元素如何顯示和隱藏。相關(guān)文檔將 hide() 描述為 “優(yōu)美” 的顯示/隱藏，對于 show()，就是綜合淡入和滑出的效果。

在開始深入探討一些例子之前，不妨回過頭來看看傳遞給這些效果函數(shù)的參數(shù)。每個函數(shù)（除了通用的 show() 和 hide() 函數(shù)之外）都允許在效果完成時傳入要調(diào)用的速度和函數(shù)。速度用來控制效果出現(xiàn)的快慢。這個參數(shù)可以是一個 "slow"、"fast" 或 "normal" 字符串。此外，如果需要精確控制動畫時間，那就需要用參數(shù)指定毫秒數(shù)。Effects 函數(shù)的第二個參數(shù)本身就是一個函數(shù)，此函數(shù)在效果完成后調(diào)用。如果想要將幾個效果組合成一個較大規(guī)模的效果，這一點將非常重要，因為利用它，能夠可靠地控制一個效果何時完成，下一個效果何時開始。

清單 2. 復(fù)合效果

以下為引用的內(nèi)容：// the img with an ID of "picture" should start hidden// when the "showPicture" button is pressed, show the img with an ID of "picture"// and animate it, so it appears quickly in a fade In and slide out, and when// it's done being shown, show the caption of the picture, which is// always in the span right after the <img> tag<input type="button" id="showPicture"><img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>// jQuery code inside the document.ready() function$("#picture").hide().next().hide();$("#showPicture").click(function(){   $("#picture").show("fast", function(){       $("#picture").next().show();   });});// notice how it took more text to describe what you want to happen than it took// to actually code it!

Effects 模塊還有其他一些函數(shù)，它們與 show() 和 hide() 非常類似，并且最終所實現(xiàn)的功能也基本相同；只不過實現(xiàn)的方式不同。slideDown() 和 slideUp() 函數(shù)分別用來顯示和隱藏一個頁面元素。不過，這是通過將該元素滑下或滑上的動畫效果實現(xiàn)的（從其名稱中不難看出這一點）。與我剛剛提到的增強了的 hide() 和 show() 函數(shù)類似，您也可以控制滑動的速度以及在效果完成時要調(diào)用的函數(shù)。此外，要顯示/隱藏頁面元素還有另一種選擇，即 fadeIn() 和 fadeOut() 函數(shù)，正如其名字所示，這兩個函數(shù)用來淡入頁面元素直至該元素透明，然后使該元素消失。它們允許在效果完成時定制速度和要調(diào)用的函數(shù)。

讀到這里，這篇“如何用jQuery和Ajax構(gòu)建Internet應(yīng)用程序”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。