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


Posted in jQuery onNovember 18, 2019

本文实例讲述了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>

运行效果:

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

示例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.3water.com/code/HtmlJsRun 测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
Jquery异步上传文件代码实例
Nov 13 #jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
jquery获取input输入框中的值
Nov 13 #jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 #jQuery
You might like
队列在编程中的实际应用(php)
2010/09/04 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
菜单效果
2006/10/14 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python中的下划线详解
2015/06/24 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python3.7 sys模块的具体使用
2019/07/22 Python
tensorflow之并行读入数据详解
2020/02/05 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
优秀毕业生就业推荐信
2014/05/22 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers