目录
1、jquery操作样式类名
代码演示
二、添加元素
1、append()演示
2、prepend()演示
3、after()演示
4、before()演示
三、jQuery-CSS()方法
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()演示
$(function () {$('div').prepend('<p>这是添加的内容</p>')})
运行结果，可以看到p标签被添加到了div标签内的内容前
3、after()演示
$(function () {$('div').after('<p>这是添加的内容</p>')})
运行结果，可以看到p标签被添加到div标签之后
4、before()演示
$(function () {$('div').before('<p>这是添加的内容</p>')})
运行结果，可以看到p标签被添加到div标签前
三、jQuery-CSS()方法
例：$("div").css("color" ,"red");返回指定的 CSS 属性的值 - css("propertyname");
设置指定的 CSS 属性after() - css("propertyname","value");
设置多个css属性 - css({"propertyname":"value","propertyname":"value",...});
<!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元素的样式发生了改变
