在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css（）方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案例，小结使用jquery操作类样式的方法。一共X种写法如下：

一、单一类样式的添加删除

1.$（ “元素名” ）.addClass( "类样式名称" )；

1.$（ “元素名” ）.removeClass( "类样式名称" );

二、多个类样式的添加删除（链式编程）

1.$( "元素名" ).addClass( "类样式1名称" ).addClass( "类样式2名称" ).addClass( "类样式3名称" )......addClass( "类样式n名称" )；

2.$( "元素名").removeClass( “类样式1名称” ).removeClass( "类样式2名称" ).removeClass( "类样式3名称" )......removeClass( "类样式n名称" );

三、removeClass( );

括号中什么也不写，是该元素的所有的样式

四、hasClass( "类样式名" )；

判断元素是否包含该类样式，返回值结果为bool类型

四、toggleClass( "类样式名" )；

切换该样式，即添加、删除，重复执行。

案例代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>jQuery操作类样式----开关灯案例</title>

         <style type="text/css">

             .blank{

                 background-color: black;

             }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

                 //获取按钮,注册点击事件

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

                     //判断body是否包含.blank样式

                     if($("body").hasClass("blank")){

                         //包含------开灯,移除类样式

                         $(this).val("关灯");

                         $("body").removeClass("blank");

                     }else{

                         //不包含----关灯,添加类样式

                         $(this).val("开灯");

                         $("body").addClass("blank");

                     }

                 });

             });

         </script>

     </head>

     <body>

         <input type="button" id="btn" value="关灯" />

     </body>

 </html>

jQuery----操作类样式（依托开关灯案例）的更多相关文章

  1. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  2. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  3. JQuery操作类数组的工具方法

    JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...

  4. jQuery操作标签--样式、文本、属性操作, 文档处理

    1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...

  5. jquery操作CSS样式全记录

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  6. jquery 操作table样式拖动参考

    参考: http://blog.csdn.net/kdiller/article/details/6059727 http://www.jb51.net/article/59795.htm

  7. jQuery组织您钞四----jQuery操作DOM

    一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. ...

  8. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  9. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

随机推荐

  1. srop实战

    前言 srop 的作用比较强,在条件允许的情况下,尽量使用它.题目来自于 i春秋的一个比赛. 题目链接: https://gitee.com/hac425/blog_data/blob/master/ ...

  2. linux 网络命令ping、关闭防火墙、ifconfig、ip addr、setup、nmtui、write、wall、mail

    ping /bin/ping语法:ping [选项] IP地址 选项:-c 指定发送次数功能描述:测试网络连通性 ping -c 4 192.168.1.101 关闭防火墙systemctl stop ...

  3. 使用dva脚手架（dva-cli）快速构建React项目

    安装 dva-cli 你应该会更希望关注逻辑本身,而不是手动敲入一行行代码来构建初始的项目结构,以及配置开发环境. 那么,首先需要安装的是 dva-cli .dva-cli 是 dva 的命令行工具, ...

  4. [Asp.net mvc]Asp.net mvc 使用Json传递数据

    在之前的练习中一直是直接传递的Model到后台或是单个数据到后台,今天在使用中遇到了点问题,不能使用Model传递到后台,但又要实现多个数据到后台,实验了多次有了以下的解决方案,给自己留个笔记. 功能 ...

  5. Oracle常见等待事件

    1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: ·         当一个会话视图 ...

  6. 第一章 数据库和SQL

    1-1 数据库是什么?   一.数据库的含义 数据库是将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合. 数据库DB   二.数据库管理系统 DBMS 用来管理数据库的计算机系统称为 ...

  7. 如何快速的给你的项目添加icon图标

    如何快速的给你的项目添加icon图标 下载软件 如何制作图片 将制作的图标拖到项目当中 设置启动页 注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉

  8. UIWebView如何加载本地图片

    UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...

  9. [翻译] ZFDragableModalTransition

    ZFDragableModalTransition Usage - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender ...

  10. Linux wc命令详解

    wc常见命令参数 wc -l : 统计行 wc -c: 统计字节数 wc -m:统计字符数,不能与-c同时使用 wc -w:统计字数 wc -L:打印最长长度 注意: wc 可以直接后面跟文件使用,但 ...