下面讲述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. HTML5自学之列表

    第5章. 网页列表与段落设计网页列表与段落是网页中的主要也是最常用的元素,其中,网页列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷的获得相应信息.网页 ...

  2. 使用request+bs4爬取所有股票信息

    爬取前戏 我们要知道利用selenium是非常无敌的,自我认为什么反爬不反爬都不在话下,但是今天我们为什么要用request+bs4爬取所有股票信息呢?因为他比较原始,因此今天的数据,爬取起来也是比较 ...

  3. 牛客 545A 小A与最大子段和 & CF 660F Bear and Bowling 4

    大意: 给定序列$a$, 求选择一个子区间$[l,r]$, 使得$\sum\limits_{i=l}^r(i-l+1)a_i$最大. $n\le2e5, |a_i|\le 1e7$. 记$s[i]=\ ...

  4. spring boot jpa criteria api是如何生成JPQL的

    当我们使用entityManager.createQuery(query)时,我们发现entityManager的注入对象如下: 也就是它:org.springframework.orm.jpa.Lo ...

  5. scrapyd使用教程

    1. 安装服务器: pip install scrapyd 启动: scrapyd 访问:127.0.0.1:6800 2. 安装客户端 pip install scrapyd-client 3. 进 ...

  6. JDK1.8中LinkedList的实现原理及源码分析

    详见:https://blog.csdn.net/cb_lcl/article/details/81222394 一.概述           LinkedList底层是基于双向链表(双向链表的特点, ...

  7. 关于IDEA的application.properties读取乱码,以及显示乱码问题

    设置编码 如果设置之后还是不成功,就重启IDEA 再不行就删除application.properties重新编辑, 我采用的是注释掉要读取的中文部分,再下面再写一行

  8. 关于页面多个ajax请求阻塞的问题

    最近遇到一个问题,我的一个页面有多个ajax请求,但是一个很快的请求却需要很长时间才返回,而且慢于一个耗时比较长的请求,我在考虑是不是有ajax异步并发有问题,但是查询了一些资料,ajax不存在这样的 ...

  9. jenkins自动部署代码到多台服务器

    下面讲一下如何通过一台jenkins服务器构建后将代码分发到其他的远程服务器,即jenkins自动部署代码到多台服务器. 1.下载 pulish over ssh 插件 2.系统管理 -> 系统 ...

  10. Delphi 无类型文件