在网页开发中，元素的样式可以在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. 破解 jeb 2.3.7 demo

    前言 使用的技术和上文的一样. mips 版本的修改版 修改版: https://gitee.com/hac425/jeb-mips 正文 安卓版 jeb-2.3.7.201710262129-JEB ...

  2. the cause of StringBuild class

    如果我们对字符串进行拼接操作,每次拼接,都会创建一个新的String对象,既耗时,又浪费空间,而StringBuild类可以解决这个问题. 那么StringBuild类是如果解决的呢? 因为Strin ...

  3. RollViewPager图片轮播效果开源框架的使用

    RollViewPager是一个自动轮播的Viewpager, 支持无限循环. 触摸时会暂停播放,直到结束触摸一个延迟周期以后继续播放. 看起来就像这样.指示器可以为点可以为数字还可以自定义,位置也可 ...

  4. Pig安装

    环境: hadoop-2.4.1.jdk1.6.0_45.pig-0.12.1   1.下载pig并解压 tar -xzvf pig-0.12.1.tar.gz 2.设置环境变量 export PIG ...

  5. 转载：java基础之单例

    转载:https://blog.csdn.net/goodlixueyong/article/details/51935526 https://www.cnblogs.com/cielosun/p/6 ...

  6. AWS CSAA -- 03 Identity Access Management IAM

    009 IAM 101 012 IAM Summary 问题汇总: Lab1:对root account进行加固 Lab 2:利用CloudWatch设置BillingAlarm

  7. 【Kettle】8、变量参数传递介绍

    本文为转载,感觉作者的辛勤劳作:http://blog.csdn.net/rotkang/article/details/21008271 ------------------------------ ...

  8. 在centos系统安装mongodb

    在Linux CentOS系统上安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到环境变量之前,执行“php -v”命令查看当前php版本信息时时, ...

  9. grep命令.md

    grep命令 简介 Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Prin ...

  10. 【bzoj 4589】Hard Nim

    题目 根据我为数不多的博弈知识我发现需要求多少种方案使得异或和为\(0\) 非常显然就是构造出那个质数多项式\(F\),答案就是\(F^n(0)\),当然这里是异或卷积 于是美滋滋的敲上去一个多项式快 ...