JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
更新时间：2019年11月18日 11:25:44 作者：xuehyunyu
这篇文章主要介绍了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作,涉及jquery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
本文实例讲述了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类。分享给大家供大家参考，具体如下：
代码示例：
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: #91DB4B;
}
</style>
<title>类切换</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
//鼠标事件
$("#d").mouseover(function () {
//增加类
$(this).addClass('a');
}).mouseout(function () {
//删除类
$(this).removeClass('a');
})
})
</script>
</head>
<body>
<div id="d">
fdhjuyk
</div>
</body>
</html>
运行效果：
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 300px;
width: 300px;
background-color: orange;
}
.a{
background-color: #91DB4B;
}
</style>
<title>类切换</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
/*开始没有类a则添加，有类a则删除*/
$("#d").mouseover(function () {
//在删除与添加类操作不停切换时，使用toggleClass
$(this).toggleClass('a');
}).mouseout(function () {
$(this).toggleClass('a');
})
})
</script>
</head>
<body>
<div id="d">
fdhjuyk
</div>
</body>
</html>
运行效果同上例。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了jQuery实现单击按钮遮罩弹出对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
某某同学最近写了个基于jquery的信息弹出插件showInfoDialog，该插件对背景进行遮罩，然后弹出信息显示框，信息显示种类包括(操作成功/错误信息/警告信息/通知信息)感兴趣的朋友可以了解下2013-01-01
有时,要实现对于一篇文章的关键词部分的提示,想实现的效果比如是,当鼠标移动到这个关键词时,弹出相关的一段文字或图片的介绍。2010-01-01
这篇文章主要介绍了ztree搜索中多级菜单展示不全的解决方法，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了jquery实现简单Tab切换菜单效果的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JQuery球队选择实现方法,实例分析了jQuery中鼠标事件与页面元素相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了JQuery ajax局部刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码，小伙伴们根据自己的需求补全form部分吧，希望大家能够喜欢。2015-03-03
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。2011-06-06
因为要给新员工进行培训jQuery.UI方面的内容，我之前学习的都是jquery.ui-1.6b的，现在的版本升级到jquery-ui-1.7.1，除了样式上有很大调整以外，API也有了很大的变化。2009-08-08
最新评论