下面的解释,外面的为官方解释,括号内为我自己的理解。
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 });