Dom operations in jquery User Manual (3)

Attribute
We use Scr = "5.jpg"/> as an example, you can use VaR in the original Javascript
O = document. getelementbyid ('A') is the Node object whose ID is. SRC to get or modify the SCR attribute of the node. In jquery, $ ("# A") will get the jquery object [

], Then you can use many methods provided by jquery to perform operations, such as $ ("# A" ).scr()5.will get 5.jpg, $ ("# "). SCR ("1.jpg") changes the src attribute of this object to 1, JPG. The following describes many jquery methods provided by jquery to help you quickly operate DOM objects.
Herf ()
Herf (VAL)
Description: operations on the property herf of jquery objects.
Example:
Before jquery is executed

<A href = "1.htm" id =" test"
Onclick = "JQ ()"> jquery </a>

JqueryCodeAnd functions:

Function JQ (){
 
Alert ($ ("# test"). href ());
 
$ ("# Test"). href ("2.html ");
}

Run: the dialog box is displayed, indicating that the URL with the id_test_id is changed to 2.html. When the dialog box is displayed, the URL is directed to 2.html.
Similarly, jquery also provides other similar methods. You can test them separately:
Herf () herf (VAL)
HTML () HTML (VAL) ID (VAL) name (VAL) REL () REL
(VAL)
SRC () SRC (VAL) Title (VAL)
Val () Val (VAL)

Operation
After (HTML) inserts an HTML segment after matching elements

<A href = "#" id = "test"
Onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){

$ ("# Test"). After ("<B> Hello </B> ");
}

After execution, it is equivalent:

<A href = "#" id = "test"
Onclick = "JQ ()"> jquery </a> <B> Hello </B>

After (ELEM) after (elems) inserts the specified object ELEM or the object group elems into

<P id = "test"> after </P> <
Href = "#" onclick = "JQ ()"> jquery </a>

Jquery code and functions

Function JQ (){
 
$ ("A"). After ($ ("# test "));
}

After execution, it is equivalent

<A href = "#"
Onclick = "JQ ()"> jquery </a> <p
Id = "test"> after </P>

Append (HTML) is inside the matching element, and the specified HTML is inserted at the end

<A href = "#" id = "test"
Onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){
 
$ ("# Test"). append ("<B> Hello </B> ");
}

After execution, it is equivalent

<A href = "#"
Onclick = "JQ ()"> jquery <B> Hello </B> </a>

Similarly, append (ELEM) append (elems)
Before (HTML) before (ELEM)
Before (elems) Please refer to the append and after parties to test and understand!

Appendto (expr) is opposite to append (ELEM)

<P id = "test"> after </P> <
Href = "#" onclick = "JQ ()"> jquery </a>

Jquery code and functions

Function JQ (){
$ ("A"). appendto
($ ("# Test "));
}

After execution, it is equivalent

<P id = "test"> after <a href = "#"
Onclick = "JQ ()"> jquery </a> </P>

Clone ()
Copy A jquery object

<P id = "test"> after </P> <
Href = "#" onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){
 
$ ("# Test"). Clone (). appendto ($ (""));
}

Copy $ ("# test") and insert it to <A>.

<P id = "test"> after </P> <
Href = "#" onclick = "JQ ()"> jquery </a> <p
Id = "test"> after </P>

Empty () deletes all child nodes of the matching object

<Div
Id = "test">
<Span> span </span>
<P> after </P>
</Div>
<
Href = "#" onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){

$ ("# Test"). Empty ();
}

After execution, it is equivalent

<Div id = "test"> </div> <
Href = "#" onclick = "JQ ()"> jquery </a>

Insertafter (expr)
Insertbefore (expr)
 
According to the official explanation, I have several simple tests. insertafter (expr) is equivalent to before (ELEM), and insertbefore (expr) is equivalent
(ELEM)

Prepend (HTML) prepend (ELEM) prepend (elems)
Insert an element inside the Matching Element and start to insert it.
The following example distinguishes append (ELEM) appendto (expr) prepend (ELEM)

<P
Id = "A"> P </P>
<Div> Div </div>

Run $ ("# A"). append ($ ("Div "))
Is equivalent

<P
Id = "A">
P
<Div> Div </div>
</P>

Run $ ("# A"). appendto ($ ("Div "))
Is equivalent

<Div>
Div
<P
Id = "A"> P </P>
</Div>

Run $ ("# A"). prepend
($ ("Div") is equivalent

<P id = "A">
 
<Div> Div </div>
 
P
</P>

Remove () delete matching object
Note that empty () and empty () are removed from the child node of the matching object, remove (), and remove the matching object.

Wrap (HTM)
Include the matching object in the given HTML code

<P> test paragraph. </P> <
Href = "#" onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){

$ ("P"). Wrap ("<Div class = 'wrapp'> </div> ");

}

After execution, it is equivalent

<Div class = 'wrapp'> <p> Test
Paragraph. </P> </div>

Wrap (ELEM) includes the matching object in the given object

<P> test paragraph. </P> <Div
Id = "content"> </div>
<A href = "#"
Onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){
$ ("P"). Wrap (
Document. getelementbyid ('content '));
}

After execution, it is equivalent

<Div id = "content"> <p> Test
Paragraph. </P> </div>

Traversal and combination

Add (expr) attaches a jquery object that meets the specified expression on the basis of the original object

<P> Hello </P> <p> <span> hello
Again </span> </P>
<A href = "#"
Onclick = "JQ ()"> jquery </a>

Jquery code and functions:

Function JQ (){
VaR
F = $ ("p"). Add ("span ");
For (VAR I = 0; I <$ (f). Size (); I ++ ){
 
Alert(%(f%.eq( I %.html ());}
}

Run $ ("p") to obtain the <p> matched object. There are two objects. Add ("span") adds a match to ("p"). <Span
> Object. There are three objects in total. From the preceding function running result, we can see $ ("p "). add ("span") is a collection of three objects: [<p> Hello </P>], [<p> <span> hello
Again </span> </P>], [<span> hello
Again </span>].

Add (EL) attaches the specified Dom element to the matching object.

$ ("P"). Add (document. getelementbyid (""));

Add (ELS) attaches a specified set of Objects Based on the matching objects. Els is an array.

<P> Hello </P> <p> <span> hello
Again </span> </P>

Jquery code and functions:

Function JQ (){
VaR
F = $ ("p"). Add ([document. getelementbyid ("A"), document. getelementbyid ("B")])
 
For (VAR I = 0; I <$ (f). Size (); I ++ ){

Alert(%(f%.eq( I %.html ());}
}

Note that Els is an array [
] Cannot be missed.

Ancestors () is based on the content of the parent node matching the node as an object, except for the root node (a bit difficult to understand, let's look at the following example to understand)

<Div>

<P> one </P>
<Span>
<U> two </u>

</Span>
</Div>

Jquery code and functions:

Function JQ (){
VaR F =
$ ("U"). ancestors ();
For (VAR I = 0; I <$ (f). Size (); I ++ ){

Alert(%(f%.eq( I %.html ());}
}

The first object is the content of the <u> parent node ,[
<U> two </u>
]
The first object is the content of the parent node (DIV) of the <u> parent node, [<p> one </P> <span> <u> two </u> </span>
]
Generally, a document includes <body> and <HTML>, and so on.

Ancestors
(Expr) obtains the object conforming to the expression based on ancestors ()
In the above examples, change var F to VaR F =
$ ("U"). ancestors ("Div"), only one object is returned:

[
<P> one </P> <span> <u> two </u> </span>]

Children () returns the Child point of the matched object.

<P> one </P>
<Div
Id = "ch">
 
<Span> two </span>
</Div>

Jquery code and functions:

Function JQ (){

Alert ($ ("# Ch" cmd.children(cmd.html ());
}

$ ("# Ch"). Children () Get the object [
<Span> two </span>
The result of .html () is "two"

Children (expr) returns the nodes that match the expression in the Child mediation of the matching object

<Div id = "ch">

<Span> two </span>
<Span
Id = "SP"> three </span>
</Div>

Jquery code and functions

Function JQ (){

Alert ($ ("# Ch" cmd.children(??sp=}.html ());
}

$ ("# Ch"). Children () Get the object [<span> two </span> <Span
Id = "SP"> three </span>].
$ ("# Ch"). Children ("# SP") filter to obtain [<Span
Id = "SP"> three </span>]

Parent () parent
(Expr) that matches the parent node of the object. Refer to children for help

Contains (STR) returns the matching object containing the string 'str '.

<P> This is just
Test. </P> <p> so is this </P>

Jquery code and functions:

Function JQ (){

Alert ($ ("p"). Contains ("test" example .html ());
}

$ ("P") gets two objects, and the string "test" contains only one. All $ ("p"). Contains ("test") returns
[<P> This is just a test. </P>]

End ()
End the operation and return the status before the operation on the Matching Element list.

Filter (expr) filter (exprs) filters realistic matching objects that match expressions
Exprs is an array. Note that "[]" is added.

<P> Hello </P> <p> hello
Again </P> <P class = "selected"> and
Again </P>

Jquery code and functions:

Function JQ (){

Alert ($ ("p"). Filter (". Selected" example .html ())
}

$ ("P") gets three objects. $ ("p"). Contains ("test") returns only the objects whose class is selected.

Find (expr) continues searching for objects that match the expression in the matched object

<P> Hello </P> <p
Id = "A"> hello again </P> <P class = "selected"> and
Again </P>

Query code and functions:

Function JQ (){

Alert ($ ("p"). Find ("# A" example .html ())
}

Find the object with ID a in the $ ("p") object.

Is (expr) to determine whether the object meets the expression, return the boolen Value

<P> Hello </P> <p
Id = "A"> hello again </P> <P class = "selected"> and
Again </P>

Query code and functions:

Function JQ (){

Alert ($ ("# A"). Is ("p "));
}

At $ ("#
") Whether it meets the jquery expression.
You can use $ ("# A"). Is ("Div"); ("# A"). Is ("# A") to test it.

Next () Next (expr) returns the remaining sibling nodes of the matching object

<P> Hello </P> <p
Id = "A"> hello again </P> <P class = "selected"> and
Again </P>

Jquery code and functions

Function JQ (){

Alert ($ ("p" ).next().html ());

Alert ($ ("p"). Next (". Selected" example .html ());
}

$ ("P"). Next () returns
[<P id = "A"> hello again </P>, <P class = "selected"> and
Again </P>] Two Objects
$ ("P"). Next (". Selected) returns only [<p
Class = "selected"> and again </P>] an object

Prev () Prev
(Expr) for more information, see next.

Not (EL) Not (expr) removes matching objects from jquery objects. El is a DOM element and expr is a jquery expression.

<P> one </P> <p
Id = "A"> two </P>
<A href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions:

Function JS (){
 
Alert ($ ("p"). Not (document. getelementbyid ("A" pipeline .html ());
 
Alert ($ ("p" ).not(%%a%%}.html ());
}

$ ("P") is composed of two objects. The excluded objects are [<p> one </P>
]

Siblings () siblings (expr) jquery matches other sibling objects in the object

<P> one </P>
<Div>
<P
Id = "A"> two </P>
</Div>
<A href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions:

Function JS (){

Alert ($ ("Div" ).siblings().eq(1).html ());
}

$ ("Div"). siblings () returns two objects: [<p> one </P>, <
Href = "#" onclick = "JS ()"> jquery </a>
]
Alert ($ ("Div"). siblings ("A") returns an object [<a href = "#"
Onclick = "JS ()"> jquery </a>]

Others
Addclass (class)
Add a class style for the matching object
Removeclass (class) removes a class style of the First Matching object

ATTR
(Name) Get the attributes of the First Matching object

<a href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions:

Function JS (){
 
Alert ($ ("IMG"). ATTR ("src "));
}

Return to test.jpg

ATTR
(PROP) is the setting attribute of the First Matching object, and prop is the hash object, used to add multiple attributes for an object in batches.

<a href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions:

Function JS (){
$ ("IMG"). ATTR ({SRC:
"Test.jpg", alt: "Test image "});
}

The running result is equivalent

Image "/>

ATTR (Key, value) is the setting attribute of the First Matching object, key is the attribute name, value is the attribute value

<a href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions

Function JS (){
 
$ ("IMG" ).attr({src},{test.jpg ");
}

The running result is equivalent to Src = "test.jpg"/>

Removeattr (name) removes an attribute of the First Matching object

<a href = "#"
Onclick = "JS ()"> jquery </a>

Jquery code and functions:

Function JS (){
$ ("IMG ").
Removeattr ("Alt ");
}

The running result is equivalent to

Toggleclass
(Class) adds a style to the current object. If it is not the current object, the style is removed and the processed object is returned.

<P> Hello </P> <p
Class = "selected"> hello again </P> <a href = "#"
Onclick = "JS ()"> jquery </a>

$ ("P") returns an object.
[<P> Hello </P>, <P class = "selected"> hello again </P>
]
$ ("P"). The result of toggleclass ("selected") is the real return object [<p
Class = "selected"> Hello </P>, <p> hello again </P>]