DOM Manipulation
1、
.append(content)：
content: {One or more DOM elements, arrays of elements, HTML strings, or jQuery objects | Function( Integer index, String html )}
e.g. $("div").append("text")：will insert content inside and to the end of each element in the matched set
在匹配的标签内部结尾追加相应的content
.prepend(content) ：will insert content inside and to the beginning of each element in the matched set：在对应的标签前追加content
ex：
$("div").prepend($("b")) will move all b inside div
before：
<div></div> <b>A</b> <b>B</b>
after：
<div> <b>A</b> <b>B</b> </div>
.appendTo(target)：
target: {selector, html String, Element, jQuery Object}
e.g. $("<b>text</b>").appendTo("div")
.appendTo(target)： will insert all elements in the matched set inside and to the end of each target element：将相应的内容追加到对应的target标签内。
ex：
$("b").appendTo("div") ：will move all b inside div：将b追加到div同时删除div内部所有b元素。
before：
<div></div> <b>A</b> <b>B</b>
after：
<div> <b>A</b> <b>B</b> </div>
.prependTo(target)：target: {selector, html String, Element, jQuery Object}
e.g. $("text").prependTo("div")
.prependTo(target) will insert all elements in the matched set inside and to the beginning of each target element.
ex：
$("b").prependTo("div") will move all b inside div
before：
<div></div> <b>A</b> <b>B</b>
after：
<div> <b>A</b> <b>B</b> </div>
2、
.after(content)
content: {One or more DOM elements, arrays of elements, HTML strings, or jQuery objects | Function( Integer index, String html )}
ex：
$("div").after("inserted") will insert span after each div。在每个div后面插入span元素
before：
<div>A</div> <div>B</div>
after：
<div>A</div> <span>inserted</span> <div>B</div> <span>inserted</span>
ex：
$("div").after($("b")) ：will move all b after div
before：
<b>A</b> <b>B</b> <div>C</div>
after：
<div>C</div> <b>A</b> <b>B</b>
.before(content)：
content: {One or more DOM elements, arrays of elements, HTML strings, or jQuery objects | Function( Integer index, String html )}
.before(content) will insert content before each element in the matched set
before：
<div>A</div> <div>B</div>
after：
<span>inserted</span> <div>A</div> <span>inserted</span> <div>B</div>
$("div").before($("b")) :will move all <b> before <div>before:
<div>C</div>
<b>A</b>
<b>B</b>
after:
<b>A</b>
<b>B</b>
<div>C</div>
.insertAfter(target)
target: {selector, html String, Element, jQuery Object}
e.g. $("text").insertAfter("div")
.insertAfter(target) will insert all elements in the matched set after each target element
ex:
$("b").insertAfter("div") will move all b after div
before:
<b>A</b>
<b>B</b>
<div>C</div>
after:
<div>C</div>
<b>A</b>
<b>B</b>
.insertBefore(target) target: {selector, html String, Element, jQuery Object}
ex:
$("b").insertBefore("div"):
before:
<div>C</div>
<b>A</b>
<b>B</b>
after:
<b>A</b>
<b>B</b>
<div>C</div>
3、wrapper
.wrap(element): element: {selector, html String, Element, jQuery Object | Function(index){...}}
.wrap(element) will insert element around each elements in the matched set
ex:
$("b").wrap("<div>") will insert div around each b
before:
<b>A</b> <b>B</b>
after:
<div> <b>A</b> </div> <div> <b>B</b> </div>
.wrapAll(element) :element: {selector, html String, Element, jQuery Object | Function(index){...}}
ex:
$("b").wrapAll("<div><span>") :will insert <div><span>...</span></div> around all <b>.
before:
<b>A</b> <b>B</b> <p> <b>C</b> </p>
after:
<div> <span> <b>A</b> <b>B</b> <b>C</b> // moved </span> </div> <p></p>
.wrapInner(element): element: {selector, html String, Element, jQuery Object | Function(index){...}}
ex:
$("div").wrapInner("<span>") will insert span around the content of each div
before:
<div> <b>A</b> </div> <div> <b>B</b> </div>
after:
<div> <span> <b>A</b> </span> </div> <div> <span> <b>B</b> </span> </div>
4、删除元素
.empty() ：will remove all inner content of each element in the matched set
ex：
$("div").empty() will remove all inner content of each div：删除div内部内容
before：
<div> <b>A</b> </div> <div>B</div>
after：
<div> </div> // removed <b>A</b> <div></div> // removed B
.remove() ：will remove each element in the matched set and everything inside it：删除元素及其内部内容
ex：
$("div").remove() ：will remove all div and their content
before：
<div> <b>A</b> </div> <div>B</div> <b>C</b>
after：
// removed <div><b>A</b></div> // removed <div>B</div> <b>C</b>
ex：
$("div").remove(".a")： will remove all div with class='a' and their content
before：
<div class="a">A</div> <div>B</div>
after：
// removed <div class='a'>A</div> <div>B</div>
.detach([selector])：will remove each element in the matched set and everything inside it
detach()和remove()的区别：.detach() is similar to .remove() will remove the element itself and its inner contnet, the only difference is that .detach() will keep jQuery data, such as events, associated with the removed elements.
ex：
$("div").detach(".a") will remove all div with class='a' and their content
before：
<div class="a">A</div> <div>B</div>
after：
// removed <div class='a'>A</div> <div>B</div>
5、css方法
.addClass(className) ：className: {CSS class, Function(index, currentClass){...}}：will add className to class attribute of each element in the matched set.
ex：
$("div").addClass("someClass")： will add someClass to class attribute of each div i.e. class='someClass'
before：
<div></div> <div class="anotherClass"></div>
after：
<div class="someClass"></div> <div class="anotherClass someClass"></div>
ex：
$("div").addClass( function(index, currentClass) { return currentClass+"-"+index ;} ) ：will add currentClass+"-"+index to class attribute of each div i.e. class='a a-0'
before：
<div class="a"></div> <div class="b"></div>
after：
<div class="a a-0"></div> <div class="b b-1"></div>
.removeClass(className) className: {CSS class, Function(index, currentClass){...}}：will remove className from class attribute of each element in the matched set
ex：
$("div").removeClass( function(index) { return $(this).text() } ); will remove class that matches div content i.e. CSS class a will be removed from div if exists.
before：
<div class="a b">a</div> <div class="a b">b</div>
after：
<div class="b">a</div> // a class removed <div class="a">b</div> // b class removed
.toggleClass(className,[switch]) ：className: {CSS class, Function(index, className, switch){...}}：
will add className if it does not exist or remove it if it does exist. If optional switch is used, then className will be added if switch is true and removed if false
ex：
$("div").toggleClass("someClass")： will add someClass to each div if it does not have one, and remove it from each div that already has it。
before：
<div class="someClass">a</div> <div>b</div>
after：
<div>a</div> // someClass removed <div class="someClass">b</div> // someClass added
ex：
$("div").toggleClass( function(index) { return $(this).text() } )：will remove class that matches div content and add div content as class if it does not exist
before：
<div class="a">a</div> <div class="a">b</div>
after：
<div>a</div> // remove a <div class="a b">b</div> // add b
.hasClass(className) ：will return true if className exists or false if it does not.
ex：
$("div").hasClass("someClass") ：returns true if at least one div has someClass assigned to its class attribute
// will return true
<div class="someClass">A</div> // div has someClass
<div>B</div>
css():
This jQuery function gets a CSS property of the first matched element or sets CSS properties for all matching elements. For example to set the background color for all elements of type
<div> use $('div').css('background-color','#ff6600')