如何用jQuery和Ajax構建Internet應用程序

本文小編為大家詳細介紹“如何用jQuery和Ajax構建Internet應用程序”，內容詳細，步驟清晰，細節處理妥當，希望這篇“如何用jQuery和Ajax構建Internet應用程序”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Effects 模塊

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

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

清單 1. 隱藏和顯示函數

以下為引用的內容：// 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() 這兩個函數，還能更多地控制頁面元素如何顯示和隱藏。相關文檔將 hide() 描述為 “優美” 的顯示/隱藏，對于 show()，就是綜合淡入和滑出的效果。

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

清單 2. 復合效果

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

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