jQuery操作样式与属性

jQuery操作样式

css操作

功能：设置或者修改样式，操作的是style属性

操作单个样式

//语法：css(name,value);

//第一个参数：需要设置的属性名
//第二个参数：对应的属性值

//使用案例
$("#one").css("background","red");//将背景颜色修改为红色

设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
//语法：css(obj)

//使用案例
$("#one").css({
    "background":"red",
    "width":"100px",
    "height":"200px"
})

获取样式

//语法：css(name);
//name:需要获取的样式名称
//案例
$("div").css("color")

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代（在方法的内部会为匹配到的所有元素进行循环遍历）：

1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值

class操作

添加样式类

//语法：$(selector).addClass(name)
//name:需要添加的样式类名，注意参数不带点

//案例：给所有得div添加one的样式
$("div").addClass("one")

删除样式类

//语法：$(selector).removeClass(name)
//name:需要删除的样式类名，注意参数不带点

//案例：给所有得div删除one的样式
$("div").removeClass("one")

判断是否有某个样式类

//语法：$(selector).hasClass(name);返回值为布尔值
//name:样式类名 

//案例：判断一个div是否有one的样式类
$("div").hasClass("one")

切换样式类

//语法：$(selector).toggleClass(name)
//name:需要切换的样式类名，如果有，移出样式，如果没有，添加样式
//例子
$("div").toggleClass("one")

属性操作

• attr操作

  设置单个属性

  //语法：$(selector).attr(name,value)
  //第一个参数：需要设置的属性名
  //第二个参数：对应的属性值
  
  //例子
  $("img").attr("title","哎哟，不错")；
  $("img").attr("title","aiyo");
  

  设置多个属性

  //语法：$(selector).attr(obj)
  //参数是一个对象
  
  //例子
  $("img").attr({
      title:"哎哟不错"，
      alt:"aiyo",
      style:"opacity:0.5"
  })
  

• prop操作

  在jQuery1.6之后，相对于checked、selected、disabled这类型的属性来说，只能用prop方法

  //设置属性
  $(":checked").prop("checked",true);
  //获取属性
  $(":checked").prop("checked");//返回true或者false