Jq Study Notes (2) and jq Study Notes

Jq Study Notes (2) and jq Study Notes

Jq notes-dom-MOOC learning notes

 

1. jQuery node creation and attribute Processing

Create element nodes:
1. $ ("<div> </div> ")
Created as this node:
1. $ ("<div> I am a text node </div> ")
Create as attribute node:
1. $ ("<div id = 'test' class = 'Aaron '> I am a text node </div> ")
2. $ ("<div class = 'right'> <div class = 'Aaron '> dynamically create DIV element nodes </div> ")

2. Insert append () and appendTo () in the DOM ()

① Append () to add content to each Matching Element
② AppendTo (): append all matched elements to another

A simple summary is:

The. append () and. appendTo () methods have the same functions. The main difference is the syntax-the content and the target location are different.

-- Append () is the inserted object, followed by the element content to be inserted in the object
-- Before appendTo (), the content of the element to be inserted is followed by the inserted object.

 

3. Insert after () and before () outside DOM ()

① After () inserts the content specified by the parameter after each element in the Matching Element ry as its sibling node.
② Before () Data parameter settings, insert content in front of matching elements

Note:
① After, add html code to the back of the element. If there is an element behind the element, move the element behind it and insert the html code.
② Before adds html code to the front of an element. If there is an element in front of the element, move the previous element forward and insert the html code


4. Insert prepend () and prependTo () in DOM ()

① Prepend () to the internal content of each Matching Element
② PrependTop () puts all matching elements in front of another specified Element ry

Summarize the differences between the four methods inserted in dom
① Append () to add content to each Matching Element
② Prepend () to the internal content of each Matching Element
③ AppendTo (): append all matched elements to the set of another specified element.
④ PrependTo () puts all matched elements in front of another specified Element Set

 

5. Insert insertAfter () and insertBefore () outside DOM ()

① InsertBefore () inserts each element in the ry before the target Element
② InsertAfter () inserts each Matching Element in the ry behind the target Element

6. Basic usage of empty () For DOM Node Deletion

Empty, as its name implies, is a clearing method, but it is a little different from deleting because it only removes all subnodes in the specified element.


7. remove () of DOM node with and without Parameters

Like empty, remove is a method for removing elements. However, remove removes the elements themselves and removes everything inside the elements, includes bound events and jQuery data related to this element.


8. Differences between empty and remove in DOM Node Deletion

① Empty Method
Strictly speaking, the empty () method does not delete nodes, but clears nodes. It can clear all child nodes in the element.
Empty cannot delete itself.

② Remove Method
The node and all its child nodes will be deleted at the same time.
Provides a filter expression to delete elements in a specified collection.

 

9. DOM Node Deletion-delete of reserved data detach ()

10. Differences between detach () and remove () For DOM Node Deletion

Remove: remove a node
① If there is no parameter, remove the entire node and all internal nodes of the node, including events and data on the node.
② With parameters, remove filtered nodes and all internal nodes of the node, including events and data on the node

Detach: Remove a node.
① The removal process is the same as the removal process.
② Unlike remove (), all bound events and additional data are retained.
③ For example, the $ ("p"). detach () clause removes the object, but the display effect does not exist. But the memory still exists. After you append the file, it returns to the Document Stream again. It is displayed again.

11. DOM copy clone ()

The. clone () method deeply copies all matching element sets, including all matching elements, the lower-level elements of matching elements, and the text nodes.

The clone method is simple to clone a node, but you must note that if the node has other processing tasks such as events or data, we need to pass a Boolean value ture Through clone (ture) to specify, this not only clones the node structure, but also clones the events and data.

The usage is as simple as this. We need to know the details when cloning:

① When the clone () method is used, before inserting it into the document, we can modify the cloned element or element content, such as the code on the right (this(.clone().css ('color', 'red ') added a color.
② Pass true to copy all event processing functions bound to the original element to the cloned element.
③ The clone () method is extended by jQuery and can only process events and data bound by jQuery.
④ Objects and arrays in element data will not be copied, And the cloned elements and original elements will continue to be shared. For all data that is deeply copied, You need to manually copy each


12. replaceWith () and replaceAll () with DOM ()

①. ReplaceWith (newContent): replace all matching elements in the set with the provided content and return the set of deleted elements.
②. ReplaceAll (target): replace each target element with matching elements of the set.

Summary:
① The replaceAll () and. replaceWith () functions are similar, mainly because of the difference between the target and the source location.
② The replaceWith () and. replaceAll () Methods delete all data and Event Handlers associated with the node.
③. The replaceWith () method returns the jQuery object like most other jQuery methods, so it can be linked with other methods.
④. The jQuery object returned by the replaceWith () method references the node before replacement, instead of the node after replacement by the replaceWith/replaceAll method.

Example:

① $ ("P: eq (1)"). replaceWith ('<a style = "color: red"> Replace second content </a> ')
② $ ('<A style = "color: red"> Replace the content in the second paragraph </a>'). replaceAll ('P: eq (1 )')

 

13. DOM wrap () method

If you want to wrap an element with other elements, that is, add a parent element to it. For such processing, JQuery provides a wrap method.

①. Wrap (wrappingElement): wrap an HTML structure around each element matched in the collection

Example:
<P> p element </p>

Add a div package to the p element

$ ('P'). wrap ('<div> </div> ')

In the final structure, the p element adds a parent div structure.

<Div>
<P> p element </p>
</Div>

②. Wrap (function): a callback function that returns the HTML content or jQuery object used to wrap matching elements.

Example:
$ ('P'). wrap (function (){
Return '<div> </div>'; // similar to the first one, but the writing method is different.
})

The effect after use is the same as passing parameters directly, except that the code can be written inside the function body and written differently.

Note:
The. wrap () function can accept any string or object, and can be passed to the $ () factory function to specify a DOM structure. This structure can be nested with several layers of depth, but should contain only one core element. Each matching element is wrapped in this structure. This method returns the original element set so that the chained method can be used later.

 

 

14. DOM wrapped unwrap () method

Purpose: Delete the parent element.

JQuery provides an unwarp () method, which is opposite to the wrap method. Delete the parent element of the Matching Element Set and keep itself (and sibling element, if any) at the original position.

Example:
<Div>
<P> p element </p>
</Div>

-->

$ ('P'). unwarp ();

-->

<P> p element </p>

15. DOM wrap wrapAll () method

①. WrapAll (wrappingElement): adds an external wrapped HTML structure to the matching elements in the set.

Example 1:
<P> p element </p>
<P> p element </p>

--> Add a div package to all p elements

$ ('P'). wrapAll ('<div> </div> ')

--> The result 2 P elements all add a parent div structure.

<Div>
<P> p element </p>
<P> p element </p>
</Div>

②. WrapAll (function): a callback function that returns the HTML content or jQuery object used to wrap matching elements.

The callback method can be used to process each element separately.

Example 2:
$ ('P'). wrapAll (function (){
Return '<div> <div/> ';
})

--> The result of the preceding statement is as follows, which is equivalent to warp's processing.

<Div>
<P> p element </p>
</Div>
<Div>
<P> p element </p>
</Div>

Note:
The. wrapAll () function can accept any string or object, and can be passed to the $ () factory function to specify a DOM structure. This structure can be nested with multiple layers, but the innermost layer can only have one element. All matching elements will be treated as a whole and wrapped externally with the specified HTML structure.

 

16. DOM wrap wrapInner () method

①. WrapInner (wrappingElement): adds the HTML structure of the package to the interior of the matching elements in the set.

Example 1:
<Div> p element </div>
<Div> p element </div>

--> Add a p package to all elements

$ ('Div '). wrapInner (' <p> </p> ')

--> Result

<Div>
<P> p element </p>
</Div>
<Div>
<P> p element </p>
</Div>

②. WrapInner (function): allows us to use a callback function as a parameter. Every time a matching element is encountered, the function is executed and a DOM element, jQuery object, or HTML segment is returned, used to enclose the content of matching elements

Example 2:

$ ('Div '). wrapInner (function (){
Return '<p> </p> ';
})

-->

<Div>
<P> p element </p>
</Div>
<Div>
<P> p element </p>
</Div>

Note:
When a selector string is passed to the. wrapInner () function, the parameter should be in the correct format of HTML, and the HTML tag should be disabled correctly.



17. The children () method of jQuery Traversal

The. children (selector) method returns all the child elements matching each element in the Element Set (only the child, which can be understood as the parent-son relationship)

 

18. find () method for jQuery Traversal

Example:
<Div class = "div">
<Ul class = "son">
<Li class = "grandson"> 1 </li>
</Ul>
</Div>

If the code is $ ("div"). find ("li"), then the relationship between li and div is an ancestor, and you can quickly find it through the find method.

Knowledge points for attention in the. find () method:
① Find is the descendant of each element in the current element set. As long as the match is met, either the son or the son can.
② Unlike other tree traversal methods, the selector expression is a required parameter for. find. If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.
③ Find only traverses the child, excluding itself.
④ The selector context is composed. implemented by the find () method; therefore, $ ('. item-II '). find ('lil') is equivalent to $ ('lil ','. item-II') (locate the li tag under the tag of the class named item-ii ).

Note:
The. find () and. children () methods are similar.
1. children only searches for the first level of child nodes
2. find searches for all child nodes


19. parent () method of jQuery Traversal

The parent () method is used to find the parent element.

Because it is a parent element, this method will only look up a level


20. parents () method of jQuery Traversal

Purpose: The parents () method can be used to search for ancestor elements.

Example:
<Div class = "div">
<Ul class = "son">
<Li class = "grandson"> 1 </li>
</Ul>
</Div>

Find the parent element div on the li node. The $ ("li"). parents () method can be used here.

Note:
1. The parents () and. parent () methods are similar, but the latter only performs a single-level DOM tree search.
2 $ ("html"). parent () method returns a set containing documents, while $ ("html"). parents () returns an empty set.


21. jQuery traversal-closest () method

Role: it is also an ancestor finder, but it is more inclined to filter the finder with the ancestor.

The closest () method accepts a selector string that matches the element.

Starting from the element itself, the element matches the parent element step by step on the DOM tree and returns the first matched ancestor element.

Note: pay special attention to the following when using

The. parents () and. closest () are a bit similar. They all traverse the ancestor element up, but the two are different. Otherwise, there will be no meaning.

① The starting position is different:. closest starts from the current element. parents starts from the parent element.
② Different traversal targets :. closest must find the specified target ,. parents traverses the root element of the document, and closest searches up until a matching element is found. parents searches for the root element and adds the matching element to the set.
③ Different results:. closest returns a jquery object containing zero or one element, and parents returns a jquery object containing zero or one or more elements.


22. next () method of jQuery Traversal

Purpose: Find the next sibling element.

Example:
① $ ("Li. item-1" ).next().css ("border", "1px solid red ")
② $ ('. Item-2'). next (': first'mirror.css ('border', '1px solid Blue ')

 

23. jQuery traversal-prev () method

Purpose: Search for the adjacent first sibling Element

 

24. siblings () of jQuery Traversal ()

Siblings (): Quickly searches for the sibling elements of each element in the specified Element ry.

25. add Method

JQuery is a collection object. You can perform a series of operations after finding the specified Element collection through the $ () method. After $ (), it means that the object in the collection has been fixed. What should I do if I need to add a new element to the collection later? JQuery provides the add method to create a new jQuery object and add elements to the matched element set.


26. jquery review each ()

What is each?
① Each is a for loop package iterator.
② Each is processed through callback, and there will be 2 fixed real parameters, indexes and elements
③ This in the each callback method points to the dom element of the current iteration.

In my opinion, each is more suitable for effects such as zebra crossings.