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.
HtmlCode:
<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> <p> <B> cruel </B> </P> <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> <p> <B> cruel </B> </P> <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.