在网页开发中，元素的样式可以在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. ArrayMap代替HashMap

    ArrayMap是一个<key,value>映射的数据结构,它设计上更多的是考虑内存的优化,内部是使用两个数组进行数据存储,一个数组记录key的hash值,另外一个数组记录Value值,它 ...

  2. 【个人经历】记自己的第一次GitHub开源代码共享经历

    题记: 自己做程序员快三年有余了,感觉自己和刚入职相比确实有了不少进步,当然三年要是不进步那不就傻了吗,有时候我也在想,我在这三年里留下了什么,当然也不是说有多么高尚的想法,就是以后对别人介绍自己的时 ...

  3. 通过html导出PDF如何分页

    每页一个DIV,加上样式page-break-inside:avoid; 即可分页了 .pdfpage{page-break-inside:avoid;} <div class="pd ...

  4. python函数 变量 递归

    1 语法 #语法 def 函数名(参数1,参数2,参数3,...): '''注释''' 函数体 return 返回的值 #函数名要能反映其意义 返回值数=0:返回None放回值数=1:返回object ...

  5. Debian 版本历史

    Production Releases Version Code name Release date End of life date 8.0 jessie April 25th 2015   7.0 ...

  6. 如何在 OS X 中安装 ruby

    如何在 OS X 中安装 ruby 软件包下载 链接: http://pan.baidu.com/s/1mgMil5I 密码: tiqg 安装 http://brew.sh/ 1. 先安装 brew( ...

  7. Python学习---装饰器/迭代器/生成器的学习【all】

    Python学习---装饰器的学习1210 Python学习---生成器的学习1210 Python学习---迭代器学习1210

  8. GitBlit集成AD域LDAP

    GitBlit的配置文件: gitlblit安装目录下的 /data/gitblit.properties   ,用记事本或其他编译器打开即可. 集成AD域的LDAP操作步骤 打开配置文件,添加以下内 ...

  9. Squid安装配置和使用

    文:铁乐与猫 环境 centos 6.5 x64 安装 最简单的一种就是yum安装. yum install squid 版本 rpm -qa | grep squid squid-3.1.23-16 ...

  10. linux面试总结

    一．填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 i节点 来标识. ...