jquery Learning notes jquery's DOM operations _jquery

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.