使用jQuery操作DOM

使用jQuery操作DOM

1.1 知识点

 

1.2 样式操作

作用：设置或获取元素的样式属性值

1 设置样式属性操作：

a设置单个样式：

// 第一个参数表示：样式属性名称

// 第二个参数表示：样式属性值

$(selector).css(“color”,
“red”);

b设置多个样式：（也可以设置单个）

// 参数为 {}（对象）

$(selector).css({“color”:
“red”,
“font-size”:
“30px”});

 

2获取样式属性操作：

// 参数表示要获取的 样式属性名称

$(selector).css(“font-size”);

此时，会返回”font-size”样式属性对应的值。

1.2.1 类操作

添加类样式：

(addClass) 为指定元素添加类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”);

 

注意点：

操作类样式的时候，所有的类名，都不带点（.）

 经验：

1 操作的样式非常少，那么可以通过.css()这个 方法来操作

2 操作的样式很多，那么要通过使用类的方式来操作

 

3 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）

 

前面内容特色总结：简约、“粗暴”、干净利落、直截了当

案例：图片京东Table栏