Replication and substitution of jquery-2.dom---nodes

Dom Copy Clone ()

Cloning nodes is a common dom operation, and JQuery provides a clone method that is designed to handle the cloning of the DOM

The. Clone () method deeply copies all matching element collections, including all matching elements, subordinate elements of matching elements, and literal nodes.

The Clone method is relatively simple is the cloning node, but it should be noted that if the node has events or other processing data, we need to pass a Boolean value through Clone (ture) ture used to specify, so not only to clone the simple node structure, And we're going to clone the accompanying incident with the data.

For example:

The HTML section <div></div>javascript part $ ("div"). On (' click ', function () {///Perform action})//clone process a $ ("div"). Clone ()   //Clone only structure, event loss//clone processing two $ ("div"). Clone (TRUE)//structure, event and data cloning

The use of this is so simple that using clones we need to know extra details:

• Clone () method, before inserting it into a document, we can modify the cloned element or element content, such as the right code I $ (this). Clone (). CSS (' Color ', ' red ') adds a color
• Copies all event handlers bound on the original element to the cloned element by passing true
• The Clone () method is a jquery extension that only handles events and data that are bound by jquery
• The objects and arrays within the element data are not copied and will continue to be shared by the cloned element and the original element. Deep copy of all the data, you need to manually copy each

<script type= "Text/javascript" >
//Clone nodes only
//Do not clone events
$ (". Aaron1"). On (' click ', Function () {
$ (". Left"). Append ($ (this). Clone (). CSS (' Color ', ' red ' )
        })
</script>

<script type= "Text/javascript" >
//Clone node
//Cloning Events
$ (". Aaron2"). On (' click ', Function () {
Console.log (1)
$ (". Left"). Append ($ (this). Clone (True). CSS (' Color ', ' Blue ' )
        })
</script>

Dom replaces ReplaceWith () and ReplaceAll ()

Previously, we learned how to insert, insert, and delete nodes, and this section will learn how to replace ReplaceWith

. ReplaceWith (newcontent): Replaces all matching elements in the collection with the provided content and returns the collection of deleted elements

Simply put: Select Node A with $ (), call the ReplaceWith method, pass in a new content B (HTML string, Dom element, or jquery object) to replace the selected Node A

See a simple example: a piece of HTML code

<div>    <p> First segment </p>    <p> second segment </p>    <p> third paragraph </p></div>

Replace the node and contents of the second paragraph

$ ("P:eq (1)"). ReplaceWith (' <a > replace the contents of the second paragraph </a> ')

Using jquery to filter out the second P element, call ReplaceWith to replace, the result is as follows

<div>    <p> First segment </p>    <a > Replace the second paragraph </a> '    <p> the third segment </p></div>

. ReplaceAll (target) : replaces each target element with a collection of matching elements

The. ReplaceAll () and. ReplaceWith () functions are similar, but the target and source are the opposite, using the HTML structure above, we use the ReplaceAll processing

$ (' <a > replace the contents of the second paragraph </a> '). ReplaceAll (' P:eq (1) ')

Summarize:

• The. ReplaceAll () and. ReplaceWith () functions are similar, mainly the location differences between the target and the source
• The. replacewith () and. ReplaceAll () methods remove all data and event handlers associated with the node
• The. ReplaceWith () method, like most other jquery methods, returns a JQuery object, so you can link to it with other methods
• The. ReplaceWith () method returns a JQuery object that references the node before the replacement, not the node that was replaced by the Replacewith/replaceall method

<script type= "Text/javascript" >
//Clone nodes only
//Do not clone events
$ (". Bt1"). On (' click ', Function () {
//Find P element with content second paragraph
//delete and replace this node via replacewith
$ (". Right > Div:first p:eq (1)"). ReplaceWith (' <a style= ' color:red ' >replacewith replace the contents of the second paragraph </a> ')
    })
</script>
<script type= "Text/javascript" >
//Find P element with content sixth paragraph
//delete and replace this node via ReplaceAll
$ (". Bt2"). On (' click ', Function () {
$ (' <a style= "color:red" >replaceall replace the sixth paragraph of Content </a> '). ReplaceAll ('. Right > Div:last p:last ');
    })
</script>

Dom Wrapping Wrap () method

If you are wrapping an element with another element, that is, adding a parent element to it, jquery provides a wrap method for this processing

. Wrap (wrappingelement) : Wraps an HTML structure around each element that matches in the collection

Simply look at the code:

<p>p Elements </p>

Add a div package to the P element

$ (' P '). Wrap (' <div></div> ')

Last structure, p element adds a parent div structure

<div>    <p>p Elements </p></div>

. Wrap (function) : A callback function that returns the HTML content or JQuery object used to wrap the matching elements

The effect after use is the same as the direct pass parameter, except that the code can be written in the body of the function, in a different way.

Take the first case as an example:

$ (' P '). Wrap (function () {    return ' <div></div> ';   Similar to the first one, but not in the same notation})

Attention:

The. Wrap () function can accept any string or object that can be passed to the $ () factory function to specify a DOM structure. This structure can be nested several layers deep, but should contain only one core element. Each matching element will be wrapped in this structure. The method returns the original set of elements so that the chained method is used later.

<script type= "Text/javascript" >
$ (". Aaron1"). On (' click ', function () {
Give all P elements, add parent container div
$ (' P '). Wrap (' <div></div> ')
})
</script>
<script type= "Text/javascript" >
$ (". Aaron2"). On (' click ', function () {
$ (' a '). Wrap (function () {
Return ' <div class= ' + $ (this). Text () + "/>";
})
})
</script>

Dom Wrap Unwrap () method

We can add the parent element of a package to the selected element through the Wrap method. Conversely, what do you do if you delete the parent element of the selected element?

jquery provides a unwrap () method that is the opposite of the Wrap method. Deletes the parent element of the matching element collection, preserving itself (and the sibling element, if present) in its original position.

See a simple case:

<div>    <p>p Elements </p></div>

I'm going to remove the div from this code, and the general method will go directly through the Remove or empty method

$ (' div '). Remove ();

But if I have to keep the internal element p, which means more processing is needed, the steps are more cumbersome and, for the sake of convenience, jquery provides the unwrap method to handle the problem conveniently.

$ (' P '). Unwrap ();

Find the P element and then call the Unwrap method, which will only delete the parent div element.

Results:

<p>p Elements </p>

This method is relatively simple, and does not accept any parameters, note the use of the case under the reference can be

<script type= "Text/javascript" >
$ (". Aaron1"). On (' click ', function () {
Find all P elements, delete parent container div
$ (' P '). Unwrap (' <div></div> ')
})
</script>
<script type= "Text/javascript" >
$ (". Aaron2"). On (' click ', function () {
Find all P elements, delete parent container div
$ (' a '). Unwrap (function () {
Return ' <div></div> ';
})
})
</script>

Dom Wrap Wrapall () method

Wrap is handled for a single DOM element, and if you want to wrap the elements of the collection with other elements, that is, to add a parent element to them, jquery provides a wrapall method for such processing.

. Wrapall (wrappingelement) : adds an outer wrapping HTML structure to the matching elements in the collection

Simply look at the code:

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

Add a div package to all P elements

$ (' P '). Wrapall (' <div></div> ')

The last structure, 2 p elements have added a parent div structure

<div>    <p>p elements </p>    <p>p elements </p></div>

. Wrapall (function) : A callback function that returns the HTML content or JQuery object used to wrap the matching elements

Each element can be processed individually by means of a callback

Take the above case as an example,

$ (' P '). Wrapall (function () {    return ' <div><div/> ';})

The result of the above notation is the same as that of warp.

<div>    <p>p elements </p></div><div>    <p>p elements </p></div>

Attention:

The. Wrapall () function can accept any string or object that can be passed to the $ () factory function to specify a DOM structure. This structure can be nested multiple layers, but the inner layer can have only one element. All matching elements will be treated as a whole, and wrapped in the specified HTML structure outside the whole.

<script type= "Text/javascript" >
$ (". Aaron1"). On (' click ', function () {
Give all P elements, add parent container div
$ (' P '). Wrapall (' <div></div> ');
})
</script>
<script type= "Text/javascript" >
$ (". Aaron2"). On (' click ', function () {
Wrapall accepts a callback function
Each traversal of this point points to each a element in the set
$ (' a '). Wrapall (function () {
Return ' <div></div> '
})
})
</script>

Dom Wrap Wrapinner () method

If you want to wrap all the child elements within a set of elements with other elements and act as child elements of the specified element, jquery provides a Wrapinner method for such processing.

. Wrapinner (wrappingelement) : adds the HTML structure of the package to the interior of the matched element in the collection

Sounds a bit around, you can use a simple example to describe, a simple look at a piece of code:

<div>p element </div><div>p element </div>

Add a P package to all elements

$ (' div '). Wrapinner (' <p></p> ')

The final structure, the inner element of the matching di element is wrapped by P

<div>    <p>p elements </p></div><div>    <p>p elements </p></div>

. Wrapinner (function) : allows us to use a callback function to make arguments, each time a matching element is encountered, the function is executed, returning a DOM element, jquery object, or HTML fragment to wrap the contents of the matching element

Take the above case as an example,

$ (' div '). Wrapinner (function () {    return ' <p></p> ';})

The result of the above notation is the same as the first processing

<div>    <p>p elements </p></div><div>    <p>p elements </p></div>

Attention:

 
 <script type= "Text/javascript", 
     $ (". Aaron1"). On (' click ', Function () {
        //Give all class=right1 div elements, add inner Wrap parent container p 
         $ ('. right1 '). Wrapinner (' <p></p> '); 
    }) 
     </script> 
     <script type= "Text/javascript"; 
      $ (". Aaron2"). On (' click ', Function () {
        // Wrapinner accepts a callback function 
        //traverse this all points to the DIV element for each class=left1 in a collection 
         $ ('. Left1 '). Wrapinner (function () {
              return ' <a></a> ' 
        } ) 
    }) 
     </script> 

Jquery-2.dom replication and substitution of---nodes