如何用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应用程序”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。