May 30, 2021 Article blog
JQuery's popularity has risen rapidly and is now the JavaScript library of choice for web developers. A t the same time, the demand for Rich Internet Applications (RIA) is growing rapidly and people are looking to replace desktop applications with browser-based applications. W hether it's spreadsheets or payroll books and email applications, desktop-like experiences are now being reproduced in browsers. A s the number of these applications increases and the complexity of their capabilities becomes more complex, JavaScript libraries will become increasingly important because they are a solid foundation for building these applications. J Query is undoubtedly the best choice for developers. T his series explores jQuery in depth and provides a solid foundation. With this foundation, developers can quickly and easily build their own RIAs.
In a previous article in this series, you learned about the three basic components for building RIAs and adding interactivity to pages. T he first module is the Event module, which captures any user interaction with the page and responds programmatically. F or example, you can attach code to events such as button clicks, mouse movements, and so on. T he next module is the Attributes module, which explains how to get/set values on page elements and how to use them as data objects with variables. T hese values contain most of the information that determines what kind of response is provided to the user. F inally, you see how to do CSS processing, how to change the layout, color, font, and so on of any element on the page without reloading the page. Knowing these three modules is tantamount to mastering the three basic elements of an interactive Web page - getting user interaction (Event), collecting information (Attribute), and providing feedback (CSS) based on events and information.
In this article, you'll take this three basic elements of an interactive Web page a step further, providing the "cool" effects and features that are essential for today's advanced Web applications. T hese additional modules are not critical to providing RIA, but these effects and features impress the user and greatly extend the range and features available to RIA. T he first module you'll see is the Effects module, which contains many features, such as hiding elements, moving elements anywhere, fade-in and fade-out elements, and so on. I n other words, these are the "bright spots" that make Web pages cool. T he last module to be discussed is the Ayonce JavaScript plus XML (Ajax) module. M ost people equivale the module as RIA. A jax allows Web applications to interact with the server, pass information to, and get information from the server without overloading the page (contrary to some opinions on the Web, Ajax is not simply a cool JavaScript animation tool). Y ou'll find that jQuery provides an extremely easy-to-use Ajax tool. In fact, jQuery makes Ajax as easy to use as calling other JavaScript methods.
The sample application in this article is a summary of how the Effects and Ajax modules fit into this sample Webmail application. I'll add some effects to this sample program to make it more beautiful, and more importantly, I'll add some Ajax code so that you don't have to overload the page mail application to display the information.
It is often easy to conclude from its name that the Effects module contains only animations and effects that some "regular" Web pages try to avoid. B ut that is not the case. A lmost all applications experience situations where a page element needs to be hidden or its view should switch based on the state of another page element. S uch changes are important for a RIA because they allow you to load all page elements of a page and then display only the information you need by hiding/displaying specific elements. T he way pages are overloaded is not desirable. F or example, a combo box with two options, one option is to hide div, and one option is to display this div. O bviously, it is easier and more efficient to hide/display this div with client code than to change the combo box and overload the page to hide/display the div. It's up to you to hide/show only or let it fade in/out.
As mentioned above, the most basic effect functions are show() and hide(). This is intuitive; they can be used to display and hide an element on a page, respectively.
以下为引用的内容：
// 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();
In addition to these basic operations, the functions show() and hide() provide more control over how page elements are displayed and hidden. The relevant documentation describes hide() as a "beautiful" display/hidden, which is the effect of a combination of fade-in and slide-out.
Before you begin to dive into some examples, you might want to look back at the parameters passed to these effect functions. E ach function (with the exception of the generic show() and hide() functions) allows speed and functions to be called in when the effect is complete. S peed is used to control how quickly the effect appears. T his argument can be a "slow," "fast," or "normal" string. I n addition, if you need precise control over the animation time, you need to specify the number of milliseconds with parameters. T he second argument of the Effects function itself is a function that is called after the effect is complete. This is important if you want to combine several effects into a larger effect, because it gives you reliable control over when an effect is completed and when the next starts.
以下为引用的内容：
// 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!
The Effects module has other functions that are very similar to show() and hide() and ultimately implement the same functionality; S lideDown() and slideUp() functions are used to display and hide a page element, respectively. H owever, this is achieved by sliding the element down or onto the animation effect (as can be seen from its name). S imilar to the enhanced hide() and show() functions I just mentioned, you can also control the speed of sliding and the functions to be called when the effect is complete. I n addition, there is another option to display/hide a page element, the fadeIn() and fadeOut() functions, which, as their names suggest, fade in the page element until it is transparent and then make the element disappear. They allow you to customize speed and functions to call when the effect is complete.