在网页开发中，元素的样式可以在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. Pwn with File结构体（四）

    前言 前面几篇文章说道,glibc 2.24 对 vtable 做了检测,导致我们不能通过伪造 vtable 来执行代码.今天逛 twitter 时看到了一篇通过绕过 对vtable 的检测 来执行代 ...

  2. Claims-based认证解析

    Claims-based认证相关的两个重要的类ClaimsIdentity以及ClaimsPrincipal解析 ClaimsIdentity以及ClaimsPrincipal是.NET下Claims ...

  3. CCSUOJ评测系统——第三次scrum冲刺

    1.小组成员 舒 溢 许嘉荣 唐 浩 黄欣欣 廖帅元 刘洋江 薛思汝 2.个人在小组第三次冲刺的任务及其完成情况描述. 本人在小组第三次冲刺的任务是负责代码的编写,其他人提需求和改进,代码是采用Git ...

  4. 微信网页IOS上传图片旋转解决方案

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. MyEclipse中修改servlet模板

    1.在MyEclipse目录下搜索com.genuitec.eclipse.wizards,得到搜索结果 com.genuitec.eclipse.wizards_8.4.100.me20091213 ...

  6. 解决NSTextContainer分页时文本截断问题

    解决NSTextContainer分页时文本截断问题 NSTextContainer与NSLayoutManager配合使用可以将大文本文件分页,但是,分页过程中会遇到问题,显示字符被截断的问题:) ...

  7. JavaWeb定时器-Spring3.x及更高版本Task使用

    大背景 现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展.作业调度是现代系统中对 Java 应用程序的一般要求,而且也是对 Java 开发人员一贯的要求 ...

  8. MySql报2006error错误的解决方法（数据过大）

    最近迁移项目中发现,转移数据库出现的几个问题,其中之一就是 2006 error,解决过程如下: 首先贴出报错结果 [Msg] Finished - Unsuccessfully 出现这个结果,首先检 ...

  9. (1)List集合 (2)Queue集合 (3)Set集合

    1.List集合(重中之重)1.1 基本概念 java.util.List接口是Collection接口的子接口,该接口中元素有先后放入次序并允许重复 该接口的主要实现类:ArrayList类.Lin ...

  10. "字符串"经过strip 之后还是字符串, 而"字符串"经过split 分开后,就变成了一个列表["x","xx","xxx"]

    "字符串"经过strip 之后还是字符串, 而"字符串"经过split 分开后,就变成了一个列表["x","xx",&q ...