JavaScript jQuery-3 jquery Operation Dom (query, style action, traverse node, create insert Delete, replace, copy)

Source: Internet
Author: User
Tags prev

First, jquery operation Dom-query

HTML operations

-HTML (): Reads or modifies the HTML content of a node, similar to the innerHTML property in JavaScript

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/6C/wKiom1b-X2yxgKrTAABY4VoUGQs797.png "title=" Web.png "alt=" Wkiom1b-x2yxgkrtaaby4vougqs797.png "/>


Text manipulation

-Text (): Reads or modifies the text content of the node, similar to the Textcontent property in JavaScript

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/69/wKioL1b-YGzQICpsAABO-so1N_k641.png "title=" Web.png "alt=" Wkiol1b-ygzqicpsaabo-so1n_k641.png "/>


Value action

-Val (): Reads or modifies the value of a node, similar to value in JavaScript

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/6C/wKiom1b-YAbx_29iAABQJdCR9w0774.png "title=" Web.png "alt=" Wkiom1b-yabx_29iaabqjdcr9w0774.png "/>


Property manipulation

-attr (): Read or modify the properties of a node

-Removeattr (): Delete the properties of the node

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/6C/wKiom1b-YFKytNsvAACSvJYLtm4805.png "title=" Web.png "alt=" Wkiom1b-yfkytnsvaacsvjyltm4805.png "/>


Second, jquery operation Dom-style operation


Style actions

-attr ("Class", "") Gets and sets

-AddClass ("") Append Style

-Removeclass ("") Remove style

-Removeclass () Remove all styles

-Toggleclass ("") Toggle Style

-Hasclass ("") whether there is a style

-CSS ("") to read the values of CSS

-CSS ("", "") Set multiple styles


Third, jquery operation Dom-Traversal node


Traversing nodes

-Children ()/children (selector) Only consider direct child nodes

-Next ()/next (selector) Next sibling node

-Prev ()/prev (selector) previous sibling node

-Siblings ()/siblings (selector) Other brothers

-Find (selector) finds all descendants that satisfy the selector

-Parent () parents (no selectors)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/69/wKioL1b-YpjgxK51AAB75ZDqGhw499.png "title=" Web.png "alt=" Wkiol1b-ypjgxk51aab75zdqghw499.png "/>


Iv. jquery Operation Dom-Create, INSERT, delete


Creating a DOM Node

-JQuery uses the $ () factory function to create the node, passing the HTML code string to the $ () factory function

-JQuery allows the creation of element nodes, text nodes, and attribute nodes directly through HTML code strings

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/6C/wKiom1b-Yy2iZ_ZLAAB76XDX_qU383.png "title=" Web.png "alt=" Wkiom1b-yy2iz_zlaab76xdx_qu383.png "/>


Inserting a DOM node

-Internal Insertion Node

-Append () as the last child node added in

-prepend () added as the first child node

-External Insert Node

-After () as the next sibling node to add in

-Before () added as the previous sibling node

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/69/wKioL1b-ZHey_fV9AABSk5S8MOI701.png "title=" Web.png "alt=" Wkiol1b-zhey_fv9aabsk5s8moi701.png "/>


Delete DOM node

-Remove () Only consider direct child nodes

-Remove (selector) after positioning by selector

-Empty () empty node

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/69/wKioL1b-ZNjh-zYLAACVhpMk10U493.png "title=" Web.png "alt=" Wkiol1b-znjh-zylaacvhpmk10u493.png "/>


V. jquery Operation Dom-replace


Replace DOM node

-ReplaceWith (): Replaces all matching elements with the specified HTML or DOM element

-ReplaceAll (): Reversed ReplaceWith () method

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/69/wKioL1b-Y2SAOoeIAABpCAuM6AY233.png "title=" Web.png "alt=" Wkiol1b-y2saooeiaabpcaum6ay233.png "/>


Vi. jquery Operation Dom-replication


Copy DOM Nodes

-Clone ()

-Clone (TRUE): The replicated node also has behavior (event handling)

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/69/wKioL1b-YwShUHZwAACGEn32Tk0536.png "title=" Web.png "alt=" Wkiol1b-ywshuhzwaacgen32tk0536.png "/>



Summary: This chapter mainly describes the jquery operation Dom (query, style operations, traverse nodes, create insert Delete, replace, copy)


This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-3 jquery operation Dom (query, style action, traverse node, create insert Delete, replace, copy)

Related Article

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.