Document Processing for Jquery basic learning notes

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.