jquery's DOM node operations

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);

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 Tutorial-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;}

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

removing events
. unbind (Type [, data]);

$ (function () {
$ (#id1). bind ("click", Fn1=function () {Alert ("Event 1");})

. bind ("click", Fn2=function () {Alert ("Event 2");});
. bind ("click", Fn3=function () {Alert ("Event 3");});
});

$ ("#id2"). Click (function () {
$ (#id1). Unbind ("click", fn2);//delete fn2 Click event
});