转自: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. C++基础学习教程(六)----类编写的前情回想以及项目实战(1)

    在開始类的编写之前我们依旧须要回想整理一下前面所说的内容,(前面尽管是一个自己定义数据类型的实现过程,可是内容有点繁杂). 先看一段代码: /** @file calssStruct.cpp */ / ...

  2. Megcup2017 Dogfood

    问题描述 小强每天会在小区的某些位置摆一些狗盆,并在狗盆里倒入不同口味的狗粮.而所有的流浪狗都会跑到离自己第k近的狗盆那里吃狗粮,一定的跑动可以帮助狗保持身材. 已知小强牌狗粮目前只有10种口味,我们 ...

  3. LFU缓存

    https://leetcode-cn.com/problems/lfu-cache/description/ 缓存的实现可以采取多种策略,不同策略优点的评估就是"命中率".好的策 ...

  4. C语言连接MySQL数据库(转)

    c++连接MySQL有两种方式,1是原始的方法,2是用 Connector c++ .Connector c++  只是一种封装,使之更加方便. 1.原始方法 这里归纳了C API可使用的函数,并在下 ...

  5. POJ 2230 Watchcow (欧拉回路)

    Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5258   Accepted: 2206   Specia ...

  6. ef SQL Server 版本不支持数据类型“datetime2”

    我遇到这个问题是在用数据库模型的时候.当时我电脑上是sql2008 通过vs2010建立了一个ADO.net数据库模型,之后在项目上线的时候,临时把数据库换成了sql2005,在添加新闻的时候出现了“ ...

  7. jQuery插件EasyDrag轻松实现JS拖动的效果

    jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...

  8. 通过Stetho在Chrome上调试Android App

    引 入依赖包 compile 'com.facebook.stetho:stetho:1.3.1' 初始化一下 public class MyApplication extends Applicati ...

  9. WinRAR破解

    新建记事本文件(txt文件),然后将文件另存为以 rarreg.key 为文件名的文件(当然由于设置的不同,可能出现你保存后的文件为 rarreg.key.txt 没关系,将其重命名,删掉.txt 会 ...

  10. 使用 Cookie 而无需 ASP.NET 核心标识的身份验证

    https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/cookie?tabs=aspnetcore2x#tabpan ...