In this section, we will continue to learn about Jquery: document processing. Document processing mainly involves adding, deleting, copying, and replacing HTML elements. 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:
I wowould like to say:
JQuery code:
$ ("P"). append ("
Hello");
Result:
[
I wowould like to say:Hello
]
(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:
I wowould like to say:
JQuery code:
$ ("P"). appendTo ("p ");
Result:
I wowould like to say:
I wowould like to say:
(3) prepend (content) pre-content to each Matching Element
Description:
Add some HTML code to all sections.
HTML code:
I wowould like to say:
JQuery code:
$ ("P"). prepend ("
Hello");
Result:
[
HelloI wowould like to say:
]
(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:
I wowould like to say:
JQuery code:
$ ("P"). prependTo ("# foo ");
Result:
I wowould like to say:
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:
I wowould like to say:
JQuery code:
$ ("P"). after ("
Hello");
Result:
I wowould like to say:
Hello
(2) before () insert content before each Matching Element
Description:
Insert HTML code before all paragraphs.
HTML code:
I wowould like to say:
JQuery code:
$ ("P"). before ("
Hello");
Result:
[
Hello
I wowould like to say:
]
(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:
I wowould like to say:
Hello
JQuery code:
$ ("P"). insertAfter ("# foo ");
Result:
Hello
I wowould like to say:
(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:
Hello
I wowould like to say:
JQuery code:
$ ("P"). insertBefore ("# foo ");
Result:
I wowould like to say:
Hello
3. Package: Pack some elements
(1) wrap (html) wraps all matching elements with structured tags of other elements
Description:
Wrap all paragraphs with a new p
HTML code:
Test Paragraph.
JQuery code:
$ ("P"). wrap ("
");
Result:
Test Paragraph.
(2) wrap (elem) wraps all matching elements with structured tags of other elements
Description:
Enclose each paragraph with p whose ID is "content"
HTML code:
Test Paragraph.
JQuery code:
$ ("P"). wrap (document. getElementById ('content '));
Result:
Test Paragraph.
(3) wrapAll (html) wraps all matching elements with a single element.
Description:
Wrap all paragraphs with a generated p
HTML code:
Hello
Cruel
World
JQuery code:
$ ("P"). wrapAll ("
");
Result:
Hello
Cruel
World
(4) wrapAll (elem) wraps all matching elements with a single element.
Description:
Wrap all paragraphs with a generated p
HTML code:
Hello
Cruel
World
JQuery code:
$ ("P"). wrapAll (document. createElement ("p "));
Result:
Hello
Cruel
World
(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:
Hello
Cruel
World
JQuery code:
$ ("P"). wrapInner ("
");
Result:
Hello
Cruel
World
(6) wrapInner (elem)
Description:
Bold each sub-content in all paragraphs
HTML code:
Hello
Cruel
World
JQuery code:
$ ("P"). wrapInner (document. createElement ("B "));
Result:
Hello
Cruel
World
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:
Hello
Cruel
World
JQuery code:
$ ("P"). replaceWith ("
Paragraph.");
Result:
Paragraph.
Paragraph.
Paragraph.
(2) repalceAll (selector) replaces all elements matched by selector with matched elements.
Description:
Replace all paragraph markup with bold Markup
HTML code:
Hello
Cruel
World
JQuery code:
$ ("
Paragraph."). ReplaceAll (" p ");
Result:
Paragraph.
Paragraph.
Paragraph.
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:
Hello, Person and person
JQuery code:
$ ("P"). empty ();
Result:
(2) remove ([expr]) removes all matching elements from the DOM
Description:
Delete all paragraphs from the DOM
HTML code:
Hello
How are
You?
JQuery code:
$ ("P"). remove ();
Result:
How are
Description:
Delete a paragraph with the hello class from the DOM
HTML code:
Hello
How are
You?
JQuery code:
$ ("P"). remove (". hello ");
Result:
How are
You?
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:
Hello
, How are you?
JQuery code:
$ ("B"). clone (). prependTo ("p ");
Result:
Hello
Hello, How are you?
(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:
Clone Me!
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.
