为选择的元素添加 CSS 类，可以使用 .addClass() … 移动 CSS 类，用的是 .removeClass() … 切换 CSS 类可以使用 .toggleClass() .. 它的功能就是如果在元素上已经拥有了要切换的那个类，就会去掉它，如果没有，就加上它 …

使用 .hasClass() 可以判断元素有没有指定的 CSS 类 .. 下面，我们去试一下这些方法 …

测试

这个文档里有一张图像，它的父元素是一个拥有 atlas 这个 ID 的 div 标签 …

先选择这个 img 元素 .. $( '#atlas > img' ) 再用 .addClass() 给它添加一个 css 类 … 要添加的类的名称是 img-circle … 这个类的样式已经在样式表里定义好了... 它可以把图像变成圆形的 ..

$( '#atlas > img' ).addClass( 'img-circle' )

再去判断一下元素是否有指定的类 … 用的是 .hasClass() 这个方法 ... 它的参数就是要判断的那个类的名称 ...

$( '#atlas > img' ).hasClass( 'img-cricle' )

.hasClass() … 这个方法返回的值是布尔值，如果元素包含指定的类，会返回真，也就是 true … 如果不包含的话 .. 会返回 false …

移除元素上指定的类，用的是 .removeClass() ... 在括号里，给它指定一个要移除的类的名称 ...

$( '#atlas > img' ).removeClass( 'img-circle' )

移除以后，再用 .hasClass 去测试一下 …

$( '#atlas > img' ).hasClass( 'img-cricle' )

这次返回的结果是 false … 因为元素已经没有 img-cricle 这个类了 …

.toogleClass()

下面我们再去试一下 .toogleClass() 这个方法 … 为了试一下这个方法， 我们可以给选择的元素绑定一个 click 事件 …

$( '#atlas > img' ).click(function() { $( this ).toggleClass( 'img-circle' ); });

在 .click() 这个方法里，添加一个函数 … 这个函数要做的就是为当前这个对象， 这里的 this 这个关键词，表示当前这个对象 … 在这里表示的就是这个被点击的图像 …

使用一个 .toogleClass() 方法 … 为这个图像添加一个切换的 .img-circle 类 …

在后面介绍事件的视频里，我们会去详细的介绍事件的使用 …

点击图像 … 会为图像添加一个 .img-circle 类 .. . 所以图像会变成圆形的 …. 再点一下这个图像 … 再去掉 .img-circle 类 …