1, DOM operation classification
DOM operations fall into three categories:
- DOM Core: any programming language that supports DOM can use it, such as getElementById()
- HTML-DOM: used to process HTML documents, such as document forms
- CSS-DOM: used to operate CSS, such as element style. color=“green”
Tips:
JavaScript is used to manipulate (x)html documents. It supports all three types of DOM operations
2, DOM operations in jQuery
jQuery encapsulates DOM operations in JavaScript
DOM operations in jQuery:
- Style operation
- Content and Value operation
- Node operation
- Node attribute operation
- Node traversal
- CSS-DOM operation
Tips:
"Element" and "node" have similar meanings, and this chapter does not strictly distinguish them
1. Style operation
Set and get style values
css(name,value); //Set individual properties css({name:value,name:value,name:value...}); //Set multiple properties at the same time css(name) //Get property value
Append and remove styles
- Append style
$(selector).addClass(class); $(selector).addClass(class1,class2...classN);
- Remove style
$(selector).removeClass("class"); $(selector).removeClass("class1,class2...classN");
Toggle style
- toggleClass()
The process of style switching between addClass() and removeClass() is simulated
$(selector).toggleClass(class);
Determine whether the specified style is included
- hasClass() method to determine whether the specified style is included
$(selector).hasClass(class);
2. Content operation
- HTML code operation
- Label content operation
- Attribute value operation
HTML code operation
- html() can operate on HTML code, similar to innerHTML in JS
$("div.left").html();//Get the html code in the element $("div.left").html("<div class='content'>...</div>");//Set the html code in the element
Label content operation
- text() can pass or set the text content of the element
$("div.left").text();//Gets the text content in the element $("div.left").text("<div class='content'>...</div>");//Set the text content in the element
The difference between html() and text() methods
Attribute value operation
- The past value of the value () or value () attribute of the element can be set
$(this).val();//Gets the value of the value attribute of the element $(this).val(value);//Set the value of the value attribute of the element
3. Node operation
- Find node
- Create node
- Insert node
- Delete node
- Replace node
- Replication node
Create node element
The factory function $() is used to get or create nodes
- $(selector): get node through selector
- $(element): convert DOM node into jQuery node
- $(html): creates a jQuery node using an HTML string
Insert node
- Insert child node inside element
- Insert peer node outside element
Delete node
jQuery provides three ways to delete nodes
- remove(): deletes the entire node
- empty(): empty node contents
- detach(): delete the entire node and retain the binding event and additional data of the element
Replace node
replaceWith() and replaceAll() are used to replace a node
The relationship between the two is similar to append() and appendTo()
Replication node
clone() is used to copy a node
$(selector).clone([includeEvents]); //[includeEvents]: parameter true or flash, true copies event processing, and vice versa when flash
4. Attribute operation
- Get and set element attributes
- Delete element attribute
Get and set element attributes
attr() is used to get and set element attributes
$(selector).attr([name]);//Get property value $(selector).attr({[name1:value1]...[nameN:valueN]});//Set values for multiple properties
Delete element attribute
removeAttr() is used to delete element attributes
$(selector).removeAttr(name);
5. Node traversal
- Traversal of child elements
- Traverse peer elements
- Traversal of predecessor elements
- Other traversal methods
Traversal of child elements
The children() method can be used to get all the child elements of the element
Gets the child element of the element, but does not contain the child element of the child element
$(selector).children([expr]);
Traverse peer elements
jQuery can obtain all peer elements immediately after, immediately before, and before and after the element
Traverse predecessor elements
- parent(): get the parent element of the element
- parents(): the ancestor element of the element
Other traversal methods
- each(): Specifies the function to run for each matching element
$(selector).each(function(index,element)); //index: location of selector //Element: current element
- end(): ends the recent filtering operation in the current chain and restores the matching element set to its previous state
6. CSS-DOM operation
In addition to css(), there are also style operation methods for obtaining and setting element height, width, etc