Jquery Basic Learning Notes document processing _jquery

Mainly includes the following parts: (1) Inserts (2) The outer inserts (3) the wrapping (4) replaces (5) deletes (6) assigns the value. Then we'll start to look at it in detail.
1. Insert inside: Insert content into elements
(1) Append (content): Append to each matching element, append to the end of the element inside, such as
Describe:
Append some HTML tags to all paragraphs.
HTML Code:
<p>i would like to say: </p>
JQuery Code:
$ ("P"). Append ("<b>Hello</b>");
Results:
[<p>i would like to say: <b>Hello</b></p>]

(2) appendto (content) appends all matching elements to another specified set of element elements
Describe:
Append all paragraphs to an element with an ID value of foo.
HTML Code:
<p>i would like to say: </p>
<div></div><div></div>
JQuery Code:
$ ("P"). Appendto ("div");
Results:
<div><p>i would like to say: </p></div>
<div><p>i would like to say: </p></div>

(3) prepend (content) to each matching element of the internal front
Describe:
Forward some HTML markup code to all paragraphs.
HTML Code:
<p>i would like to say: </p>
JQuery Code:
$ ("P"). Prepend ("<b>Hello</b>");
Results:
[<p><b>hello</b>i would like to say: </p>]

(4) prepend () sets all matching elements forward to another, specified set of element elements.
Describe:
Append all paragraphs to an element with an ID value of foo.
HTML Code:
<p>i would like to say: </p><div id= "foo" ></div>
JQuery Code:
$ ("P"). Prependto ("#foo");
Results:
<div id= "foo" ><p>i would like to say: </p></div>

2. Insert inside: Insert content to outside of some elements
(1) after (content) inserts the content after each matching element.
Describe:
Insert some HTML tag code after all the paragraphs.
HTML Code:
<p>i would like to say: </p>
JQuery Code:
$ ("P"). After ("<b>Hello</b>");
Results:
<p>i would like to say: </p><b>Hello</b>

(2) before () inserts the content before each matching element
Describe:
Inserts some HTML markup code before all the paragraphs.
HTML Code:
<p>i would like to say: </p>
JQuery Code:
$ ("P"). Before ("<b>Hello</b>");
Results:
[<b>hello</b><p>i would like to say: </p>]
(3) InsertAfter inserts all matching elements behind another, specified set of element elements.
Describe:
Inserts all the paragraphs behind an element. and $ ("#foo"). After ("P") the same
HTML Code:
<p>i would like to say: </p><div id= "foo" >Hello</div>
JQuery Code:
$ ("P"). InsertAfter ("#foo");
Results:
<div id= "foo" >hello</div><p>i would like to say: </p>

(4) InsertBefore inserts all matching elements in front of another, specified set of element elements
Describe:
Inserts all the paragraphs before an element. Same as $ ("#foo"). Before ("P").
HTML Code:
<div id= "foo" >hello</div><p>i would like to say: </p>
JQuery Code:
$ ("P"). InsertBefore ("#foo");
Results:
<p>i would like to say: </p><div id= "foo" >Hello</div>



3. Parcel: Wrap up some elements
(1) Wrap (HTML) wraps all matching elements in a structured notation of other elements
Describe:
Wrap all the paragraphs in a newly created Div
HTML Code:
<p>test paragraph.</p>
JQuery Code:
$ ("P"). Wrap ("<div class= ' wrap ' ></div>");
Results:
<div class= "Wrap" ><p>test paragraph.</p></div>

(2) Wrap (Elem) wraps all matching elements in a structured notation of other elements
Describe:
Wrap each paragraph with a div with id "content"
HTML Code:
<p>test paragraph.</p><div id= "content" ></div>
JQuery Code:
$ ("P"). Wrap (document.getElementById (' content '));
Results:
<div id= "Content" ><p>test paragraph.</p></div><div id= "content" ></div>

(3) Wrapall (HTML) wraps all matching elements together with a single element
Describe:
Wrap all the paragraphs with a generated div
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("P"). Wrapall ("<div></div>");
Results:
<div><p>Hello</p><p>cruel</p><p>World</p></div>

(4) Wrapall (Elem) wraps all matching elements together with a single element
Describe:
Wrap all the paragraphs with a generated div
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("P"). Wrapall (Document.createelement ("div"));
Results:
<div><p>Hello</p><p>cruel</p><p>World</p></div>
(5) Wrapinner (HTML) wraps the child content of each matching element (including the text node) with an HTML structure
Describe:
Make each child in all paragraphs bold
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("P"). Wrapinner ("<b></b>");
Results:
<p><b>hello</b></p><p><b>cruel</b></p><p><b>world </b></p>
(6) Wrapinner (elem)
Describe:
Make each child in all paragraphs bold
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("P"). Wrapinner (Document.createelement ("B"));
Results:
<p><b>hello</b></p><p><b>cruel</b></p><p><b>world </b></p>
4. Replace: replace some HMTL or DOM elements with the established elements
(1) replacewith (content) replaces all matching elements with the specified HTML or DOM element
Describe:
Replace all the paragraph marks with the bold tags.
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("P"). ReplaceWith ("<b>paragraph. </b> ");
Results:
<b>paragraph. </b><b>paragraph. </b><b>paragraph. </b>
(2) Repalceall (selector) replaces all selector matching elements with matching elements.
Describe:
Replace all paragraph marks with bold marks
HTML Code:
<p>Hello</p><p>cruel</p><p>World</p>
JQuery Code:
$ ("<b>paragraph.") </b> "). ReplaceAll (" P ");
Results:
<b>paragraph. </b><b>paragraph. </b><b>paragraph. </b>

5, Delete: Delete the established elements
(1) empty () deletes all the child nodes in the matching set of elements.
Describe:
Delete all the child elements of the paragraph (including the text node)
HTML Code:
<p>hello, <span>Person</span> <a href= "#" >and person</a></p>
JQuery Code:
$ ("P"). empty ();
Results:
<p></p>
(2) remove ([expr]) removes all matching elements from the DOM
Describe:
Remove all paragraphs from the DOM
HTML Code:
<p>Hello</p> how are <p>you?</p>
JQuery Code:
$ ("P"). Remove ();
Results:
How are
Describe:
Remove 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");
Results:
How are <p>you?</p>
5, copy: Clone matching elements
(1) Clone () clones matching DOM elements and selects copies of these clones.
Describe:
Clone all B elements (and select copies of these clones), and then place them in front of all paragraphs.
HTML Code:
<b>hello</b><p&gt, how are you?</p>
JQuery Code:
$ ("B"). Clone (). Prependto ("P");
Results:
<b>hello</b><p><b>hello</b&gt, how are you?</p>

(2) The Clone (true) element is processed with all of its events and a copy of these clones is selected

Describe:
Create a button, he can copy himself, and his copy also has the same function.
HTML Code:
<button>clone me!</button>
JQuery Code:
$ ("button"). Click (function () {
$ (this). Clone (True)-InsertAfter (this);
});
Finally finished finishing. The above content reference and Jquery1.3 Chinese reference.
I hope this article is good for beginners.