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实现前端分页功能
Mar 23 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php 字符串替换的方法
2012/01/10 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
四议两公开实施方案
2014/03/28 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
保护地球的标语
2014/06/17 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
商务邀请函
2015/01/30 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书