在网页开发中，元素的样式可以在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. Linux之FineBI集群部署

    在企业应用中,通常单个计算机的配置是有限的,而企业应用又是高并发的需求,这个时候会通过计算机集群的方式来提高并发数,从而提高整体应用服务的性能.集群是将多台计算机作为一个整体来提供相关应用的服务.Fi ...

  2. Android 自定义AlertDialog(退出提示框)

    有时候我们需要在游戏或应用中用一些符合我们样式的提示框(AlertDialog) 以下是我在开发一个小游戏中总结出来的.希望对大家有用. 先上效果图: 下面是用到的背景图或按钮的图片 经过查找资料和参 ...

  3. vue项目部署上线

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对 ...

  4. 612.1.003 ALGS4 | Stacks and Queues

    Algorithm | Coursera - by Robert Sedgewick Type the code one by one! 不要拜读--只写最有感触的!而不是仅仅做一个笔记摘录员,那样毫 ...

  5. Python这个缩进让我焦头烂额！最奇葩的缩进...

        例如如下程序.     运行上面代码,如果输入年龄小于20,将会看到如下运行结果.     从上面代码可以看出,如果输入的年龄大于20,则程序会执行整体缩进的代码块. 再次重复:Python不 ...

  6. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  7. lua5.3+luasocket

    今天安装了luasocket,遇到了很多错误,百度并没有什么针对lua5.3的版本安装luasocket的文章,在这里记录一下. 1.下载lua5.3 下载到了lua-5.3.5.tar.gz版本的l ...

  8. Android组件系列----Activity组件详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  9. 单独配置 Ehcache

    package com.shy.ehcache; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheManager; import net ...

  10. mac 打开整个系统的隐藏文件

    打开:defaults write com.apple.finder AppleShowAllFiles -bool true 关闭:defaults write com.apple.finder A ...