下面讲述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. TCP/IP 物理层卷四 -- 数据报与虚电路

    一.数据报(Datagram) 1.1 概念 数据报是分组交换的一种,主要向通信子网中的端系统提供无连接的分组交换服务.通信子网的某主机发送一个报文时,无需建立连接,只需在实现高层协议的前提下对数据拆 ...

  2. 设计模式：门面模式（Facade）

      前面介绍的适配器模式讲的是如何将一个接口转换成客户所需要的另一个接口,它的目的在于 解决接口的不兼容性问题.现在这里有这样一个模式,它的目的在于如何简化接口,它可以将多个类的复杂的一切隐藏在背后, ...

  3. Docker部署前后端项目

    本地(ubuntu19.04)安装docker: sudo apt install docker.io SSH连接服务器: 安装Docker: yum update yum -y install do ...

  4. Git上传相关资料

    ############ssh key及 配置信息############# 设置Git的user name和email: $ git config --global user.name " ...

  5. Skills CodeForces - 613B (双指针)

    大意: $n$门课, 第$i$门分数$a_i$, 可以增加共$m$分, 求$cnt_{mx}*cf+mi*cm$的最大值 $cnt_{mx}$为满分的科目数, $mi$为最低分, $cf$, $cm$ ...

  6. CALL apoc.cypher.doIt创建动态节点的时候怎么指定多个标签？

    下面的创建节点实例,请教一下CALL apoc.cypher.doIt如何创建多个标签?现在的方式是只能指定一个标签! UNWIND [{name:"sdasdsad234fdgsasdfa ...

  7. Linux shellcode sample

    Linux shellcode sample HelloWorld.nasm ;HelloWorld.asm ;Author: Kul Subedi global _start section .te ...

  8. 物联网的语言c,python,go等

    日本生鱼片 电热水器的使用方法http://www.hiry.cn/b/mt/33959.html 物联网层次很多,首先要看你从事哪个层级的工作了.既然你问语言,那么肯定是开发类的工作,开发类的对象中 ...

  9. postMessage解决iframe跨域问题

    转:https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 ht ...

  10. mysql 命令行登录详解

    mysql -?或者是mysql --help或者是mysql -I显示mysql命令的选项. #最全的mysql登录方式: mysql -hIP -uUSENME -pPWD -PPORT DBNA ...