Day 75th: Dom manipulation in jquery

first, the basic Operation

1.html ()

Use the HTML () method to read or set the InnerHTMLof the element.

is the equivalent of a innerhtml inside JavaScript.

2.text ()

Use the text () method to read or set the innertext of the element.

is the equivalent of a innertext inside JavaScript.

3.attr ()

Use the attr () method to read or set the attributes of an element, and to manipulate it with attr for attributes that are not encapsulated by jquery (attributes that do not differ from all browsers).

4.removeattr

Use removeattr to delete an attribute. The deleted attribute is not visible in the source code, which is the difference from the purge attribute. attr (' name ', ')

Two, dynamically create DOM nodes

1.$ (HTML string)

Use $ (HTML string) to Create a DOM node , and return a jquery object.

It is then called to add the newly created node to the DOM, such as append.

$ () creates a jquery object that can be manipulated completely.

2. Small Experience

Use $ (' <input name= ' gender "/> '), and do not create well after passing attr (' name ', ' gender ').

The name is set by attr () and there is a problem under IE6. I use the version is this, the new version I do not know.

What's more, I'm talking about the Name property, and the type attribute in the example above can be attr.

Third, append (parent element. Append (child element))

1. Add the youngest Append

The Append method is used to append an element (the last child node) at the end of the element. Add end of Element (son)

2. Add the older son prepend

prepend, adds the element at the beginning of the element (the first child node). add element Start (son)

3. Add younger brother after

After, add element after element (add sibling) add element behind (brother)

4. Add Brother before

Before: add element before element (add sibling) add element front (brother)

Iv. Append yourself to an element (child element. AppendTo (parent Element))

1. Become the youngest son AppendTo

child element . AppendTo (parent element);//Active flattery! To the last

2. Become the older son Prependto

child element . Prependto(parent element);//actively sucking up to the first one.

3. Become a brother InsertBefore

(*) A. InsertBefore(b); Add a to the front of B, equivalent to B.before (a);

4. Become a brother InsertAfter

(*) x. InsertAfter(y); add x to the back of Y, equivalent to Y.after (x);

v. Deleting nodes

1.empty () empty clears all child nodes under an element of the internal implementation:while (ele.firstchild) { Ele.removechild (ele.firstchild); }//Different versions may not be the same. 2.remove (selector) deletes the current element, and the returned value is the deleted element. You can also continue to use the node that was deleted. For example, re-adding to another node:

vi. node Operation

1. Replacing nodes $ ("BR") . ReplaceWith(" replace BR with 2. Replace all nodes $ (' <br/> ') . ReplaceAll(' hr ');//The caller also has to be the element selected by the selector. Replace all HR with the <br/> element 3. Parcel Nodes the Wrap () method is used to wrap all elements individually with the specified label: Wrapall () Wrapinner ()//In the inner circle

Seven, style operation

1.attr () 1) get the style attr ("class"). 2) set the style attr ("Class", "MyClass"). /* Note: One parameter is get, two parameters are set */ 2. Append Style Append style addclass("MyClass") (does not affect other styles) The style that is said here is written in CSS. MyClass is the selector name for CSS 3. Remove Style Remove the style removeclass("MyClass"), 4. Toggle Style Toggle Style (style is removed if there is a style, and style is added if no style is present) toggleclass("MyClass"). 5. Judging determine if there is a style: hasclass("MyClass")

Day 75th: Dom manipulation in jquery