认识了那么多的选择器，接下来，我们就可以学习一下使用选择器方便的操作DOM元素了。样式操作作用：设置或获取元素的样式属性值设置样式属性操作设置单个样式$(selector).css("color",
认识了那么多的选择器，接下来，我们就可以学习一下使用选择器方便的操作DOM元素了。
样式操作
- 作用：设置或获取元素的样式属性值
- 设置样式属性操作
- 设置单个样式
$(selector).css("color", "red");//第一个参数表示：样式属性名称// 第二个参数表示：样式属性值- 设置多个样式
$(selector).css({“color”: “red”, “font-size”: “30px”});//参数为对象- 获取样式属性操作
// 参数表示要获取的 样式属性名称$(selector).css(“font-size”);- 操作的样式非常少，那么可以通过.css()这个 方法来操作
$(function () { //绑定事件 $("button").click(function () { //第一种：赋值。（两个参数） $("div").css("width",200); //第二种：获取属性值。（一个参数） alert($("div").css("width")); //第三种：赋值,按json赋值。（一个参数，json） var json = {"width":300,"height":300,"background":"red"}; $("div").css(json); });})类操作
- 添加类样式
- addClass(className) 为指定元素添加类className
$(selector).addClass(“liItem”);- 注意：此处类名不带点,所有类操作的方法名都不带点。
- 移除类样式
- removeClass(className) 为指定元素移除类 className
$(selector).removeClass(“liItem”);$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类- 判断有没有类样式
- hasClass(calssName) 判断指定元素是否包含类 className
$(selector).hasClass(“liItem”);//此时，会返回true或false- 切换类样式
- toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
$(selector).toggleClass(“liItem”);- 操作的样式很多，那么要通过使用类的方式来操作。
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
jQuery(document).ready(function () { $("button").eq(0).click(function () { //判断类名是否存在 alert($("div").hasClass("current")); //点击第一个按钮，给div添加类 $("div").addClass("current"); }); $("button").eq(1).click(function () { //判断类名是否存在 alert($("div").hasClass("current")); //点击第二个按钮，给div删除类 $("div").removeClass("current"); });})注意点
- function中的this永远代指js中的DOM对象，如果想用jQuery方法，必须转换为jquery对象。
- console.dir();打印出来的单个对象前面也可以出现下拉箭头，包括所有能支持和不能支持的属性、方法和其他各项内容等，方便查看。
- 样式操作：.css('backgroundColor','red')赋值的是行内样式
- 样式操作：.css('width')获取到的值带单位px
- 添加类样式时不会覆盖原有的，删除只删除指定的。
- hasClass中，如果前面的选择器是多个，使用该方法时只要有一个有该类名的就返回true。
jquery除了可以方便的操作属性样式外，还可以使用其提供的方法进行动画操作和节点操作呢呢，可以在我的博客中查看具体的动画操作： jquery常用动画详解 和节点操作：jquery节点操作之元素的创建、添加、删除、复制
