Jquery Study Notes-dom operations on jquery

I. node operations

1. Find nodes:

VaR $ var_1 = $ ("htmltype"); // obtain all htmltype nodes.

For example, VAR $ ul_1 = $ ("Ul ");

2. Create and append a node:

VaR $ var_1 = $ ("

$ ("Htmltype2"). append ($ var_1); // inserts a node into all htmltype2 nodes.

Example: var $ li_1 = $ ("<li Title =" title1 "> banana </LI> ");

$ ("Ul"). append ($ li_1 );

The following insert methods are available:

• Append () append B to a (all a elements, similar to the following)
• Appendto (): append A to B.
• Prepend () before appending B to the content inside
• Prependto () before appending A to B
• After () append B after
• Insertafter () append B before
• Before () append B before
• Insertbefore () append B after

Example: $ ("Ul"). append ("<li> Hello </LI>"); // append Li inside ul

$ ("<Li> Hello </LI>"). appendto ("Ul"); // append the Li

3. delete a node

• Remove () delete this element
• Empty () clears nodes, including child nodes

Example: $ ("Ul Li: eq [1]"). Remove (); // obtain the second li In UL and delete it

$ ("Ul li"). Remove ("Li [Title =" pineapple "]"); // Delete the element of the Li element attribute Title = "pineapple" In UL

4. Copy a node

• Clone (); // copy the current node

Example: $ ("Ul Li: eq [1]"). clone (). appento ("Ul"); // copy and append it to Ul. Only copying is not displayed.

5. Replace nodes

• Replacewith (); // replace B with all
• Replaceall (); // replace a with all B

6. Package nodes

• Warpall (); // wrap a with B
• Warpinner (); // wrap the content of a with B

Ii. Attribute operations

1. Get and set attributes

VaR $ var_1 = $ ("p"); // obtain the node P

VaR $ P_1 = $ var_1.attr ("title"); // obtain the title attribute of node p.

VaR $ P_2 = $ var_1.attr ("title", "hello"); // set the title attribute of node P to "hello"

2. Delete attributes

$ ("P"). removeattr ("title"); // Delete the title attribute of node P

3. style operations

1. Get and set styles

VaR $ var_class = $ ("p"). ATTR ("class"); // obtain the class attribute of node p.

$ ("P"). ATTR ("class", "class1"); set the class attribute of node P to the style sheet class class1

2. append a style

• Addclass () Add a style to

Example: $ ("p"). addclass ("another"); Add the style sheet class another class to P

3. Remove a style

• Removeclass () Remove Class

4. Switch the style

• Toggleclass () switches the clss attribute class to a new class.

5. Determine whether a style exists

• Hasclass ()

Iv. Content operations

• HTML () This method obtains the content of the HTML element, such as VAR var1 =1 ("p" ).html (); // obtains the content of the P element.
• Text () gets or sets the content of an HTML element.
• Val () is used to obtain the value of an element.
• Children () obtains all child nodes of the HTML element.
• Next () The peer node next to the HTML Element
• Prev () gets the peer node next to the HTML Element
• Siblings () obtains peer nodes adjacent to HTML elements

5. CSS-DOM Technology

• CSS ("attribute", "value") sets the value of an attribute of element CSS, such as: $ ("p" ).css ("color", "Red "); // set the CSS attribute of P {color: red ;}