Juqery five documents process packages, replace, delete, and copy

Source: Internet
Author: User

Wrap (html)
Enclose all matched elements with the structured tags of other elements.
This packaging is most useful for inserting additional structured tags into a document and does not compromise the semantic quality of the original document.
The principle of this function is to check the first provided element (it is dynamically generated by the provided HTML Tag Code ), in the code structure, find the ancestor element at the top-this ancestor element is the wrapped element.

This function cannot be used when an element in the HTML Tag Code contains text. Therefore, if you want to add text, you should add it after the package is complete.

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.
Return Value
JQuery

Parameters
Html (String): HTML Tag code String, used to dynamically generate elements and wrap target elements

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Wrap (elem)
Wrap all matching elements with the structured tags of other elements.

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
Return Value
JQuery

Parameters
Elem (Element): DOM Element used to wrap the target Element

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
WrapAll (html)
Wrap all matching elements with a single element
This is different from '. wrap ()', and '. wrap ()' is wrapped once for each matching element.
This packaging is most useful for inserting additional structured tags into a document and does not compromise the semantic quality of the original document.

The principle of this function is to check the first provided element and find the top ancestor element in its code structure-this ancestor element is the packaging element.

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '. wrap ()' where each element in the matched set wocould get wrapped with an element.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Return Value
JQuery

Parameters
Html (String): TML marks the code String, which is used to dynamically generate elements and package target elements.

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
WrapAll (elem)
Wrap all matching elements with a single element
This is different from '. wrap ()', and '. wrap ()' is wrapped once for each matching element.

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '. wrap ()' where each element in the matched set wocould get wrapped with an element.
Return Value
JQuery

Parameters
Elem (Element): DOM Element used to wrap the target Element

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
WrapInner (html)
Wrap the child content (including text nodes) of each matching element in an HTML structure.
The principle of this function is to check the first provided element (it is dynamically generated by the provided HTML Tag Code ), in the code structure, find the ancestor element at the top-this ancestor element is the packaging element.

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. this works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Return Value
JQuery

Parameters
Html (String): HTML Tag code String, used to dynamically generate elements and package target elements

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
WrapInner (elem)
Wrap child content (including text nodes) of each Matching Element with DOM elements

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Return Value
JQuery

Parameters
Elem (Element): DOM Element used to wrap the target Element

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
ReplaceWith (content)
Replaces all matched elements with specified HTML or DOM elements.

--------------------------------------------------------------------------------

Replaces all matched elements with the specified HTML or DOM elements.
Return Value
JQuery

Parameters
Content (String, Element, jQuery): Used to replace matching elements

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
ReplaceAll (selector)
Replace all elements matched by selector with matched elements.

--------------------------------------------------------------------------------

Replaces the elements matched by the specified selector with the matched elements.
Return Value
JQuery

Parameters
Selector: used to find the element to be replaced

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Empty ()
Delete all child nodes in the matched element set.

--------------------------------------------------------------------------------

Remove all child nodes from the set of matched elements.
Return Value
JQuery

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Remove ([expr])
Removes all matched elements from the DOM.
This method does not delete matching elements from the jQuery object, so you can use these matching elements in the future.

--------------------------------------------------------------------------------

Removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Can be filtered with an optional expression.
Return Value
JQuery

Parameters
Expr (String): (optional) jQuery expression used to filter elements

Example
Delete all paragraphs from the DOM

HTML code:

<P> Hello </p> how are <p> you? </P>
JQuery code:

$ ("P"). remove ();
Result:

How are

--------------------------------------------------------------------------------

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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Clone ()
Clone the matched DOM elements and select the cloned copies.
This function is useful when you want to add copies of elements in the DOM document to other locations.

--------------------------------------------------------------------------------

Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the DOM.
Return Value
JQuery

Example
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>
Certificate -------------------------------------------------------------------------------------------------------------------------------------------------
Clone (true)
Elements and all their events are processed and the cloned copies are selected.
This function is useful when you want to add copies of elements in the DOM document to other locations.

--------------------------------------------------------------------------------

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
Return Value
JQuery

Parameters
True (Boolean): Set to true to process all events of the copied element.

Example
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 );
});

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.