jquery Learning notes jquery's DOM operations _jquery

The operation of a node

1. Find the node:

var $var _1=$ ("Htmltype"); The phrase is to get all htmltype nodes

such as: Var $ul _1=$ ("ul");

2. Create and APPEND nodes:

var $var _1=$ ("

$ ("Htmltype2"). Append ($var _1); The phrase is to insert the node into all HTMLTYPE2 nodes

Example: Var $li _1=$ ("<li title=" Title1 "> Banana </li>");

$ ("ul"). Append ($li _1);

There are several methods of inserting:

• Append () appends B to the inside of a (all the A elements, similar to the following)
• Appendto () append A to B internal
• Prepend () append B to the contents of a inside
• Prependto () append A to the content of B
• After () append B to a
• InsertAfter () append B before a
• Before () Append B before a
• InsertBefore () append b after a

Example: $ ("ul"). Append ("<li> hello </li>");//Add LI inside ul

$ ("<li> Hello </li>"). Appendto ("ul");//Add LI inside ul

3. Delete node

• Remove () Delete the element
• Empty () empties nodes, including descendant nodes

Example: $ ("ul li:eq[1]"). Remove (); Get the second Li in UL and delete

$ ("ul Li"). Remove ("li[title=" Pineapple "]")//delete ul li element attribute title= "Pineapple" element

4. Replication node

• Clone ();//Copy this node

Example: $ ("ul li:eq[1]"). Clone (). Appento ("ul");/copy and Append to UL, only copy is not shown

5. Replacement node

• ReplaceWith ()//replace B with all a
• ReplaceAll ()//Replace A with all B

6. Parcel Node

• Warpall ()//b parcel A
• Warpinner ()///content of parcel A with B

Two. Property action

1. Get and Set properties

var $var _1=$ ("P");//This sentence is to get node p

var $p _1= $var _1.attr ("title");//Get the Title property of node P

var $p _2= $var _1.attr ("title", "Hello");//Set node P's Title property for "Hello."

2. Delete Attributes

$ ("P"). Removeattr ("title");//Delete the Title property of node P

Three. Style operation

1. Getting and setting styles

var $var _class=$ ("P"). attr ("class");//Get the Class attribute of node P

$ ("P"). attr ("Class", "Class1"); Set node P's Class property to style sheet class Class1

2. Append style

• AddClass () Add style to a

Example: $ ("P"). AddClass ("another"); Add style sheet class another class to P

3. Remove Style

• Removeclass () Removal class

4. Toggle Style

• Toggleclass () Toggle Clss Property class to new class

5. Determine if a style exists

• Hasclass ()

Four. The operation of the content

• HTML () This method gets the contents of the HTML element, such as: Var var1=$ ("P"). HTML ()//get content within P element
• Text () Gets or sets the contents of an HTML element
• Val () Gets the value of the element
• Children () Gets all the child nodes of the HTML element
• Next () Gets the sibling node immediately after the HTML element
• Prev () Gets the sibling node immediately preceding the HTML element
• Siblings () Gets the sibling node immediately before and after the HTML element

Five. Css-dom Technology

• CSS ("Properties", "value") sets the value of an element CSS attribute, such as: $ ("P"). CSS ("Color", "red");//Set P's CSS property {color:red;}