Using jquery to simplify AJAX development--ajax development [2][end]

4. Make your HTML move

You can use jquery to do some basic animations and effects. The core of the animation effect is the function animate (), which can change the specified CSS style at any time. For example, you can change the height, width, transparency, or position. You can also specify the speed of the animation, you can use milliseconds (milliseconds) when you change the speed, or you can use a predetermined speed value: slow, normal, or fast (slow, regular, or quick).

Here is an example of an animation that changes both the width and the height of the element. Note that there is no initial value, only the final value. The initial value can be fetched directly from the existing element. At the same time, I added a callback function:

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
　　alert('The element is done growing!');
});

Using these built-in functions of jquery, it's also pretty easy to make the animation work. You can use the show () function and the Hide () function to display and hide elements that can be set to execute immediately or specify speed. You can also use the Fadein () function and the fadeout () function or the Slidedown () and Slideup () functions to show or hide an element, which depends on what kind of effect you want. Here's a simple example that shows the slide effect of the navigation bar (slide down):

$('#nav').slideDown('slow');

5. Dom Scripts and event handling

One of the best things jquery can do is manipulate the DOM and do event handling. Traversing and manipulating the DOM is actually very easy, binding removal and invocation events are also naturally handy,

And you can reduce the error significantly compared to writing these codes manually.

In fact, jquery simplifies the various operations of the DOM. You can create an element and use the Append () function to link it to other elements, and you can use the Clone ()

To copy elements, you can use HTML () to set content, you can use the empty () function to delete content, delete elements and content using the Remove () function, or even use wrap ()

function to wrap this element with another element.

There are functions that can be traversed by the DOM to change the content of the jquery object itself. You can also get an element of siblings (), parents (), or children (). You still

You can use Next () and Prev () to look for sibling elements. Find () may be the most powerful of these functions. It allows you to use a jquery selector in your jquery

object to search in its descendants node.

If the end () function is combined, these functions will become more powerful. The end () function, like executing a undo, will let your jquery object fall back to the call to find () or parents ()

Or the state before any of the other traversal functions.

If you use the method link above, you can make the complex functionality available in the profile code. Listing7 shows an example where you'll find a login form,

And do some action on the elements on it.

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?');
　　});

Believe it or not, this example actually has a single line of linked code with a few spaces in the middle. First, I checked the login form. And then I found the optional label inside,

Hide them, and then call End () back to the form. I found the password input box, turned the border red, and then called End again () to return to the form. In the end, I added the form to a

The commit time processing function. What's particularly interesting is that, in addition to the simplicity of the code, jquery optimizes all of its operations to ensure that when everything is well linked, you don't need to

To find an element two times.

Handling General events is also simple, like calling a function click (), submit (), or mouseover (), and then pass to an event listener function. In addition, you can also use

Bind (' EventName ', function () {}) to specify the event handler function, you can use Unbind (' EventName ') to unbind an event, or use Unbind () to dismiss

All events. For more information on this series of functions and how to use them, consult the Application Interface documentation (API) for jquery.