第4章 jQuery常用方法-【千锋教育】Jquery从入门到实战

第4章 jQuery常用方法 class属性操作 HTML属性操作 元素尺寸大小 其他常用方法 class属性操作 HTML属性操作 ☞点击查看本小节知识架构 元素尺寸大小 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 4.2 4.3 4.1 其他常用方法 ☞点击查看本小节知识架构 4.4 学习目标 了解 掌握 掌握 了解jQuery中常用方法的使用 1 2 掌握jQuery中对HTML属性的操作方法 3 掌握jQuery中对元素尺寸的操作方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 在网页开发过程中，需要改变某些元素的class属性，获取某些元素的文本内容，或是计算元素在网页中所占据的空间大小等。利用jQuery库去实现这些操作时，更加简便快捷。虽然方法简单，但是使用频繁，所以需要大家重点掌握，本章将带领大家学习使用jQuery的常用方法和高级技巧。 4.1 class属性操作 4.1.1 addClass()方法 返回目录 4.1.2 removeClass()方法 4.1.3 toggleClass()方法 4.1.4 hasClass()方法 4.1 class属性操作 HTML标签的class属性是给元素添加样式的，在前端开发中非常重要。下面分别介绍如何在jQuery中对class类名进行添加、删除、切换和判断其是否存在。 addClass()方法向被选元素添加一个或多个类名。当需要添加多个类名时，从空格隔开即可，语法为： 4.1.1 addClass()方法 4.1 class属性操作 具体代码如下所示。 4.1.1 addClass()方法 4.1 class属性操作 addClass()方法的参数除了可以设置字符串类型外，还可以添加回调函数的形式，这样可以实现更加特殊的需求。回调函数的第一个参数为索引值，第二个参数为已有class类名，语法为： 当元素已经拥有相应的class类名时，添加的时候就会跳过已存在的类名，这样可以避免重复添加。 4.1.1 addClass()方法 4.1 class属性操作 具体代码如下所示。 4.1.2 removeClass()方法 4.1 class属性操作 removeClass()方法删除被选元素一个或多个类名。当需要删除多个类名时，以空格隔开即可，语法为： 具体代码如下所示。 4.1.2 removeClass()方法 4.1 class属性操作 当要删除的类名在指定的元素上不存在时，元素不会有任何变化，这样可以避免出错，代码如下所示。 同理，removeClass()方法也可以添加回调函数，参数也是相同的，语法为： 4.1.2 removeClass()方法 4.1 class属性操作 具体代码如下所示。 4.1.3 toggleClass()方法 4.1 class属性操作 toggleClass()方法被选元素进行添加类名和删除类名的切换操作。有时候需要切换一个元素的状态，这时非常适合利用toggleClass()方法，语法为： 具体代码如下所示。 4.1.3 toggleClass()方法 4.1 class属性操作 具体代码如下所示。 同理，toggleClass()方法也可以添加回调函数，参数也是相同的，语法为： 4.1.3 toggleClass()方法 4.1 class属性操作 toggleClass()方法还可以设置一个可选参数，当参数为true时，只进行添加类名操作，当参数为false时表示，只进行删除类名操作，语法为： 具体代码如下所示。 4.1.4 hasClass()方法 4.1 class属性操作 hasClass()方法检查被选元素是否包含指定的类名。如果被选元素包含指定的类名，该方法返回true，如果不包含指定的类名，则该方法返回false，语法为： 具体代码如下所示。 4.2 HTML属性操作 4.2.1 attr()方法 返回目录 4.2.2 prop()方法 4.2.3 data()方法 4.2 HTML属性操作 在HTML标签中，除了可以设置class属性外，还可以设置其他属性。如id、title、name、value等属性。这些属性的属性值都可以通过统一的方法来获取或设置。 4.2 HTML属性操作 4.2.1 attr()方法 attr()方法用于返回或设置被选元素的属性值。通过参数个数来实现取值与赋值的操作。语法为： 先来看看取值操作，具体代码如下所示。 4.2 HTML属性操作 4.2.1 attr()方法 再来看attr()方法的赋值操作，具体代码如下。 上面的写法可以简化成链式的写法，即$('div').att