下面讲述jQuery操作css类，进行类的添加，移除，以及前两项功能的结合操作。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>属性操作_CSS类</title>

        <style type="text/css">

            .divclass {

                color: red;

            }

            .div1 {

                background-color: yellow;

            }

            #div1 {

                border: 1px solid black;

                width: 400px;

                height: 250px;

                margin: auto;

            }

            #father {

                border: 1px solid white;

                width: 450px;

                height: 300px;

                margin: auto;

                text-align: center;

            }

        </style>

        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

        <script>

            /**

             * 需求：

             * 1.点击button，使一个div的背景颜色变为 黄色

             * 2.点击button，清空之前设置的背景颜色

             * 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原

             */

            /**

             * 方法分析：

             *  1.addClass(class) 添加一个class属性

             *  2.removeClass([class]) 移除一个class属性

             *  3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类

             */

            /**

             *代码实现

             */

            $(function() {

                // 1.点击button，使一个div的背景颜色变为黄色

                $("#button1").click(function() {

                    $("#div1").addClass("div1");//添加div1类使背景变色

                });

                // 2.点击button，清空之前设置的背景颜色

                $("#button2").click(function() {

                    $("#div1").removeClass("div1");//点击去掉类的按钮以去掉类

                });

                // 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原

                $("#button3").click(function() {

                    $("#div1").toggleClass("divclass");

//                     toggleClass相当于addClass和removeClass的结合，即点击一次为addClass再点击一次为removeClass

                });

            });

        </script>

    </head>

    <body>

        <div id="father">

            <div id="div1">AAAAAA</div><br />

            <input type="button" value="背景颜色变为黄色" id="button1" />

            <input type="button" value="背景颜色清空" id="button2" />

            <input type="button" value="字体颜色开关" id="button3" />

        </div>

    </body>

</html>

运行结果：

刚开始：

点击第一个按钮：

点击第二个按钮：

点击第三个按钮两次：

jQuery_CSS类操作的更多相关文章

  1. Arrays 类操作 Java 的数组排序

    使用 Arrays 类操作 Java 中的数组 Arrays 类是 Java 中提供的一个工具类,在 java.util 包中.该类中包含了一些方法用来直接操作数组,比如可直接实现数组的排序.搜索等( ...

  2. .net使用SqlBulkCopy类操作DataTable批量插入数据库数据，然后分页查询坑

    在使用SqlBulkCopy类操作DataTable批量插入数据,这种操作插入数据的效率很高,就会导致每一条数据在保存的时间基本一样,在我们分页查询添加的数据是,使用数据的添加时间来排序就会出现每页的 ...

  3. PDF.NET数据开发框架实体类操作实例

    PDF.NET数据开发框架实体类操作实例(MySQL)的姊妹篇,两者使用了同一个测试程序,不同的只是使用的类库和数据库不同,下面说说具体的使用过程. 1,首先在App.config文件中配置数据库连接 ...

  4. 在Android下通过ExifInterface类操作图片的Exif信息

    什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了 数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...

  5. 使用File类操作文件或目录的属性

    在学I/O流之前,我先总结一下使用File类操作文件或目录的属性. package com.File; import java.io.File; import java.io.IOException; ...

  6. HTML5 01. 布局、语义化标签、智能化表单、表单元素／标签／属性／事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  7. jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

    样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...

  8. Java8 时间日期类操作

    Java8 时间日期类操作 Java8的时间类有两个重要的特性 线程安全 不可变类,返回的都是新的对象 显然,该特性解决了原来java.util.Date类与SimpleDateFormat线程不安全 ...

  9. MySQL Index--NOT IN和不等于两类操作无法走索引？

    经常被问,NOT IN和<>操作就无法走索引? 真想只有一个:具体问题具体分析,没有前提的问题都是耍流氓. 准备测试数据: ## 删除测试表 DROP TABLE IF EXISTS tb ...

随机推荐

  1. Dedesql数据库类详解(二次开发必备教程)

    其实数据库类织梦之前就有一个介绍,http://help.dedecms.com/v53/archives/functions/db/,这篇文章讲解了数据库类的一些常见的使用方法,不过没有结合例子去介 ...

  2. 为什么说Python采用的是基于值的内存管理模式？

    Python中的变量并不直接存储值,而是存储了值的内存地址或者引用,假如为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址.

  3. python-redis缓存-pool

    #连接池 import redis pool=redis.ConnectionPool(host='192.168.71.140', port=6379) r = redis.Redis(connec ...

  4. Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量

    Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量 2019年02月18日 23:52:37 xiongxianze 阅读数 398更多 分类专栏: ...

  5. postgres 常规操作杂记

    分布式:1.扩容不方便(数据重分布)2.分布键变更很麻烦3.分布键选择(架构设计)谨慎4.跨库join性能差5.分布式事务性能差6.sql限制多,功能确实多7.应用改造成本巨大8.全局一致性时间点恢复 ...

  6. windows下使用zookeeper

    windows下dos窗口操作:https://blog.csdn.net/a632189007/article/details/78085858

  7. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  8. 互联网安全架构之常见的Web攻击手段及解决办法

    一.Web 安全常见攻击手段 XSS(跨站脚本攻击) SQL 注入 CSRF(跨站请求伪造) 上传漏洞 DDoS(分布式拒绝服务攻击)等 二.攻击手段原理及解决方案 1.XSS攻击 原理:XSS 攻击 ...

  9. 什么是DDoS攻击？

    本文转载自知道创宇云安全的知乎回答:DDoS 的肉鸡都是哪来的? 说到DDoS攻击,我们就不得不说“肉鸡”. “肉鸡”可谓是DDoS攻击的核心大杀器,作为一个要发起DDoS攻击的黑客来说,没有肉鸡就是 ...

  10. 数据库 （二）：MySQL密码策略与用户管理

    为了加强安全性,MySQL5.7为root用户随机生成了一个密码可通过# grep "password" /var/log/mysqld.log 命令获取MySQL的临时密码用该密 ...