下面的解释，外面的为官方解释，括号内为我自己的理解。
addclass()：
向元素添加类名。（用处，在css里面写多各类，以后用addclass实现动态添加或改变样式）
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>api</title> 6 <script src="../../base/jquery-3.1.0.js"></script> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 <body> 10 <div id="show"></div> 11 <button id="btn">Click Me</button> 12 <script src="main.js"></script> 13 </body> 14 </html>
css代码：
1 #show{ 2 width: 300px; 3 height: 300px; 4 background-color: coral; 5 } 6 .bkBlue{ 7 background-color: blue; 8 }
main.js代码：
1 $(function () { 2 3 $("#btn").click(function () { 4 $("#show").addClass("bkBlue"); 5 }); 6 7 });
发现点击后，div背景颜色不变.看下截图：
如图，蓝色直接GG了。表明它不能覆盖（因为这里涉及到了权重的问题，id选择器的权重大于类选择器，易出错）
把show设为类，则正常输出。
（下面代码也都用类去执行了╮(╯▽╰)╭）！！！
after（）：
在匹配的元素之后插入内容
before():
在匹配元素之前插入内容
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".show").before("<p>heiheihei</p>"); 5 $(".show").after("<p>hahaha</p>"); 6 }); 7 8 });
效果图：
append()和appendTo()：
向元素内部添加内容。（可代替js里面的appendChild()方法）
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".show").append("<p>inner1</p>"); 5 $("<p>inner2</p>").appendTo($(".show")); 6 }); 7 8 });
效果图：
attr()：
设置或返回匹配元素的属性和值。
转载：http://blog.sina.com.cn/s/blog_7fb1495b0100vcyk.html
这篇文章是我见过写的最好的。就当玉放自己家了。
clone()：
创建匹配元素的集合的副本。（注意是副本，不是元素本身，估计和Java里面的克隆差不多，和添加本体区别在于地址不变，改变它不影响主体）。
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".show").append($("<p>haha</p>").clone()); 5 }); 6 7 });
detach()：
从DOM中移除匹配的元素集合（直接干掉一个标签，简单暴力）
html代码修改为：
1 <div class="show"> 2 <p class="p1">1</p> 3 <p class="p2">2</p> 4 <p class="p3">3</p> 5 </div>
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p1").detach() 5 }); 6 7 });
效果：移除p1。
empty()：
删除匹配元素集合中所有的子节点（注意是所有）
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".show").empty(); 5 }); 6 7 });
效果移除所有的p标签。
hasClass()：
检查元素是否拥有指定的类。（可用于，为没有添加某个样式的标签添加该样式，用它加个判断，没有则添加。）
1 $(function () { 2 3 $("#btn").click(function () { 4 alert($(".p1").hasClass("p")); 5 }); 6 7 });
效果输出：false。
html()：
设置或返回匹配元素集合html的内容。（无参数：用于获取内容 有参数：用于替换内容）
无参数：返回第一个匹配元素的内容
有参数：替换内容
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p1").html("替换内容"); 5 console.log($(".p2").html()); 6 }); 7 8 });
insertAfter()：
把匹配的元素插入到另一个指定元素集合的后面。
insertBefore():
把匹配的元素插入到另一个指定元素集合的前面。
1 $(function () { 2 3 $("#btn").click(function () { 4 $("<span>after</span>").insertAfter($(".p1")); 5 $("<span>before</span>").insertBefore($(".p3")); 6 }); 7 8 });
效果图：
prepend():
prependTo():
向每个匹配的元素内部添加前置内容（注意是在内部添加）
1 $(function () { 2 3 $("#btn").click(function () { 4 $("<span>hahaha</span>").prependTo($(".p1")); 5 $(".p2").prepend("<span>hehehe</span>"); 6 }); 7 8 });
效果图：
remove():
移除匹配元素。（①移除匹配的，②父类移除匹配到的子类）
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p2").remove(); 5 $("p").remove(".p1"); 6 }); 7 8 });
removeAttr():
从所有匹配元素中移除指定属性（可用于动态移除样式）
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p1").removeAttr("class"); 5 }); 6 7 });
效果：
removeClass():
从所有匹配元素中删除或者指定的类
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p1").removeClass("p1"); 5 }); 6 7 });
效果图：
replaceALL()：
replaceWith()：
用内容去匹配指定元素（注意，是完全替换掉）
1 $(function () { 2 3 $("#btn").click(function () { 4 $("<span>hello</span>").replaceAll(".p1"); 5 $(".p2").replaceWith($("<span>world</span>")); 6 }); 7 8 });
效果图：
text():
设置或返回匹配元素的内容。（同html()）
还有val()都类似。
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
（不知道为啥，这个移除后还剩个Class在那。是官方故意的？(⊙o⊙)…，反正现在我不知道这样的意义在于什么）
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p2").toggleClass("p2"); 5 }); 6 7 });
效果：
wrap()：
把匹配的元素用指定元素包围
wrapAll():
匹配所有。
1 $(function () { 2 3 $("#btn").click(function () { 4 $(".p2").wrap("<div></div>"); 5 }); 6 7 });
效果图：
添加一条：包围加附加类名
1 var aaa = $("<div></div>").addClass("ssss"); 2 $("#drag").wrap(aaa[0]);
这个涉及到了一个jQuery与DOM相互转换的问题，一会新开博客讲解。
当然也可以这样：
1 $("#drag").wrap("<div class='ssss'></div>");
unwrap()：
移除父元素
1 $(function () { 2 3 $("#btn").click(function () { 4 $("p").unwrap(); 5 }); 6 7 });
效果图：
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
最后完整代码献上：
1 $(function () { 2 3 $("#btn").click(function () { 4 // $(".show").addClass("bkBlue"); 5 // $(".show").before("<p>heiheihei</p>"); 6 // $(".show").after("<p>hahaha</p>"); 7 // $(".show").append("<p>inner1</p>"); 8 // $("<p>inner2</p>").appendTo($(".show")); 9 // $(".show").append($("<p>haha</p>").clone()); 10 // $(".p1").detach(); 11 // $(".show").empty(); 12 // alert($(".p1").hasClass("p")); 13 // $(".p1").html("替换内容"); 14 // console.log($(".p2").html()); 15 // $("<span>after</span>").insertAfter($(".p1")); 16 // $("<span>before</span>").insertBefore($(".p3")); 17 // $("<span>hahaha</span>").prependTo($(".p1")); 18 // $(".p2").prepend("<span>hehehe</span>"); 19 // $(".p2").remove(); 20 // $("p").remove(".p1"); 21 // $(".p1").removeAttr("class"); 22 // $(".p1").removeClass("p1"); 23 // $("<span>hello</span>").replaceAll(".p1"); 24 // $(".p2").replaceWith($("<span>world</span>")); 25 // $(".p2").toggleClass("p2"); 26 // $(".p2").wrap("<div></div>"); 27 // $("p").unwrap(); 28 }); 29 30 });