下面讲述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. 【扩展GCD】荒岛野人

    题目 [题目描述] 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,-,M.岛上住着N个野人,一开始依次住在山洞C1,C2,-,CN中,以后每年,第i个野人会沿顺时针 ...

  2. 【Usaco2014Open银组】双导航(gpsdual)

    题目 [题目描述] FJ 最近网购了一台小车.但是由于他的草率,在选择加装物品时偶然地点击了两次"Submit" ,结果最后他的小车装了两台GPS 导航系统!更糟的是,这两个系统对 ...

  3. CentOS7部署Tomcat服务器

    1. 软件 存放路径:/usr/local/src apache-tomcat-9.0.22.tar.gz openjdk-12_linux-x64_bin.tar.gz 2.事先配置 启动后关闭防火 ...

  4. MySQL的变量

    MySQL的变量 变量分两种,系统变量和用户变量 来源:https://blog.csdn.net/J080624/article/details/73828012 [1]系统变量 系统定义好的变量, ...

  5. PyTorch安装问题解决

    现在caffe2被合并到了PyTorch中 git clone https://github.com/pytorch/pytorch pip install -r requirements.txtsu ...

  6. NativeScript —— 初级入门（跨平台的手机APP应用）《二》

    NativeScript项目结构 根文件夹 package.json —— 这是适用于整个应用程序的NativeScript主项目配置文件. 它基本概述了项目的基本信息和所有平台要求. 当您添加和删除 ...

  7. IDEA修改Maven全局配置

    在使用过程中发现,IDEA每次新建一个Project ,这个maven配置都会初始化默认的. 这里需要设置下全局配置: File -> Other Settings -> Settings ...

  8. MySQL配置文件my.cnf中文详解

    #BEGIN CONFIG INFO #DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 #TYPE: SYSTEM #END CONFIG INFO # # ...

  9. ctfd搭建

    CTFd 0x00 前言 搭个CTF平台,看能不能带动一下学校的CTF参与度. 一个下午都在搭这个平台:O 抓瞎摸索,最后成功用Apache+mod_wsgi也算是功德圆满了. 进入正题: 系统: C ...

  10. linux系统查看某个用户错误登录次数

    pam_tally2 --user user_name 查看user_name用户的错误登录次数 pam_tally2 --user user_name --reset 清空user_name用户的错 ...