JQurey Dom node operation
Operating jQurey Dom node
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
Development tools and key technology: Adobe Dreamweaver JavaScript
Author: Peng Qiwang
Writing time: on May 1, 2020,
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
1.0 create a DOM node JavaScript
Create a process:
1. Create the document element. The createElement method ()
For example: var div=document. The createElement method (" div ");
2. For the node to add attribute element. The setAttribute ();
For example: div. SetAttribute (" class ", "box");
3. You can use the innerText or innerHTML attribute to add text or HTML content
For example: div. InnerHTML="this is a div" by JS dynamically add;
4. Use the parentElement. The appendChild () method will create the new node is added to the parent node
For example: the document. The body. The appendChild (div);
5. J Query node created: $() function processing, $(" HTML structure ")
For example: var div=$(" & lt; Div class='box' & gt; This is a through the jQuery dynamically add div
" );
6. The jQuery created node is a jQuery object
1.1 jQuery nodes insertion to the element internal inserted into the DOM node
1) append () additional content to the inside of every matched element
(2) appendTo () all of the matched elements add to another specified elements elements in the collection,
(3) the prepend () prepend content to the inside of every matched element
(4) prependTo () all of the matched elements lead to another, specified elements elements in the collection
1. The append () and appendTo () method
Append (content | fn) : add content to the inside of every matched element
- $(A), append (B); Will be added to A
BAppendTo (content) : all of the matched elements added to another specified elements elements in the collection,
- $(A). AppendTo (B);
in the appended to the BConclusion: function of these two methods are the same, the main difference is that grammar - & gt; The location of the content and target different
2. The prepend () and prependTo () method
The prepend (content) : prepend content to the inside of every matched element
- $(A). The prepend (B); Will be added to A B (and append to add elements of the position difference)
PrependTo (content) : all of the matched elements lead to another, specified elements elements in the collection,
- $(A). PrependTo (B);
in the appended to the B1.2 jQuery node insert to the elements of external inserted into the DOM node
(1) after insert content after each of the matched elements ()
(2) before () insert content before each of the matched elements
(3) insertAfter () the method is upside down regular $(A). After operation (B), which is not the B is inserted into A behind, but behind the inserted into the B
Regular $4 insertBefore () upside down (A) before operation (B), which is not inserted the B to A front, but in front of the inserted into the B,
1. After () and before () method
After (content | fn) : insert content after each of the matched elements,
- $(A). After (B); On A behind B
elementBefore (the content | fn) : insert content before each of the matched elements,
- $(A). Before (B); On A front insert B
element2. InsertAfter () with the insertBefore ()
InsertAfter (content) : insert all of the matched elements to another, the back of the specified elements set
- $(A). InsertAfter behind B (B) insert A element with $(A) after (B) is the opposite of the operation, but the function as
InsertBefore (content) : insert all of the matched elements to another, the specified element in the front of the set,
- $(A). The insertBefore (B) surface insert A element in front of B and $(A). Before (B) is the opposite of the operation, but the function as
1.3 jQuery element node
(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 (the element itself and child elements are deleted)
(3) the detach () to delete all of the matched elements from the DOM (the difference between the note and remove)
1. The jQuery delete node method 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
2. The method of jQuery delete node detach () method
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,
2.0 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 the elements that are dealing with a good way to descendants of the element