jQuery基础知识点总结(DOM操作)

使用jQuery的方式来操作DOM更加的简洁、方便，统一的调用方式方便学习并且可降低学习成本。

1、样式属性操作

1）设置样式属性操作

①设置单个样式：

// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值
$(selector).css(“color”, “red”);

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

// 参数为 {}（对象）
$(selector).css({“color”: “red”, “font-size”: “30px”});

2）获取样式属性操作

// 参数表示要获取的 样式属性名称
$(selector).css(“font-size”);

2、类操作

1）添加类样式

——addClass(className)为指定元素添加类className

$(selector).addClass(“liItem”); //此处类型不带点，所有类操作的方法类名都不带点

2）移除类
        ——removeClass(className)为指定元素移除类className

$(selector).removeClass(“liItem”);
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类

 3）判断有没有类样式

        ——hasClass(className)判断指定元素是否包含类className

$(selector).hasClass(“liItem”); //返回值为true或false

4）切换类样式

        ——toggleClass(className)为指定元素切换类className，该元素有类则移除，没有指定类则添加

$(selector).hasClass(“liItem”);

【注意】

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

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

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

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

关键字：简约、粗暴、干净利落、直截了当

3、jQuery动画

3.1隐藏显示动画

①show方法

// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);
// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */								 
 1/5    1 2 3 4 5 下一页 尾页