The DOM node operation of jquery

I. Operation of the node

1. Find the node:

var $var _1=$ ("Htmltype"); The phrase is to get all the 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 the HTMLTYPE2 nodes

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

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

3. Delete a node

Remove () deletes 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 "]");//Remove elements of the LI element attribute title= "Pineapple" in UL

4. Copying nodes

Clone ();//Copy this node
Example: $ ("ul li:eq[1]"). Clone (). Appento ("ul");//Copy and append to UL, only copy is not displayed

5. Replacing nodes

ReplaceWith ();//replace B with all a
ReplaceAll ();//Replace A with all B
6. Parcel Nodes

Warpall ();//Package A with B
Warpinner ();//use B to package a content

Two. Property manipulation

1. Get and Set properties

var $var _1=$ ("P");//This sentence is 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 to "Hello"

2. Delete Attributes

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

Three. Style actions

1. Get and set styles

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

$ ("P"). attr ("Class", "Class1"); Set the Class property of node p to be the 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 () Remove class
4. Toggle Style

Toggleclass () toggle CLSS Attribute class to new class
5. Determine if a style exists

Hasclass ()
Four. Operation of the content

HTML () This method gets the contents of the HTML element, such as: Var var1=$ ("P"). html ();//get content within the 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 () Get the sibling node immediately before and after the HTML element?
Five. CSS Tutorial-dom Technology

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

There are several ways to insert the method:

Append () appends B to the inside of a (all a elements, similar to the following)
Appendto () append A to the B interior
Prepend () append B to the content within a
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 the FN2 click event
});

The DOM node operation of jquery