html中js删除类和增加类,JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例...

本文实例讲述了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类。分享给大家供大家参考，具体如下：

代码示例：

示例1

div{

height: 300px;

width: 300px;

background-color: orange;

}

.a{

background-color: #91DB4B;

}

类切换

$(function () {

//鼠标事件

$("#d").mouseover(function () {

//增加类

$(this).addClass('a');

}).mouseout(function () {

//删除类

$(this).removeClass('a');

})

})

fdhjuyk

运行效果：

示例2：

div{

height: 300px;

width: 300px;

background-color: orange;

}

.a{

background-color: #91DB4B;

}

类切换

$(function () {

/*开始没有类a则添加，有类a则删除*/

$("#d").mouseover(function () {

//在删除与添加类操作不停切换时，使用toggleClass

$(this).toggleClass('a');

}).mouseout(function () {

$(this).toggleClass('a');

})

})

fdhjuyk

运行效果同上例。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。