jquery uses instances of page element usages _jquery

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

For the elements of the page, in the DOM programming can be through a variety of inquiries, modify the means to manage, very troublesome. jquery provides a complete set of ways to handle the elements of a page. Includes the content of elements, copying, moving, and replacing. Here are some common things to read.

1. Get and edit content directly.

In jquery, the content of a page is obtained and edited primarily through HTML () and text () two methods. where HTML () is equivalent to getting the innerHTML property of a node, adding parameter HTML (text), setting innerHTML, and text () is used to get the plain text of the element and text (content) to set plain text.

These two methods are sometimes used together, text () is used to filter the markup in the page, and HTML (text) is used to set the innerHTML in the node. For example:

Copy Code code as follows:

$ (function () {
var sstring = $ ("P:first"). Text (); Get Plain Text
$ ("P:last"). HTML (sstring);
});

Get the text of the first p by using the text () method, and then assign the last <p> in the HTML () method.

Use the text () and HTML () methods skillfully.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). Click (function () {
var shtmlstr = $ (this). html (); Get innerHTML
$ (this). Text (SHTMLSTR); To make the code plain text incoming
});
});
</script>
<p><b> Text </b> Paragraph <em> example </em> </p>

Mouse click, two clicks, three clicks can be used in code acquisition transfer.

2. Move and copy elements

In normal DOM, if you want to add an element after an element, usually by using the parent element's appendchild () or Inserbefore () method, many times you need to find the location of the node repeatedly. Very troublesome, jquery provides a append () method that can add new child elements directly to an element.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
Add HTML code directly
$ ("P:last"). Append ("<b> add </b> directly");
});
</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 as

Copy Code code as follows:

$ ("P"). Append ($ ("a"));

This situation will be different, if the added <p> is the only element, then $ ("a") is moved to the back of all child elements of the element, and if the target is <p&gt, and is more than one element, then $ ("a") will be copied in the form of A child element is added to each p, and its own remains unchanged. Example: Use the Append () method to copy and move elements.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). Append ($ ("A:eq (0)")); Add Target to multiple <p>
$ ("P:eq (1)"). Append ($ ("A:eq (1)")); Add target is unique <p>

})
</script>
<a href= "#" > Links 1</a>
<a href= "#" > Links 2</a>
<p> text 1</p>
<p> text 2</p>

Two Hyperlinks <a> for append () calls are set in the above code. For the 1th hyperlink, add the target $ ("P"), a total of two <p> elements, and for the 2nd hyperlink, the Add target is the only <p> element.

You can see that the first hyperlink was added as a copy, and the second hyperlink was added as a move.

In addition, it can be seen from the above that the <a> tag behind the append () is used in the style of the target <p>, and it also retains its style. This is because the append () is added to the <a> as a child tag of <p>, and the <a> is placed behind all the child tag (text) nodes of <p>.

In addition to the append () method, jquery also provides a appendto (target) method for adding the target element to the child element of the specified target. Its usage and running results are exactly the same as append ().

Copy Code code as follows:

$ (function () {
$ ("Img:eq (0)"). Appendto ($ ("P")); Add Target to multiple <p>
$ ("Img:eq (1)"). Appendto ($ ("P:eq (0)")); Add target is unique <p>
});

<p></p>
<p></p>
<p></p>

For the first photo, the colleague adds it to the 3 p tags, for the second picture, it is added separately to the 1 P elements, from the execution result, the first picture is added to the 3 p elements in the form of a copy, and the second picture is added in a moving way.

corresponding to append () and Appendto (), JQ also provides prepend () and Prependto () methods, both of which add elements to all child elements of the target, followed by the addition of the principle of copying and moving.

In addition to the above 4 methods, JQ also provides before (), InsertBefore (), after (), and InsertAfter (), which are used to add elements directly before or after a node, rather than as a child element.

where before () and insertbefore () are identical, after () and InsertAfter () is exactly the same, where after () as an example

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). After ($ ("A:eq (0)")); Add Target to multiple <p>
$ ("P:eq (1)"). After ($ ("A:eq (1)")); Add target is unique <p>

});
</script>
<a href= "#" > Links 1</a>
<a href= "#" > Links 2</a>
<p> content 1</p>
<p> content 2</p>

The above code runs the results and you can see that the after () method also follows a single target move, multiple target replication principles, and is no longer added as a child element. But the sibling element that clings to the target element.

3. Delete elements.

In DOM programming, to remove an element is often aided by the removechild () method of the parent element, and jquery provides the remove () method, which can be used to directly click the delete element.

For example, $ ("P"). Remove () is the deletion of all P-element tags throughout the page.

Remove () also accepts parameters.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). Remove (": Contains (' 1 ')");
$ ("P:contains (' 1 ')"). Remove ();
});
</script>
<a href= "#" > Links 1</a>
<a href= "#" > Links 2</a>
<p> content 1</p>
<p> content 2</p>

In the above code remove () uses the filter selector, the text content contains 1 of the P element was deleted.

Although remove () can accept parameters, it is usually recommended that the object to be deleted be determined at the selector stage and then removed with remove (). ("P:contains (' 1 ')"). Remove (); the effect is exactly the same, and the style of the effect and other code is uniform.

In DOM, if you want to remove all of the child elements of an element, often judged by the haschildnodes () of the For loop, and removed by Removechildnode (), jquery provides the empty () method to delete all the child elements directly.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). empty (); Delete all child elements of P
});
</script>
<a href= "#" > Links 1</a>
<a href= "#" > Links 2</a>
<p> content 1</p>
<p> content 2</p>

4. Cloning elements.

The second section mentions the copying and moving of elements, but this depends on the number of targets, and many times developers want to replicate even if the target object is just one.

jquery provides a clone () method to accomplish this task.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("Img:eq (0)"). Clone (). Appendto ($ ("P"));
$ ("Img:eq (1)"). Clone (). Appendto ($ ("P:eq (0)"));

});
</script>

<p></p>
<p></p>
<p></p>

The results of the Appendto () method achieved in the above section are also completed.

In addition, the Clone () function accepts a Boolean object as a parameter, and when the argument is true, the time method that it carries is copied, in addition to the clone itself.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("Input[type=button]"). Click (function () {
Cloning yourself, and cloning the click of the behavior
$ (this). Clone (True)-InsertAfter (this);
});
});
</script>
<input type= "button" value= "Clone Me" >

The above code clones the button itself when the button is clicked, while the clone clicks the event, and the cloned button also has the ability to clone itself.

I hope this article will help you with your jquery programming.