The DOM operation of jquery

The DOM operation of jquery is similar to the DOM operation of JavaScript, but it is much simpler and adds some very useful methods.

When you create a node, the DOM chooses to create the element node first and then inserts the content into the node after inserting and innerhtml the inserted text several times.

The creation of jquery nodes is simple enough to write HTML code directly within $ ()

$ ("<div class=" name> learning jquery</div> ") so you can create a node and this node has its own classname

jquery insertion nodes are used by append () and appendto

Append () is similar to the AppendChild method where you place the node that you want to insert within the node () that is inserted within the specified nodes

$ ("div"). Append ($ ("<span>haha</span>") to insert a SPAN element in the element node of a div

The AppendTo () method is the opposite of inserting the node into the specified element node () to place the specified node inserted in

$ ("<span>aa</span>"). AppendTo ($ ("div")) and above content equivalent two methods content function same only location and content is different

Append () and appendto () are the positions of the last child element that inserts the element into the specified element node, which is equivalent to placing the element on the last of the child nodes of the specified element node.

The After () and before () methods are two of the nodes that are used for sibling nodes that are inserted by both methods are sibling nodes of the specified node

The content that you want to insert in After () () parentheses can be either a jquery object or an HTML code, so the element node specified earlier

Inserts the bracketed content next to the specified element node immediately following the specified element node if there are other nodes behind the element node, move the back node back

The same is true of before. Just insert the content into the front of the specified element and be the same as the next

The content of these two methods can accept more than just HTML code or an array of DOM element elements

Prepend () and prependto are also insert nodes usage similar to the words append () and Appendto ()

Prepend () and prependto are the elements that are inserted into the specified element before the first child node of the specified element

InsertAfter () InsertBefore () is also similar to the syntax function of After () and before () is the same as just the content and location of the different

InsertAfter () and InsertBefore () put the content you want to insert in front of you and put the target content behind so that the target content does not accept multiple parameters

The empty () method is to remove all child nodes of the target example: $ ("ul"). Empty () This removes all LI nodes inside the UL but does not affect the UL node itself.

The removed child node is not only removed from the node element but also the text content is removed example:<div> how are you? <span> Friends </span></div>

$ ("div"). Empty () So the result is <div> how are you? </div>

Remove () Removes the node that not only removes the child node, but also removes the node itself, but remove can accept a parameter that is a selector

is to remove all node collections that match this selector and remove the events and data from those nodes.

$ ("div"). Remove (". Name") relative to the node that removes all the class values for the DIV node????? There are still questions to be perfected later

The return value of the Remove () method is the collection of all nodes that are removed

The detach () method, like remove, also removes the element node but retains the memory model of the removed element node so that the event and memory on the removed node can be saved

The return value of the detach () method is also the node that was removed if we call these removed nodes again, the events above them will not disappear directly to use

The Clone () method is a new approach to jquery by copying a node, that is, copying a clone node

The Clone () method can pass in a parameter true if the clone is a shallow clone if it does not pass in the parameter (true if the pass-in parameter indicates that the clone is a deep clone

Shallow clone: Clone structure deep clone: Clone structure Data and time node is obtained by shallow cloning then it will not have the event deep clone of the previous node will still have the previously bound event

The objects and arrays within the element data are not copied and will continue to be shared by the cloned element and the original element. Deep copy of all data, need to manually copy each one (not understood)

ReplaceWith () and ReplaceAll () are also a couple of different ways to function the same content and location

ReplaceWith () in parentheses is used to replace the node it functions on the node being replaced

ReplaceAll () The opposite parenthesis is replaced by the node action in parentheses used to replace the node can be used in the HTML structure

Wrap () method wrapping means wrapping a parent element within the specified element () into the specified element () to pass in the parent element (HTML structure) that you want to use for the package.

Because a parent element is not a grandparent element, the specified element is the child node of the wrapped content and not the descendant node

The Warp method also has a callback function that returns a return value that is HTML content and jquery content

Unwrap () method to delete a package keep internal structure just delete the parent element and do not need to pass in any parameters

The Wrapinner () method is to wrap a piece of HTML code for all its child nodes on all child nodes of the node

Also support callback function callback function return value should be a complete HTML code

Example: <div>p element 1 </div> <div>p element 2</div> $ ("div"). Warpinner ("<p></p>") The result is:

<div><p>p element 1</p></div> <div><p>p element 2</p></div>

The Children () method returns all child nodes (not descendants) that must be the first level of child nodes

Parameters that can be chosen to accept parameters that the selector returns is the child node that satisfies the selector content in all child nodes (first level) within the target

The Find () method returns all descendant nodes that contain parent-child nodes that must be passed the parameter parameter is the selector if all the child nodes are needed then pass in the wildcard character *

The Find () method does not find itself only looking for all child nodes

The selector context is implemented by the. Find () method, so that $ ('. Item-ii '). Find (' Li ') is equivalent to $ (' Li ', '. Item-ii ') (Locate the Li tag under the tag with the class name Item-ii). (not yet understood)

The parent () method only finds its own parent element and does not go to the ancestor element, etc. to find matches each parent element and also accepts selectors

The parents () method is similar but finds an up-looking lookup ancestor element that returns a collection that can accept a selector

The closest () method passes a selector parameter to a matching element, which is similar to the parents () method, which finds the ancestor element of the specified element, but finds the matching element that matches the selector and stops the lookup, starting with the current element.

The difference between parents () and closest ()

1. Starting position is different:. Closest starts at the current element. Parents starts with the parent element
2. The traversal targets are different:. Closest to find the specified target,. Parents traverses to the document root element, closest looks up until a matching stop is found, parents always finds the root element and joins the matching element to the collection
3. The result is different:. Closest returns a JQuery object that contains 0 or one element , parents returns a jquery object that contains 0 or more elements

The next () method looks for the next element (must be a sibling element) that is immediately behind each element in the specified collection of elements, which is the second direct sibling element also allows passing in a selector expression for filtering.

The DOM operation of jquery