The gbin1 online instance helps you better understand jquery features (2)

Document directory

• Use the. Clone () method
• Use the .html (),. Text (), and. Empty () Methods
• Use the. append (), prepend (), after (), and. Before () Methods
• Use jquery's Ajax Method
• Use the. Get () method
• Use the. Load () method
• Use the. Post () method
• Use bind and unbind Methods
• Use live (), on (), off ()
• Use the delegate Method
• Use the one () method
• Use the preventdefault () method
• Use the. stoppropagation () method
• Use the. stopimmediatepropagation () method

Date: 2012-6-21 Source: gbin1.com

 

Today, we will continue to introduce the functions and features of jquery. If you have not missed the first article, please read it here.

Jquery Dom operations

One of jquery's specialties is to help you effectively perform dom (Document Object Model) operations. Dom is all the elements in the Web application that you can see, including images, container elements, links, videos, and so on.

We usually process various events and elements after loading the Dom to generate unique results. The following describes several useful methods:

Use the. Clone () method

Jquery's clone () method can help us quickly generate copies of another element based on one element, I believe you have seen in our Ajax Method Introduction How to Use the clone method to generate a new element for ease of use. use the live () method to bind dynamic elements.

Note: You can also use the clone () method to copy events bound to elements. This is a very practical method.

Use the .html (),. Text (), and. Empty () Methods

The. html () method is probably the most familiar method. It can help you set or retrieve the content in a specific tag. If you only need to set or retrieve text rather than labels, you can consider using the. Text method. This method returns a string.

Note that these methods are browser-related, so the result will depend on your browser. The. Empty () method helps you quickly delete content.

Use the. append (), prepend (), after (), and. Before () Methods

These methods are commonly used jquery methods to help you add elements to different locations, where:

The append method adds content to the last part of the current element, and preprend () adds content to the first part of the element. After is added to the end of the current element, before is added to the end of the current element, as follows:

Use jquery's Ajax Method

You can use jquery's Ajax-related methods to quickly execute Ajax functions. If you are interested in jquery-related methods, please refer to our jquery Ajax Tutorial: Ajax method, a beginner's Guide to jquery class libraries.

Use the. Get () method

You can use the get method of HTTP to get the page content quickly:

Online Demo

 

Use the. Load () method

Online Demo

 

Use the. Post () method

Online Demo

 

For more information, see our query Ajax class library tutorial.

Jquery handles events

Using jquery can easily handle various events. With the development of jquery, many new optimization methods, such as on (), off (), yes. You can handle events more efficiently.

In previous articles, we have introduced in detail the relevant event handling methods. If you are interested, you can refer to our previous articles.

Use bind and unbind Methods

The bind and unbind methods can help you add events to DOM elements. Of course, different trigger actions, such as click, can all be processed using shortcuts:

. Click () is actually the same as the BIND ('click') method. Of course, we can use the unbind method to trigger event deletion.

Use live (), on (), off ()

Method

If you try to bind an event to a newly added element on a page, you will often find it difficult to do so. Here we will introduce another method live (), this method can help you bind events to the newly added methods in the DOC:

In the above example, you click the first bind demo and you can see that the click event is bound. However, if you click the second one, you will find that no event is bound, the reason is that the second element is the newly added element. Bind cannot be applied to it.

We only need to modify the code and replace bind with live.

In the latest jquery1.7, many old methods are like. live (),. BIND () and. delegate () can be implemented using the latest on () method. All other methods call the on method at the end, so here we can also write the above Code as follows:

As you can see, using on () can also add events to new elements, which has better performance than other methods.

To delete the binding of the On method, use the off () method.

Use the delegate Method

In earlier versions of jquery, we should try to use the delegate method instead of the live method. You will find that the performance of the delegate method is better than that of the live method, because the live method will search for elements at the document level, this will cause performance loss.

Use the one () method

If you need to execute only one event for the element, we can use the one () method:

Use the preventdefault () method

This method can help you prevent default event triggering, for example, you click <a href = "http://www.gbin1.com"> gbin1.com </a> to switch to the corresponding page, if you use the preventdefault () method, the page loading will be blocked:

Use the. stoppropagation () method

Similar to the preventdefault () method, this method can also block the default action, but the difference is to block the event of the upper element. Note that it cannot be used with the live method, because if the parent element is a document, it will process an event.

Use the. stopimmediatepropagation () method

Using this method will immediately block all related binding events. In the following example, you click two buttons to see the differences between the stopimmediatepropagation and stoppropagation methods.

Source: gbin1 online instance helps you better understand jquery features (2)