## 文本主要内容
- 样式和类操作
- jQuery 动画
- 节点操作
## 样式操作和类操作
作用：设置或获取元素的样式属性值。
### 样式操作
**1、设置样式：**
```javascript
//设置单个样式： css(属性，值);
$("div").css("background-color","red");
//设置多个样式： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
```
**2、获取样式：**
```javascript
//获取样式：css(属性);
//获取的时候如果有很多个，那么获取jquery对象中的第一个
alert($("div").css("width"));
```
举例如下：
20180205_1315.png
### 类操作（className）
**1、添加类样式：**
```javascript
$(selector).addClass("liItem"); //为指定元素添加类className
```
注意：此处类名不带点，所有类操作的方法类名都不带点。
**2、移除类样式：**
```javascript
$(selector).removeClass("liItem"); //为指定元素移除类 className
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
```
**3、判断有没有类样式：**
```javascript
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
```
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
举例：
```html
```
**4、切换类样式：**
```javascript
$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
```
解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
如果采用采用正常的思路实现上面这句话，代码是：
```javascript
if($("div").hasClass("current")){
//如果有类名，那么删除
$("div").removeClass("current")
}else{
//如果没有类名，那么添加
$("div").addClass("current")
}
```
现在有了toggleClass()方法，一行代码即可实现。
举例：
```html
```
实现的效果：
20180205_1330.gif
### 样式操作和类操作的比较
- 操作的样式非常少，那么可以通过`.css()`实现。
- 操作的样式很多，建议通过使用类 class 的方式来操作。
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
**举例**：addClass+removeClass
代码实现：
```html
```
上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。
效果：
20180205_1345.gif
```javascript
```
```html
```
```javascript
```
```html
```
```javascript
```
```html
```
```javascript
```
```
```
