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”); //此处类型不带点，所有类操作的方法类名都不带点

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

 3）判断有没有类样式

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

4）切换类样式

$(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 */$(selector).show(“slow”); // 用法三：// 参数一可以是数值类型或者字符串类型// 参数二表示：动画执行完后立即执行的回调函数$(selector).show(2000, function() {}); // 用法四：// 不带参数，作用等同于 css(“display”, ”block”)/* 注意：此时没有动画效果 */$(selector).show();