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

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)