JQuery DOM summary ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ Development tools and key technology: Adobe Dreamweaver JavaScript Author: Huang Futao Time to write: May 02, 2020~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ Knowledge points list: With the jQuery JavaScript node to create To create the DOM node JavaScript Create a process: 1. Create the document element. The createElement method () 2. For the node to add attribute element. The setAttribute (); 3. You can use the innerText or innerHTML attribute to add text or HTML content 4. Use the parentElement. The appendChild () method will create the new node is added to the parent node To create the DOM node jQuery 1. Create element var divs=$(" & lt; Div>
" ); 2. For the node to add attribute divs. Attr (" class ", "box1"); 3. Add text divs. HTML (" this is a through the jQuery created div "); 4. Add the newly created node to the parent node in $(" body "). Append (div);
The method of the jQuery 1. The append () and appendTo () method
To the box to add a p tag (1). The $(" box "). Append (" & lt; P> Through the append method dynamically add P tags & lt;/p>" ); (2) $(" & lt; P> Through the appendTo method dynamically add P tags & lt;/p>" ). AppendTo (" box ");
2. The prepend () and prependTo () method
To the box to add a p tag (1). The $(" box "). The prepend (" & lt; P> By the method of the prepend dynamically add P tags & lt;/p>" ); (2) $(" & lt; P> By the method of the prepend dynamically add P tags & lt;/p>" ). PrependTo (" box "); Note: prepend content to the inside of every matched element, add content in front of the append or appendTo always
3. After () with insertAfter () method
To the back of the box to add a p tag (1) $(" # box ") after (" & lt; P> Through the jQuery after methods of dynamic add P tags & lt;/p>" ); (2) $(" & lt; P> Through the jQuery insertAfter method of dynamic add P tags & lt;/p>" ). InsertAfter (" # box ");
4. Before () with the insertBefore () method
To the front of the box to add a p tag (1). The $(" # box "). Before (" & lt; P> Through the jQuery before method of dynamic add P tags & lt;/p>" ); (2) $(" & lt; P> Through the insertBefore jQuery method dynamic add P tags & lt;/p>" ). The insertBefore (" # box ");
Summary of the previous four methods: these two methods are same, the main difference is that grammar - & gt; The location of the content and target different
5 jQuery delete node method to remove () and empty () method 1. The empty () removes all child nodes from the set of matched elements 2. Remove ([expr]) to delete all of the matched elements from the DOM, jQuery expression of expr: used to filter element 3. Detach () to delete all of the matched elements from the DOM, - this method won't matching element is removed from the jQuery object, which can be used again in the future of the matched elements, To remove (), all bound events, additional data will be preserved - $(" div "). The detach () this will remove the object, just without the display effect, But there is a memory, when you append to flow back into the document, it is displayed again,
Screening of jQuery element Eq (index | - index) : get the current chain operation in N a jQuery object, return the jQuery object, when the parameter is greater than or equal to zero for positive selection, such as 0 represents the first, 1 represents the second, when the parameter is negative for the reverse selection, for example - 1 as the bottom first, specific can look at the following example, Similar with the get (index), but the get (index) returns the DOM object, Parameter description: index an integer, indicator elements based on the zero position, from 0 to calculate the position of the element, - index an integer, the location of the indicator elements, starting from the last element of a set of reciprocal, (1) count The first () for the first element The last () to obtain the final element HasClass (class) to check if the current element contains a particular class, if you have, then return true This is actually is (". "+ class), Filter (expr | obj | ele | fn) filter, the set of matched elements with a specified expression This method is used to narrow the scope of the match, use a comma to separate multiple expression Find (expr | obj | ele) Search all of the matched elements with a specified expression, this function is to find out is a good way to deal with the offspring of the elements of the element
