Document Processing for Jquery basic learning notes

It mainly includes the following parts: (1) Internal insertion (2) External insertion (3) package (4) Replacement (5) deletion (6) assignment. Let's take a closer look.
1. Internal insertion: insert content to some elements
(1) append (content): append content to each matching element to the end of the element, such
Description:
Append some HTML tags to all paragraphs.
HTML code:
<P> I wowould like to say: </p>
JQuery code:
$ ("P"). append ("<B> Hello </B> ");
Result:
[<P> I wowould like to say: <B> Hello </B> </p>]

(2) appendTo (content) append all matched elements to another specified element set.
Description:
Append all paragraphs to the element with the ID value foo.
HTML code:
<P> I wowould like to say: </p>
<Div> </div>
JQuery code:
$ ("P"). appendTo ("div ");
Result:
<Div> <p> I wowould like to say: </p> </div>
<Div> <p> I wowould like to say: </p> </div>

(3) prepend (content) pre-content to each Matching Element
Description:
Add some HTML code to all sections.
HTML code:
<P> I wowould like to say: </p>
JQuery code:
$ ("P"). prepend ("<B> Hello </B> ");
Result:
[<P> <B> Hello </B> I wowould like to say: </p>]

(4) prepend () puts all matched elements in front of another and specified element set.
Description:
Append all paragraphs to the element with the ID value foo.
HTML code:
<P> I wocould like to say: </p> <div id = "foo"> </div>
JQuery code:
$ ("P"). prependTo ("# foo ");
Result:
<Div id = "foo"> <p> I wocould like to say: </p> </div>

2. Internal insertion: insert content to the outside of some elements
(1) after (content) inserts content after each matching element.
Description:
Insert HTML code after all paragraphs.
HTML code:
<P> I wowould like to say: </p>
JQuery code:
$ ("P"). after ("<B> Hello </B> ");
Result:
<P> I wowould like to say: </p> <B> Hello </B>

(2) before () insert content before each Matching Element
Description:
Insert HTML code before all paragraphs.
HTML code:
<P> I wowould like to say: </p>
JQuery code:
$ ("P"). before ("<B> Hello </B> ");
Result:
[<B> Hello </B> <p> I wowould like to say: </p>]
(3) insertafter inserts all matching elements to the end of another specified Element Set.
Description:
Insert all paragraphs into one element. Same as $ ("# foo"). after ("p ")
HTML code:
<P> I wocould like to say: </p> <div id = "foo"> Hello </div>
JQuery code:
$ ("P"). insertAfter ("# foo ");
Result:
<Div id = "foo"> Hello </div> <p> I wowould like to say: </p>

(4) insertBefore inserts all matching elements in front of another specified Element Set.
Description:
Insert all paragraphs into one element. Same as $ ("# foo"). before ("p.
HTML code:
<Div id = "foo"> Hello </div> <p> I wowould like to say: </p>
JQuery code:
$ ("P"). insertBefore ("# foo ");
Result:
<P> I wocould like to say: </p> <div id = "foo"> Hello </div>



3. Package: Pack some elements
(1) wrap (html) wraps all matching elements with structured tags of other elements
Description:
Wrap all the paragraphs with a newly created div
HTML code:
<P> Test Paragraph. </p>
JQuery code:
$ ("P"). wrap ("<div class = 'wrapp'> </div> ");
Result:
<Div class = "wrap"> <p> Test Paragraph. </p> </div>

(2) wrap (elem) wraps all matching elements with structured tags of other elements
Description:
Wrap each section with a div whose ID is "content"
HTML code:
<P> Test Paragraph. </p> <div id = "content"> </div>
JQuery code:
$ ("P"). wrap (document. getElementById ('content '));
Result:
<Div id = "content"> <p> Test Paragraph. </p> </div> <div id = "content"> </div>

(3) wrapAll (html) wraps all matching elements with a single element.
Description:
Wrap all paragraphs with a generated div
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("P"). wrapAll ("<div> </div> ");
Result:
<Div> <p> Hello </p> <p> cruel </p> <p> World </p> </div>

(4) wrapAll (elem) wraps all matching elements with a single element.
Description:
Wrap all paragraphs with a generated div
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("P"). wrapAll (document. createElement ("div "));
Result:
<Div> <p> Hello </p> <p> cruel </p> <p> World </p> </div>
(5) wrapInner (html) wraps the child content (including text nodes) of each matching element in an HTML structure.
Description:
Bold each sub-content in all paragraphs
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("P"). wrapInner ("<B> </B> ");
Result:
<P> <B> Hello </B> </p> <B> cruel </B> </p> <B> World </B> </p>
(6) wrapInner (elem)
Description:
Bold each sub-content in all paragraphs
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("P"). wrapInner (document. createElement ("B "));
Result:
<P> <B> Hello </B> </p> <B> cruel </B> </p> <B> World </B> </p>
4. Replace: replace HMTL or DOM elements with specified elements.
(1) replaceWith (content) replaces all matched elements with specified HTML or DOM elements.
Description:
Replace all paragraph marks with bold marks.
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("P"). replaceWith ("<B> Paragraph. </B> ");
Result:
<B> Paragraph. </B>
(2) repalceAll (selector) replaces all elements matched by selector with matched elements.
Description:
Replace all paragraph markup with bold Markup
HTML code:
<P> Hello </p> <p> cruel </p> <p> World </p>
JQuery code:
$ ("<B> Paragraph. </B>"). replaceAll ("p ");
Result:
<B> Paragraph. </B>

5. Delete: Delete the specified element.
(1) empty () deletes all child nodes in the matched element set.
Description:
Delete child elements (including text nodes) of all paragraphs
HTML code:
<P> Hello, <span> Person </span> <a href = "#"> and person </a> </p>
JQuery code:
$ ("P"). empty ();
Result:
<P> </p>
(2) remove ([expr]) removes all matching elements from the DOM
Description:
Delete all paragraphs from the DOM
HTML code:
<P> Hello </p> how are <p> you? </P>
JQuery code:
$ ("P"). remove ();
Result:
How are
Description:
Delete a paragraph with the hello class from the DOM
HTML code:
<P class = "hello"> Hello </p> how are <p> you? </P>
JQuery code:
$ ("P"). remove (". hello ");
Result:
How are <p> you? </P>
5. Copy: Clone matched elements
(1) Clone () Clone the matched DOM elements and select the cloned copies.
Description:
Clone all B elements (and select the cloned copies) and then forward them to all sections.
HTML code:
<B> Hello </B> <p>, how are you? </P>
JQuery code:
$ ("B"). clone (). prependTo ("p ");
Result:
<B> Hello </B> <p> <B> Hello </B>, how are you? </P>

(2) The clone (true) element and all its events are processed and the cloned copies are selected.

Description:
Create a button to copy itself, and its copy also has the same function.
HTML code:
<Button> Clone Me! </Button>
JQuery code:
$ ("Button"). click (function (){
$ (This). clone (true). insertAfter (this );
});
Finally, the sorting is complete. For more information, see Jquery1.3.
I hope this article will be useful to beginners.