1、jquery操作样式类名
$("#div1").addClass("divClass2") ——为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") ——移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") ——移除多个样式
$("#div1").toggleClass("anotherClass") ——重复切换anotherClass样式 （如果添加了样式就移除，如果没有就添加）
代码演示
运行结果
原操作代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { //加载的时候颜色变成红色，字体大小40px $('div').addClass('font'); }) </script> <style> .font{ color:red; font-size:40px; } </style> </head> <body> <div> 这是内容 </div> </body> </html>
二、添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
1、append()演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { $('div').append('<p>这是添加的内容</p>') }) </script> </head> <body> <div> 这是内容 </div> </body> </html>
运行结果，可以看到p标签被添加在div标签的内部，同时添加时会根据标签进行页面渲染，而不是：<p>这是添加的内容</p>
2、prepend()演示
1. 2. $(function () { 3. $('div').prepend('<p>这是添加的内容</p>') 4. })
运行结果，可以看到p标签被添加到了div标签内的内容前
3、after()演示
1. $(function () { 2. $('div').after('<p>这是添加的内容</p>') 3. })
运行结果，可以看到p标签被添加到div标签之后
4、before()演示
1. $(function () { 2. $('div').before('<p>这是添加的内容</p>') 3. })
运行结果，可以看到p标签被添加到div标签前
三、jQuery-CSS()方法
返回指定的 CSS 属性的值 - css("propertyname");
设置指定的 CSS 属性after() - css("propertyname","value");
设置多个css属性 - css({"propertyname":"value","propertyname":"value",...});
例：$("div").css("color" , "red") ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></script> <script> //加载 $(function () { $('div').css("color","red"); }) </script> </head> <body> <div> 这是内容 </div> </body> </html>
运行结果，可以看到div元素的样式发生了改变
