jQuery学习笔记（5）三种操作（css，class，属性）

1.css操作

html：

<div>1</div>
<div>2</div>
<div>2</div>

1.单个样式修改
css(“name样式名”,“value样式值”)
例：

$("div").css("color","red");

字变红
2.多个样式修改
多个样式修改时是以键值对的方式呈现的
css(obj)
例：

$("div").css({
      backgroundColor:"blue",
      color: "red",
      fontSize:"50px",
  });
   

背景色变蓝
字变红
字变大
3.获取一个样式值
css(“name样式名”)
例：

$("div").css("color");

会返回red

2.class操作

html:

<div>1</div>
<div class="two">2</div>
<div>3</div>

css:

.one{
	color:red;
}
.two{
	color:blue;
}
three:{
	color:pink;
}

1.添加一个类
addClass(“name类名”)
例：

$("div").eq(0).addClass("one");

1变红
2.移除一个类
removeClass(“name类名”)
例：

$("div").eq(1).removeClass("two");

3.判断一个类是否存在
hasClass(“name类名”)
例：

console.log($("div").hasClass("four"));

返回值是false
4.判一个类是否存在，true添加，false移除
toggleClass(“name类名”)
例：

$("div").eq(0).toggleClass(''one");
$("div").eq(2).toggleClass(''three");

1变回黑色
3变粉红

3.属性操作

（注：这里的属性操作是指写在标签里的属性，而不是写在css样式表里的属性）
用法与css操作几乎一致
html:

<img src="1.png" alt="1" title="one">

1.设置单个属性
attr(“name属性名”，“value属性值”)

$("img").attr("alt", "2");

alt变成了2

2.设置多个属性
与css操作一样也是以键值对的方式呈现的
attr(obj)
例：

$("img").attr({
      alt:"1",
      title:"two",
    })

alt又变回1；
title变成two