Usage examples of using jQuery to process page elements_jquery

The example in this article describes the use of jQuery to process page elements. Share it with everyone for your reference. The specific analysis is as follows:

For page elements, they can be managed through various query and modification methods in DOM programming, which is very troublesome. jQuery provides a whole set of methods for manipulating page elements. Including the content, copy, move and replacement of elements. Here are some commonly used ones.

1. Obtain and edit content directly.

In jQuery, the content of the page is obtained and edited mainly through the two methods html() and text(). Among them, html() is equivalent to getting the innerHTML attribute of the node. Adding the parameter html(text) sets the innerHtml; text() is used to get the plain text of the element, and text(content) sets the plain text.

These two methods are sometimes used together. text() is used to filter the tags in the page, while html(text) is used to set the innerHtml in the node. For example:

.

Ingenious use of text() and html() methods.

One click, two clicks, and three clicks of the mouse can be used to obtain and transfer codes.

2. Move and copy elements

In ordinary DOM, if you want to add an element after an element, you usually use the appendChild() or insertBefore() method of the parent element. In many cases, you need to repeatedly find the position of the node. It's very troublesome. jQuery provides the append() method, which can directly add new sub-elements to an element.

In addition to adding html code directly, the append() method can also be used to add fixed nodes, such as

is the only element, then $("a") will be moved to the back of all child elements of the element, and if the target

is Multiple elements, then $("a") will add a child element to each P in the form of copy, while itself remains unchanged. Example: Use the append() method to copy and move elements.

The above code sets two hyperlinks for append() calls. For the first hyperlink, add the target $("p"), which has two

elements. For the second hyperlink, add the target as the only

element.

In addition, as can be seen from the above, the tag after append() is applied to the style of the target

, while maintaining its own style. This is because append() adds as a sub-tag of

, placing behind all sub-tag (text) nodes of

.

For the first photo, my colleague added it to three p tags, and for the second photo, he added it to one P element. From the execution results, we can see that the first photo is copied is added to the three P elements in the form of , while the second picture is added in a mobile way.

Corresponding to the append() and appendTo() methods, JQ also provides prepend() and prependTo() methods. These two methods are to add elements before all child elements of the target, and also follow: copy and move additions in principle.

In addition to the above four methods, Jq also provides before(), insertBefore(), after(), and insertAfter(), which are used to add elements directly before or after a node instead of as a child. Element insertion.

Before() is exactly the same as insertBefore(), and after() and insertAfter() are also exactly the same. Here we take after() as an example

As a result of running the above code, you can see that the after() method also follows the principle of moving a single target and copying multiple targets, and is no longer added as a child element. Instead, it is the sibling element immediately following the target element.

3. Delete elements.

In DOM programming, to delete an element, you often use the removeChild() method of the parent element, and jQuery provides the remove() method to delete the element directly.

For example, $("p").remove(); deletes all p element tags in the entire page.

remove() also accepts parameters.

In the above code, remove() uses a filter selector, and the P element whose text content contains 1 is deleted.

Although remove() can accept parameters, it is usually recommended to determine the object to be deleted in the selector stage, and then use remove() to delete it all at once. ("p:contains('1')").remove(); The effect is exactly the same, and the effect is consistent with the style of other codes.

In the DOM, if you want to delete all the child elements of an element, you often use a for loop with hasChildNodes() to judge, and use removeChildNode() to delete them one by one. Jquery provides the empty() method to directly delete all child elements. .

4. Clone elements.

The second section mentions the copying and moving of elements, but this depends on the number of targets. Many times developers hope that even if there is only one target object, the copy operation can still be performed.

jQuery provides the clone() method to accomplish this task.

---

The results achieved by the appendTo() method in the previous section are also completed.

In addition, the clone() function also accepts a Boolean value object as a parameter. When the parameter is true, in addition to the clone itself, the time method it carries will be copied together.

The above code clones the button itself when the button is clicked, and clones the click event at the same time. The cloned button also has the function of cloning itself.

I hope this article will be helpful to everyone’s jQuery programming.