addClass和removeClass进行样式类型的修改相信比较容易学习和接受

但是用这两个方法去实现交替样式,像一些<li>列表的样式,还有同类型数据的呈现,

当然很多框架都给出了封装好的方法去实现,但是js本身就提供了一个很好用的函数来实现这一哦应用场景

例如这样的:

我们用toggleClass(切换类):如果有这个class就删除,没有就添加,

首先定义一个class样式,然后进行移除、添加、移除的切换,就实现了这样的效果。easy吧!

有趣的toggleClass实现交替样式的更多相关文章

  1. angular 中同级元素交替样式

    事件 : ng-click="addNews()"  所属div的层级:    div > div  >span 即,对于 event.target 查找的话最多 从s ...

  2. jquery动态样式操作

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 1 var p_class = $(" ...

  3. Jquery添加移除样式

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...

  4. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  5. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  6. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  7. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  8. addClass() 和 toggleClass()

    addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...

  9. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

随机推荐

  1. Linux文件系统及常用命令

    Linux文件系统介绍: 一 .Linux文件结构 文件结构是文件存放在磁盘等存贮设备上的组织方法.主要体现在对文件和目录的组织上.目录提供了管理文件的一个方便而有效的途径. Linux使用树状目录结 ...

  2. 负载均衡之让nginx跑起来

    一个简单的原因,我不得不考虑负载 小源做了个网站,很简单,传统的java开放框架,和一个tomcat搞定,让人没想到的是网站既然火起来了,很快一个tomcat就搞不定了,怎么办? 网站访问量很大,既然 ...

  3. Integer 和int 比较

    在jdk1.5的环境下,有如下4条语句: 1 2 3 4 Integer i01 = 59; int i02 = 59; Integer i03 =Integer.valueOf(59); Integ ...

  4. 发布开源库到JCenter所遇到的一些问题记录

    这周末自己瞎折磨了下,如何发布开源库到 JCenter,然后这过程中碰到了一些问题,在此记录分享一下 本篇是基于上一篇:教你一步步发布一个开源库到 JCenter 介绍的流程.步骤中所遇到的问题,所以 ...

  5. CSS布局之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. Windows 10创意者更新ISO发布!官方下载

    http://news.mydrivers.com/1/526/526719.htm 去年7月份,微软面向Windows 10推出了“周年更新”,让系统变得更加稳定好用.今天,Windows 10迎来 ...

  7. Java开源生鲜电商平台-系统架构与技术选型(源码可下载)

    Java开源生鲜电商平台-系统架构与技术选型(源码可下载) 1.  硬件环境 公司服务器 2.   软件环境 2.1  操作系统 Linux CentOS 6.8系列 2.2 反向代理/web服务器 ...

  8. java反射机制,以及对反射机制的了解,如有差池欢迎点评(初学者勿喷)

    本人学习java时间不长,但是对java很感兴趣,知道有博客园这个平台果断的注册,记录我的java成长日记,这也是我的处女作,虽然很菜但是还是希望大家能见证我的成长,觉得可以的可以和我讨论一起学习 在 ...

  9. php进阶篇

    字符串调用: $name = 'eco'; echo $name; //eco //双引号会解析变量 echo "$name"; //eco //单引号不会解析变量 echo '$ ...

  10. python数据存储技巧

    1.文本存储 比如我们现在有10篇文章,每篇文章由三部分组成,题目,作者,内容(title,author,content),然后要求这三个部分明确展示出来,并且每篇文章之间用=====分割. 大致思路 ...