1.DOM creating node and Node properties
The creation process is relatively simple and generally follows:-Create nodes (common: elements, attributes, and text)-add some properties of a node-added to the document
a little bit of the approach involved in the process:-Create element: document.createelement-Set Properties: setattribute-Add text: innerhtml-Join document: AppendChild
2.jquery node creation and handling of attributes
To Create an element node:There are several ways that you can get in touch later. The common thing is to give the structure of this node directly to the HTML tag string description, through the $ () function processing, $ ("HTML structure") $ ("<div></div>")
Create as this node:Similar to creating element nodes, you can directly describe the contents of the text as a $ ("<div> I am a text node </div>")
Create as attribute node:same way as creating ELEMENT nodes $ ("<div id= ' test ' class= ' Aaron ' > I am text node </div>")
3.DOM Internal Insert Append () and Appendto ()
$ (". Content"). Append (' <div class= ' append ' > Elements added by Append method </div> ') $ (' <div class= ' appendTo ' > Elements added by the AppendTo method </div> '). AppendTo ($ (". Content")) 4.DOM external Insert after () and before ()
5.DOM Internal Insert prepend () and Prependto ()
-The. Prepend () method inserts the specified element into the matching element as its first child element (if you want to insert as the last child element with. Append ()).-. Prepend () and. Prependto () to achieve the same functionality, the main difference is the syntax, Insert content and destination in different 6.DOM external insert InsertAfter () with InsertBefore ()
-. Before () and. InsertBefore () Implement the same functionality. The main difference is the syntax--the location of the content and the target. For before () Select an expression in front of the function, the contents as arguments, and. InsertBefore () Just the opposite, the content is in front of the method, it will be placed in front of the element in the parameter-. After () and. InsertAfter () to achieve the same functionality. The main difference is the syntax-especially (inserting) the content and the location of the target. For After () Select an expression in front of the function, the argument is what will be inserted. For. InsertAfter (), just the opposite, the content is in front of the method, and it is placed behind the element in the parameter-before, after, and InsertBefore. InsertAfter does not support multi-parameter processing in addition to the target and location
Precautions :-InsertAfter Inserts the jquery encapsulated element behind the specified element, if there is an element behind the element, then moves the subsequent element back, then inserts the jquery object,-InsertBefore inserts the jquery encapsulated element in front of the specified element, If the element is preceded by an element, the previous element is moved forward, then the jquery object is inserted; The basic usage of the 7.DOM node Delete empty () This method not only removes the child element (and other descendant elements), but also removes the text from the element. Because, according to the instructions, any text string in the element is treated as a child node of the element//through empty processing $ ('. Hello '). Empty ()
8.DOM node Remove () The parameter and non-argument usage remove, like empty, is the method of removing the element, but remove removes the element itself and removes everything inside the element, including the bound event and the jquery data associated with the element.
Empty Method-Strictly speaking, the empty () method is not to delete a node, but to empty the node, which empties all descendant nodes in the element-empty cannot delete itself from this node
Remove Method-the node and all descendant nodes that the node contains are deleted at the same time-provides an expression that passes a filter, removes the deletion of the reserved data deleted by the element 9.DOM node of the specified collection detach () This method does not remove the matching elements from the jquery object. These matching elements can therefore be reused in the future. Unlike remove (), all bound events, attached data, and so on are preserved. $ ("div"). Detach () This sentence will remove the object, only the display effect is not. But it still exists in memory. When you're append, you're back in the flow of the document. It shows up again.
Remove : Remove Nodes-without parameters, remove the entire node of itself and all nodes inside that node, including events and data on the node-parameters, remove filtered nodes, and all nodes inside that node, including events and data on the node
Detach: Removing Nodes-removal is consistent with remove-unlike remove (), all bound events, attached data, and so on are preserved-for example: $ ("P"). Detach () This sentence removes the object, only the display effect is not. But it still exists in memory. When you're append, you're back in the flow of the document. It shows up again. 10.DOM copy Clone (). The Clone () method deeply copies all matching element collections, including all matching elements, subordinate elements of matching elements, and text nodes. -Clone () method, before inserting it into the document, we can modify the cloned element or element content, such as the right code I $ (this). Clone (). CSS (' Color ', ' red ') adds a color-by passing true, Copy all event handlers that are bound on the original element to the clone element-The Clone () method is extended by jquery and can only handle events and data that are bound by jquery-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 11.DOM replacement replacewith () and ReplaceAll ()
. ReplaceWith (newcontent): Replaces all matching elements in the collection with the provided content and returns the collection of deleted elements
. ReplaceAll (target): replace each target element with a collection of matching elements-. ReplaceAll () and. ReplaceWith () feature similar, mainly the location difference between the target and the source-. ReplaceWith () and. ReplaceAll () Method removes all data and event handlers associated with the node-the. ReplaceWith () method, which, like most other jquery methods, returns a JQuery object, so it can be linked to other methods-. ReplaceWith () The jquery object that is returned by the method refers to the node that was replaced before the node 12.DOM wrapped wrap () method instead of the Replacewith/replaceall method
. Wrap (wrappingelement):Wraps an HTML structure around each element in the collection (' P '). Wrap (' <div></div> ') 13.DOM wrap Unwrap () method jquery provides a Unwarp () method, The effect is the opposite of the Wrap method. Deletes the parent element of the matching element collection, preserving itself (and the sibling element, if present) in its original position. $ (' P '). Unwarp (); 14.DOM Parcel Wrapall () method. Wrapall (wrappingelement): Add an outer wrap HTML structure to the matching element in the set 15.DOM wrap Wrapinner () method
. Wrapinner (wrappingelement): Adds the HTML structure of the package to the interior of the matching element in the collection (' div '). Wrapinner (' <p></p> ') The final structure, the inner element of the matching di element is wrapped by P <div> <p> P element </p></div><div> <p>p element </p></div> 16.jQuery Traversal Children () method jquery is a collection object, If you want to quickly find the first level of child elements in a collection, you can use the children () method at this point. It is important to note that the. Children (selector) method is to return all child elements of each element in the matching element collection (sons only, which is understood to be the father-son relationship)
.jquery traversal of the Find () method
the. Find () method should be aware of the points of knowledge:-Find is a descendant of each element in the current element collection. As long as they meet, whether they are sons, grandchildren can. -unlike other tree traversal methods, the selector expression is a required parameter for. Find (). If we need to implement a retrieval of all descendant elements, we can pass the wildcard selector ' * '. -Find is only traversed in descendants, not including itself. -Selector context is implemented by the. Find () method, so $ ('. Item-ii '). Find (' Li ') is equivalent to $ (' Li ', '. Item-ii ') (Locate the Li tag under the tag with the class name Item-ii). 18.jQuery traversal of the parent () method jquery is a collection object, and if you want to quickly find the parent element of each element in the collection (this is understood to be the father-son relationship), you can use the parent () method to Parent () The method allows us to search the DOM tree for the parent elements of these elements, to match elements from an orderly upward, and to create a new jquery object based on the matching elements. Note: jquery is a collection object, so the parent is an element of each of the elements in a mate set.
.
JQuery traversal parents () method query is a collection object, and you can use the parents () method if you want to quickly find all the ancestor elements of every element in a collection.
.jquery traversal closest () method closest () method accepts a selector string for a matching element
Note: jquery is a collection object, so through closest is the ancestor element of each element in a mate set
21.jQuery traversal Next () method you can use the next () method if you want to quickly find a collection of elements that are immediately behind each element in the specified element collection.
Note: jquery is a collection object, so the next sibling element of each element is set through the next match
22.jQuery Traversal prev () method prev () No parameter gets a collection of elements that contain the matching elements of each element in the collection 23.jQuery traversal siblings () if you want to quickly find the sibling elements of each element in a specified element collection, You can then use the siblings () method to traverse the Add () method on the upper and lower 24.jQuery of the selection if you need to add a new element to this collection later on how do I handle it? jquery provides an Add method for creating a new jquery object that is added to the collection of matching elements. The Add () parameter can almost accept any $ (), including a jquery selector expression, a DOM element, or an HTML fragment reference. Each of the 25.jQuery traversal () jquery is a collection object that can perform a series of operations after the specified element collection is found through the $ () method. For example, we operate $ ("Li"). CSS (") sets the style value for all Li because jquery is a collection object, so the inside of a CSS method must encapsulate a traversal method called an implicit iterative process. To set a color for every li in a collection, here's how each. The each () method is an iterator to a for loop that iterates through each DOM element in the JQuery object collection. Each time the callback function executes, the current number of cycles is passed as a parameter (counting starting from 0
$ ("Li"). each (function (index, Element) {
Index 0,1
element is the corresponding Li node Li,li
This points to the Li
})
$.each (data, function (index, sport) in Ajax
the index in function (index, value) is the position of the current element, and value is the values.
jquery Basics (DOM, append (), after (), prepend (), InsertAfter (), node deletion, traversal method each ())
