JQuery uses (3) to process page elements and jquery Elements

JQuery uses (3) to process page elements and jquery Elements

Page elements can be managed through various query and modification methods in DOM programming, which is very troublesome. JQuery provides a complete set of methods to process page elements. Including the content, copying, moving, and replacing of elements. This section describes some common content.

1. directly obtain and edit the content.

In jQuery, you can obtain and Edit page content through html () and text () methods. Here, html () is equivalent to obtaining the innerHTML attribute of the node. When the parameter html (text) is added, innerHtml is set; while text () is used to obtain the plain text of the element, text (content) set plain text.

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

$ (Function () {var sString = $ ("p: first "). text (); // get plain text $ ("p: last" ).html (sString );});

Use the text () method to obtain the text of the first P, and then use the html () method to assign the last <p>.

The clever use of text () and html () methods.

<Script type = "text/javascript"> $ (function () {$ ("p "). click (function () {var sHtmlStr = Response (this).html (); // obtain innerHTML $ (this ). text (sHtmlStr); // pass the code as plain text });}); </script> <p> <B> text </B> <em> example </em> </p>

One-click, two-click, and three-click can be used for code transfer.

2. Move and copy Elements

In a common DOM, if you want to add an element after an element, the appendChild () or inserBefore () method of the parent element is usually used, in many cases, you need to find the node location repeatedly. Very troublesome. jQuery provides the append () method, which allows you to directly add new child elements to an element.

<Script type = "text/javascript"> $ (function () {// directly add HTML code $ ("p: last "). append ("<B> Add directly </B>") ;}); </script> <p> 11 <em title = "huge, gigantic "> 22 </em>... </p> <p> 33 <em title = "running"> 44 </em>... </p>

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

$("p").append($("a"));

This situation may be somewhat different. If the added <p> is a unique element, $ ("a") will be moved to the end of all the child elements of the element, if the target <p> is multiple elements, $ ("a") will add a child element to each P in the form of a copy, and remain unchanged. For example, use the append () method to copy and move elements.

<Script type = "text/javascript"> $ (function () {$ ("p "). append ($ ("a: eq (0)"); // Add multiple targets <p> $ ("p: eq (1 )"). append ($ ("a: eq (1)"); // The add target is unique <p> }) </script> <a href = "#"> link 1 </a> <a href = "#"> link 2 </a> <p> text 1 </p> <p> text 2 </p>

The above code sets two hyperlinks <a> for append () calls. For 1st hyperlinks, add a target $ ("p") with two <p> elements. For 2nd hyperlinks, add a target as a unique <p> element.

We can see that the first hyperlink is added as a copy, and the second hyperlink is added as a move.

In addition, we can see from the above that the <a> tag behind append () is applied to the style of the target <p>, and also maintains its own style. This is because append () adds <a> as a sub-tag of <p> and places <a> behind all the sub-tag (text) nodes of <p>.

In addition to the append () method, jQuery also provides the appendTo (target) method to add the target element to the child element of the specified target. Its usage and running result are similar to append.

$ (Function () {$ ("img: eq (0 )"). appendTo ($ ("p"); // Add multiple targets <p >$ ("img: eq (1 )"). appendTo ($ ("p: eq (0)"); // The add target is unique <p> });   
For the first picture, the colleague adds it to three p tags, and for the second picture, add it to one P element separately. From the execution result, we can see that, the first image is added as a copy to three P elements, while the second image is added as a move.
Corresponds to the append () and appendTo () methods. JQ also provides the prepend () and prependTo () methods. These two methods are used to add elements before all the child elements of the target, it also follows the principles of copying and moving.
In addition to the preceding four methods, Jq also provides before (), insertBefore (), after (), and insertAfter (), which are used to add elements directly before or after a node, instead of inserting it as a child element.
Before () is exactly the same as insertBefore (), and after () and insertAfter () are exactly the same. Here we take after () as an example.
<Script type = "text/javascript"> $ (function () {$ ("p "). after ($ ("a: eq (0)"); // Add multiple targets <p >$ ("p: eq (1 )"). after ($ ("a: eq (1)"); // The add target is unique <p> }); </script> <a href = "#"> link 1 </a> <a href = "#"> link 2 </a> <p> content 1 </p> <p> content 2 </p>
The code running result shows that the after () method follows the principle of moving a single target and copying multiple targets, and is no longer added as a child element. The sibling element following the target element.
3. delete an element.
In DOM programming, the removeChild () method of the parent element is often used to delete an element. jQuery provides the remove () method, which allows you to directly delete an element.
For example, $ ("p"). remove (); is used to delete all p element tags throughout the page.
Remove () also accepts parameters.
<Script type = "text/javascript"> $ (function () {$ ("p "). remove (": contains ('1')"); // $ ("p: contains ('1 ')"). remove ();}); </script> <a href = "#"> link 1 </a> <a href = "#"> link 2 </a> <p> content 1 </p> <p> content 2 </p>
In the above Code, remove () uses a filter selector. The P element containing 1 in the text content is deleted.
Although remove () can accept parameters, it is generally recommended that you determine the object to be deleted in the selector stage, and then delete it with remove. ("P: contains ('1')"). remove (); the effect is exactly the same, and the effect is consistent with that of other code.
In DOM, if you want to delete all the sub-elements of an element, the for loop is often determined by hasChildNodes () and deleted one by one using removeChildNode (). Jquery provides empty () method to delete all child elements.
<Script type = "text/javascript"> $ (function () {$ ("p "). empty (); // delete all child elements of p }); </script> <a href = "#"> link 1 </a> <a href = "#"> link 2 </a> <p> content 1 </p> <p> content 2 </p>
4. Clone the element.
The second section describes how to copy and move elements, but it depends on the number of objects. In many cases, developers want to perform replication even if only one target object exists.
JQuery provides the clone () method to complete this task.
<script type="text/javascript">            $(function() {                $("img:eq(0)").clone().appendTo($("p"));                $("img:eq(1)").clone().appendTo($("p:eq(0)"));            });        </script>         
The results of the appendTo () method in the previous section are also completed.
In addition, the clone () function also accepts a Boolean object as a parameter. When the parameter is true, in addition to the clone itself, the time method it carries will be copied.
<Script type = "text/javascript"> $ (function () {$ ("input [type = button]"). click (function () {// clone yourself and clone the click behavior $ (this ). clone (true ). insertAfter (this) ;}); </script> <input type = "button" value = "Clone Me">
The above code clones the button itself when you click the button. The cloned button also provides the clone function.