JQuery Dom operations and JQueryDom operations

JQuery Dom operations and JQueryDom operations

Xiaobian recently participated in the development of a website project, so it encountered a lot of js operations. Make small editors scratching their heads. I seem to have been familiar with JQuery for a while. After that, I forgot to write it for too long. (This is the case when I was a child .) Today, I reorganized JQuery's Dom operations. I hope it will be helpful to me.

Some basic operations

 
1. html ()
 
Use the html () method to read or set the innerHTML of the element.
 
It is equivalent to innerHTML in javascript.
 
2. text ()
 
Use the text () method to read or set the innerText of the element.
 
It is equivalent to innerText in javascript.
 
3.Attr ()
 
You can use the attr () method to read or set the attributes of an element. You can use attr to perform operations on attributes that are not encapsulated by jQuery (all browsers have no different attributes.
 
 
4.RemoveAttr
 
Use removeAttr to delete attributes. The deleted attribute cannot be seen in the source code, which is different from clearing the attribute. Attr ('name ','')

Dynamically create Dom nodes

 
1.$ (Html string)
 
Use $ (html string) to create a Dom node and return a jQuery object.
 
Then, you can call methods such as append to add the newly created node to the Dom.
 
$ () Creates a jQuery object, which can be fully operated.
 
2. Small experience
 
Use $ ('<input name = "gender"/>') instead of using attr ('name', 'gender') after creation ').
 
// Set the name through attr () and there is a problem in IE6. The version I used is like this. I don't know the new version.
 
 
In addition, I am talking about the name attribute. In the above example, the type attribute can be attr.

Append (parent element. append (child element ))

 
1. Add the youngest son append
 
The append method is used to append an element (the last subnode) to the end of an element ). Add end of element (son)
 
2. Add the eldest son prepend
 
Prepend: add the element (first subnode) at the beginning of the element ). Add element (son)
 
3. Add a younger brother after
 
After, add the element (add brother) after the element to add the element (brother)
 
4. Add brother before
 
Before: add an element (add a brother) before the element to add a brother)

Append yourself to an element (child element. appendTo (parent element ))

 
1. become the youngest son appendTo
 
Child element. appendTo (parent element); // actively close! To the last
 
2. Become the eldest son prependTo
 
Child element. prependTo (parent element); // actively baffles to the first element.
 
3. Become a younger brother, insertBefore
 
(*) A. insertBefore (B); adding A to the front of B is equivalent to B. before ();
 
4. Become your brother insertAfter
 
(*) X. insertAfter (Y); add X to the end of Y, equivalent to Y. after (X );

Delete a node

 1. empty () ClearThe internal implementation of clearing all subnodes under an element: while (ele. firstChild) {ele. removeChild (ele. firstChild) ;}// different versions may be different.2. remove (selector)Delete the current element. The returned value is the deleted element. You can continue to use the deleted node. For example, add a node to another node:

Node operations

 1. Replace nodes$ ("Br"). replaceWith ("2. replace all nodes
$ ('<Br/>'). replaceAll ('hr'); // The caller must also be the element selected by the selector. Replace all hr with the <br/> element3. Package nodesThe wrap () method is used to wrap all elements one by one with the specified tag: wrapAll () wrapInner () // internally

Style operations

 1. attr ()1) Get the style attr ("class "). 2) set the style attr ("class", "myclass "). /* Note: one parameter is obtained, and the other two parameters are set */2. append a styleAppend style addClass ("myclass") (does not affect other styles) the style mentioned here is written in css. Myclass is the css selector name.3. Remove a styleRemove style removeClass ("myclass "),4. Switch the styleSwitch the style (remove the style if there is a style, add the style if there is no style) toggleClass ("myclass ").5. JudgmentDetermine whether a style exists: hasClass ("myclass ")