Jquery learning notes (2) Dom operations

PHP Technology Exchange Group 170855791

Attribute settings

ATTR (attributename)
If there is only one parameter, only the first element attribute is returned if the attribute specified by the element is not returned. If the attribute is not returned, the undefined attribute is returned.
ATTR (attributename, value)

Set Attribute Value

 
1: $ ("Input [type = text]") ATTR ("Value","OK");
 

 
2: $ ("# Selected_text option: eq (1)"). ATTR ("Selected",True);
 

 
3: $ ("[Value = Radio2]: Radio"). ATTR ("Checked",True);
 

Removeattr (attributename)
Delete the attributename attribute

Create a node:
$ (HTML) can directly generate various nodes

 
1:VaR$ Li_1 = $ ("<Li> 1 </LI>");
 

 
2:VaR$ Li_2 = $ ("<Li> 2 </LI>");
 

Append ()
Append content to each Matching Element

 
1: $ ("Ul"). Append ($ li_1 );
 

 
2: $ ("Ul"). Append ("<Li> 2 </LI>");
 

Appendto ()

Unlike append (), insert and insert positions change
Prepend ()

Forward content to each Matching Element
Prependto ()

After (), insertafter ()
Insert content after each Matching Element

Before (), insertbefore ()

Delete a node:
Remove ()

 
1:/*
 

 
2: * after you use remove () to delete a node, its subnodes are also deleted.
 

 
3: * this method returns a reference pointing to the deleted node, which can still be used.
 

 
4 :*/
 

 
5: $ ("Ul Li: eq (1)"). Remove ();
 

 
6:// Remove () You can also delete the specified node by passing parameters:
 

7: $ ("Ul Li"). Remove ("Li [Title = text]");
 

Empty ()
Clears the node and deletes the child element.

Clone ()

Copy a node

Replacewith (), replaceall ()

Replace Node

Wrap ()

Package Elements
$ ("Strong"). Wrap ("<B> </B> ");
To include <strong> elements with <B> elements, warp () encapsulates each matching element separately.

Wrapall ()
Enclose matched elements under one element

Wrapinner ()
Put <B> in <strong>

Style Management
ATTR ()

Used to change a style
Addclass ()

Used to append a style
Removeclass (classname1 classname2)

Remove Style

Change style
Toggle ()
Toggleclass ()
If the class name exists, delete it; otherwise, add
$ ("P"). toggleclass ("another ")

Hasclass () = is ()
Determines whether a class exists and returns bool

Set and obtain HTML, text, and values
HTML ()XML is not supported
Similar to innerhtml (), if there is no parameter, the first HTML that matches the element is returned.Code$ ("# P" pai.html ();
You can also set the content of the element and pass the content to be set as a parameter to HTML () $ ("# P" ).html ("<strong> text </strong> ");
Text ()
Similar to innertext (), it can be used to read or set text content in a touch element.
Val ()
Obtains the current value of the First Matching Element.
At the same time, you can pass an array to Val to preset the select and checkbox options.

Traverse dom
Children ()

Returns the child element of the specified element, excluding the child element. You can pass in parameters to the child element to filter the child element.
$ ("Body"). Children (". Selected") Find the child element whose class is selected in the body.

Next ()
Obtains the next sibling element of the current element.
Nextall ()
Obtains all the same-level elements of the current element.

Prev ()
Obtains the previous same-level element of the current element.

Siblings ()
Obtains all the same-level elements of the current element. A filtering condition can be passed.

CSS-DOM operation
CSS ()

 
1: $ ("P"Developer.css ("Color");// Obtain the content color of the P element
 

 
2: $ ("P"Developer.css ("Color","Red")// Set the content color of the P element
 

 
3:// You can also set multiple CSS attributes:
 

4: $ ("P"Developer.css ({"Color":"Red","Font-size":"12px"});// The default value is pixel.
 

Opacity

Sets the transparency of elements.

 
1: $ ("P"Developer.css ("Opacity","0.5") Set to translucent
 

You can use the height attribute to obtain the height of an element.
You can also use height () to obtain or set the element height. The default unit is pixel.

The height obtained by CSS () is related to the style settings, while the height obtained by height () is the actual height of the element on the page.

 
1: $ ("P"Developer.css ("Height")
 

 
2: $ ("P"). Height ()
 

Offset ()
Obtains the relative offset of an element in the current window. The returned object contains two attributes: Top and left. Valid only for visible elements

Scrolltop () and scrollleft ()
Obtain the distance between the element's scroll bar from the top and the left. You can also set a parameter for them to control the position of the element's scroll bar.

 
1: $ ("Textarea"). Scrolltop (300 );
 

 
2: $ ("Textarea"). Scrollleft (100 );