转自:http://www.jbxue.com/article/24589.html

jquery中用到removeClass移除CSS类、addClass添加CSS类、toggleClass添加或者移除CSS类,hasClass判断是否已经存在CSS。
改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:“jQuery让JavaScript代码变得简洁!”,言归正传,来看jquery如何添加、移除CSS类:

1. removeClass() - 移除CSS类
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称

2.addClass() - 添加CSS类
$("#target").addClass("newClass");
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
$("#target").toggleClass("newClass") www.jbxue.com
//如果ID为“target”的元素已经定义了CSS样式,它将被移除;
//反之,CSS类“newClass”将被赋给该ID

4.hasClass("className") - 判断是否已经存在CSS
在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。

jQuery添加/改变/移除CSS类的更多相关文章

  1. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  2. 如何添加/移除CSS类

    在网页设计中,我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的clas ...

  3. js活jQuery实现动态添加、移除css/js文件

    下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function ad ...

  4. jQuery添加、移除、改变class属性

    jQuery中一般有3个关于改变元素class的函数addClass.removeClass.toggleClass addClass描述: 为每个匹配的元素添加指定的样式类名$('div').add ...

  5. jQuery动态追加移除CSS样式

    jQuery基础知识,动态添加删除CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. JQ添加移除css样式

    1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...

  7. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  8. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  9. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

随机推荐

  1. 一张图弄明确开源协议-GPL、BSD、MIT、Mozilla、Apache和LGPL 之间的差别

    导读 在开源软件中常常看到各种协议说明.GPL.BSD.MIT.Mozilla.Apache和LGPL. - 这些协议之间的有什么差别 - 怎样选择合适的开源协议 请看下文,特作记录一篇,以供兴许查看 ...

  2. 〖Linux〗简单的将Shell和一些文件打包成一个单独的“可执行文件”

    有时候给别人分享一个工具的时候,同时需要提供的文件比较多: 如果分享一个压缩包还得教会对方如何解压.执行哪个脚本,感觉需要传输的内容多了就不方便: 把几个Shell脚本和文件打包成一个“单独的可执行文 ...

  3. 【AIX】在命令前显示完整路径

    登录到AIX系统,发现在#前没有目录展示,这样我们在查看当前目前时很不方便,需要借助命令PWD才可以实现 解决方案: 在.profile文件中添加命令:export PS1="[LONGNA ...

  4. 【Linux】处理数据文件

    当存在大量数据的时候,通常很难处理这些信息及提取有用信息.Linux提供了一系列的命令行工具来处理这些数据. 1.排序数据 Linux:/usr/local/sbin # cat file2 1 0. ...

  5. Npoi导出excel整理(附源码)

    前些日子做了一个简单的winform程序,需要导出的功能,刚开始省事直接使用微软的组件,但是导出之后发现效率极其低下,绝对像web那样使用npoi组件,因此简单的进行了整理,包括直接根据DataTab ...

  6. jQuery处理下拉框(Select、radio、checkbox等)代码

    //遍历option和添加.移除option <script> function changeShipMethod(shipping){ var len = $("select[ ...

  7. adb shell dumpsys的使用

    该命令用于打印出当前系统信息,默认打印出设备中所有service的信息,可以在命令后面加指定的service name. 有两种方法可以查看service list: 1. adb shell dum ...

  8. Win极速文件搜索Listary

    对于开源的everything在win下搜索文件很高效了.不过在listary功能上更加的丰富..支持正则搜索 对比: 都是基于本地磁盘索引,进而实现快速搜素 00.有能力的还是购买pro,当然也有免 ...

  9. yum实现仅仅下载不安装包

    问题的产生,都是源于真实的需求... 01.yum安装切保存rpm包于本地 [root@yhs_web_1 ~]# vim /etc/yum.conf [main] cachedir=/var/cac ...

  10. ios中网络请求缓存

    #import <Foundation/Foundation.h> #import "ASIFormDataRequest.h" @protocol NetWorkde ...