jquery Brief Dom Operation

Text Dom

Gets the label $ (selection).

Create a Label object for $ ("label"), since all the jquery objects are returned. Ability to call chains (regardless of jquery API return jquery object)

Insert tag inside insert
1.append (CONTENT|FN)

Overview
Appends content to each matching element.

This action is similar to running the AppendChild method on the specified element, adding them to the document.

Number of references
Contentstring, Element, jQueryV1.0

Content to append to the target

function (index, HTML) FunctionV1.4

Returns an HTML string that is appended to the inside of each matching element.

Accept two of the parameters. The index parameter is the indexed value of the object in this collection, and the HTML reference is the original HTML value of the object.

Demo sample

Descriptive narrative: Append some HTML tags to all the 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) return value: JQuery appends all matching elements to a specified set of element elements.

As a matter of fact. Using this method is reversed by the normal $ (A). Append (b) operation, that is, instead of appending B to a, append a to B.

In the jquery 1.3.2, AppendTo, Prependto, InsertBefore, InsertAfter, and ReplaceAll are a destructive operation, and the return value is the entire appended content, not just the previously selected element. Therefore, to select previously selected elements, you need to use the end () method, see example Two.

Number of references
Contentstring

Content to be appended

Demo sample

Descriptive narrative: 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>

Description: New paragraph append div plus a class

HTML Code:
<div></div><div></div>
jQuery Code :
$ ("<p/>")
. AppendTo ("div")
. addclass ("test")
. End ()
. addclass ("Test2");
Results:
<div><p class= "Test Test2" ></p></div>
<div><p class= "Test" ></p></div>

3.prepend (CONTENT|FN)

Prepend (content)
Forward content to each matched element.

This is the best way to insert content at the beginning of all matching elements.

Number of references
Contentstring, Element, jQueryV1.0

Content to insert into the inner front of the target element

function (index, HTML) FunctionV1.4

Returns an HTML string that is appended to the inside of each matching element. Accept two of the parameters. The index parameter is the indexed value of the object in this collection, and the HTML reference is the original HTML value of the object.

Demo Sample Description: Put some HTML markup code in front of 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>]

Descriptive narration: Placing a DOM element in front of all paragraphs

HTML Code:
<p>i would like to say: </p>
<p>i would like to say: </p>
<b class= "foo" >Hello</b>
<b class= "foo" >good bye</b>
JQuery Code:
$ ("P"). Prepend ($ (". Foo") [0]);
Results:
<p><b class= "foo" >hello</b>i would like to say: </p>
<p><b class= "foo" >hello</b>i would like to say: </p>
<b class= "foo" >good bye</b>

Descriptive narrative: A jquery object (similar to an array of DOM elements) is placed in the entire paragraph.

HTML Code:
<p>i would like to say: </p><b>Hello</b>
JQuery Code:
$ ("P"). Prepend ($ ("B"));
Results:
<p><b>hello</b>i would like to say: </p>

4.prependTo (content)

return value: jqueryprependto (content)

Overview
Put all matching elements in front of the set of element elements that are also specified.

As a matter of fact. The use of this method is reversed by the normal $ (A). Prepend (b) operation, that is, the B is not pre-placed into A. Instead, place a in front of B.

In jquery 1.3.2, AppendTo, Prependto, InsertBefore, InsertAfter, and ReplaceAll have become a destructive operation, and to select previously selected elements, use the end () method to see Example two of the AppendTo method.

Number of references
Contentstring

jquery expression for matching elements

Demo Sample Description: 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>

External insert
1..after (CONTENT|FN)

After (CONTENT|FN)

Inserts the content after each matching element.

Number of references
Contentstring, Element, jQueryV1.0

Content inserted after each target

functionFunctionV1.4

The function must return an HTML string.

Demo Sample Description: Insert some HTML markup 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>

Descriptive narrative: Inserts a DOM element after the entire paragraph.

HTML Code:
<b id= "foo" >hello</b><p>i would like to say: </p>
JQuery Code:
$ ("P"). After ($ ("#foo") [0]);
Results:
<p>i would like to say: </p><b id= "foo" >Hello</b>

Descriptive narrative: Insert a jquery object (similar to an array of DOM elements) after all the paragraphs.

HTML Code:
<b>hello</b><p>i would like to say: </p>
JQuery Code:
$ ("P"). After ($ ("B"));
Results:
<p>i would like to say: </p><b>Hello</b>

2.before (CONTENT|FN) return value: JQuery inserts the content before each matching element.

Number of references
Contentstring, Element, jQueryV1.0

Content inserted after each target

functionFunctionV1.4

The function must return an HTML string.

Demo Sample Description: Insert 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>]

Descriptive narrative: Insert an element before the entire paragraph.

HTML Code:
<p>i would like to say: </p><b id= "foo" >Hello</b>
JQuery Code:
$ ("P"). Before ($ ("#foo") [0]);
Results:
<b id= "foo" >hello</b><p>i would like to say: </p>

Descriptive narrative: Insert a jquery object (similar to an array of DOM elements) before all the paragraphs.

HTML Code:
<p>i would like to say: </p><b>Hello</b>
JQuery Code:
$ ("P"). Before ($ ("B"));
Results:
<b>hello</b><p>i would like to say: </p>

3.insertAfter (content) return value: JQuery inserts all matching elements into the back of a collection of element elements that are also specified.

In fact, using this method reverses the normal $ (A). After (b) operation, that is, instead of inserting b behind a, insert a into the back of B.

In jquery 1.3.2, AppendTo, Prependto, InsertBefore, InsertAfter, and ReplaceAll have become a destructive operation, and to select previously selected elements, use the end () method to see Example two of the AppendTo method.

Number of references
contentStringV1.0

jquery expression for matching elements

Demo Sample Description: Insert all the paragraphs behind an element. With $ ("#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 (content) return value: JQuery inserts all matching elements into the front of a collection of element elements that also have one, specified.

In fact, using this method is reversed by the normal $ (A). Before (b) operation, that is, the B is not inserted in front of a. Instead, insert a into front of B.

In jquery 1.3.2, AppendTo, Prependto, InsertBefore, InsertAfter, and ReplaceAll have become a destructive operation to select previously selected elements. You need to use the end () method to see example two of the AppendTo method.

Number of references
contentStringV1.0

jquery expression for matching elements

Demo Sample Description: Insert 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>

Delete a label
1.empty () return value: JQuery deletes all child nodes in the matching element collection.

Demo Sample Description: Delete the child elements of all paragraphs (including text nodes)

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.

This method does not remove the matching elements from the jquery object, so that the matching elements can be used in the future. Except that the element itself is preserved, other instances of binding events, additional data, and so on, will be removed.

Parameter Expr String

jquery expression for filtering elements

Demo Sample Description: Delete all the paragraphs from the DOM

HTML Code:
<p>Hello</p> How is <p>you?</p>
JQuery Code:
$ ("P"). Remove ();
Results:
How is

Descriptive narrative: Deleting a paragraph with a Hello class from the DOM

HTML Code:
<p class= "Hello" >Hello</p> how is <p>you?</p>
JQuery Code:
$ ("P"). Remove (". Hello");
Results:
How is <p>you?

</p>

3.detach ([expr]) return value: JQuery detach ([expr])

Removes all matching elements from the DOM.

This method does not remove the matching elements from the jquery object, so that the matching elements can be used in the future. Unlike the Remove (). All bound events, attached data, and so on will be preserved.

Number of references
Expr String The jquery expression used to filter elements

Demo Sample Description: Delete all the paragraphs from the DOM

HTML Code:
<p>Hello</p> How is <p>you?</p>
JQuery Code:
$ ("P"). Detach ();
Results:
How is

Descriptive narrative: Deleting a paragraph with a Hello class from the DOM

HTML Code:
<p class= "Hello" >Hello</p> how is <p>you?</p>
JQuery Code:
$ ("P"). Detach (". Hello");
Results:
How is <p>you?</p>

Get and add tags

attr (NAME|PROPERTIES|KEY,VALUE|FN)

Sets or returns the property value of the selected element.

Number of references
Name String property names

Properties Map as the property's name/value pair Object

Key,value String, the Object property name. Property value

Key,function (index, attr) string,function

1: Property name.

2: A function that returns the value of the property, the first parameter is the index value of the current element, and the second parameter is the original property value.

Demo sample

Number of references name

Descriptive narrative: Returns the SRC attribute value of all images in the document.

JQuery Code:
$ ("img"). attr ("src");

Number of parameters Properties

Descriptive narrative: Set the SRC and ALT attributes for all images.

JQuery Code:
$ ("img"). attr ({src: "test.jpg", alt: "Test Image"});

References Key,value descriptive narrative:

Set the SRC attribute for all images.

JQuery Code:
$ ("img"). attr ("src", "test.jpg");

Parameter key, the callback function describes the description:

Set the value of the SRC attribute to the value of the title property.

JQuery Code:
$ ("img"). attr ("title", function () {return this.src});

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

jquery Brief Dom Operation