Step-by-step learning jquery (v) Play with jquery node

DOM operations in JQuery

DOM (Document Object model-): A browser, platform, language-independent interface that makes it easy to access all the standard components in a page
Classification of DOM operations:
Dom Core:dom Core is not specifically intended for JavaScript, and can be used by any programming language that supports the DOM. Its use is not limited to Web pages, but can also be used to process any document written in markup language, for example: XML
HTML DOM: When scripting HTML files with JavaScript and Dom, there are many attributes that are specifically html-dom
Css-dom: For CSS operations, in JavaScript, Css-dom is used primarily to get and set various properties of a style object

1. Finding nodes

To find a node:
Find attribute nodes: Done with the jQuery selector.
ACTION attribute node: After finding the element you want, you can invoke the attr () method of the JQuery object to get its various property values
Manipulating text nodes: using the text () method

<span style= "FONT-SIZE:14PX;" >
2. Create a Node
Create node: The factory function using JQuery $ (): $ (HTML); Creates a DOM object from the incoming HTML tag string and wraps the DOM object back as a JQuery object.
Attention:
Dynamically created new element nodes are not automatically added to the document, but need to be inserted into the document using other methods;
When creating a single element, be aware of closing the label and using the standard XHTML format. For example, create a <p> element, you can use $ ("<p/>") or $ ("<p></p>"), but you cannot use $ ("<p>") or $ ("<P>")
The creation of the text node is to write the textual content directly when the element node is created; Creating an attribute node is also created when the element node is created
<span style= "FONT-SIZE:14PX;" >3. Inserting nodes
1. Creating HTML elements dynamically is not useful, and you need to insert the newly created node into the document, which becomes a child node of a node in the document

2.
The above method can not only insert the newly created DOM elements into the document, but also move the original DOM elements.
<span style= "FONT-SIZE:14PX;" >4. Delete a node
Remove (): Removes all matching elements from the DOM, and incoming parameters are used to filter elements based on jQuery expressions. When a node is removed with the Remove () method, all descendant nodes that the node contains are deleted at the same time. The return value of this method is a reference to the node that has been deleted.
Empty (): Empties the node – empties all descendant nodes (without attribute nodes) in the element.
<span style= "FONT-SIZE:14PX;" >5. Copying nodes
Clone (): Clones the matching DOM element, with the return value being the cloned copy. However, the new node being copied does not have any behavior at this time.
Clone (True): Copies the elements and also copies the events in the element
<span style= "FONT-SIZE:14PX;" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >6. Replacing nodes
ReplaceWith (): Replaces all matching elements with the specified HTML or DOM element
ReplaceAll (): Reversed ReplaceWith () method.
Note: If an event has been bound to the element before the replacement, the original binding event will disappear with the original element.
<span style= "FONT-SIZE:14PX;" >7. Parcel Nodes
Wrap (): Wraps the specified node with other tokens. This method is useful for inserting additional structured markup into a document without destroying the semantics of the original document.
Wrapall (): Wraps all matching elements with one element. The Wrap () method is to wrap all the elements individually.
Wrapinner (): Wraps the child content of each matching element (including the text node) with other structured tags.
<span style= "FONT-SIZE:14PX;" >

Step-by-step learning jquery (v) Play with jquery node