下面讲述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. 算法 - k-means算法

    一.聚类思想 所谓聚类算法是指将一堆没有标签的数据自动划分成几类的方法,属于无监督学习方法,这个方法要保证同一类的数据有相似的特征,如下图所示:     根据样本之间的距离或者说是相似性(亲疏性),把 ...

  2. JAVA重载和数组

    Java 重载:相同的方法名,但参数个数或者类型不一样的情况下,自动执行不同的方法 数组:   int[] array=new int[5];  System.out.println(array); ...

  3. Vue首页加载过慢 解决方案

    一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...

  4. vue+element 使用Export2Excel导出表格组件

    下载表格组件是根据我自己的业务需求来封装的 使用的是vue中 xlsx 的插件,需要安装新的依赖及配置 仅供参考 不保证和你百分百匹配 安装依赖 npm install -S file-saver x ...

  5. 提升scrapy的爬取效率

    增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发设置成了为100. 降低日志级别 ...

  6. MySQL两种内核对比

    MySQL内核 https://blog.csdn.net/baichoufei90/article/details/83504446 关键字:全文索引 索引外置 两种内核:MyISAM 和InnoD ...

  7. 2018年4月份，阿里最新的java程序员面试题目，仅供参考。

    目录 技术一面(23问) 技术二面(3大块) 性能优化(21点) 项目实战(34块) JAVA方向技术考察点(15点) JAVA开发技术面试中可能问到的问题(17问) 阿里技术面试1 1.Java I ...

  8. python 出现OSError: [Errno 8] Exec format error的原因

    访问 .py文件的网页的时候会出现 Exec format error的问题, 一般情况下是由于基于Unix(Linux,Mac OS)系统下的问题,办法如下 1 .chmod +x  filenam ...

  9. C++中写文件ofstream 的<< 操作符 与C风格的fwrite 的笔记

    在某次工作中,调用了某SDK接口,该接口通过一个回调函数返回需要的内容.我们需要的内容是H.264码流,该码流通过一个unsigned char* 变量带回,另外还有一个长度 int length.为 ...

  10. c++ 实时通信系统(基础知识TCP/IP篇)

    编写前的基础知识 C/S结构: C/S是Client/Server,即客户端/服务器端架构,一种典型的两层架构.客户端包含一个或多个在用户的电脑上运行的程序服务器端有两种,一种是数据库服务器端,客户端 ...