通过 jQuery,可以很容易地对 CSS 元素进行操作。


jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

  • addClass() - 向被选元素添加一个或多个类

  • removeClass() - 从被选元素删除一个或多个类

  • toggleClass() - 对被选元素进行添加/删除类的切换操作

  • css() - 设置或返回样式属性


实例样式表

下面的样式表将用于本页的所有例子:

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:

实例

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

尝试一下 »

您也可以在 addClass() 方法中规定多个类:

实例

$("button").click(function(){
  $("#div1").addClass("important blue");
});

尝试一下 »

提示:想了解jQuery使用addClass()方法给元素添加class的具体练习吗?请参考本站的jQuery编程实战!


jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:

实例

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

尝试一下 »

提示:通过上面的示例,你是否学会如何在jQuery中删除class属性了呢?或许,你也可以通过本站的jQuery编程实战的“使用jQuery删除HTML元素的class”一节来巩固知识!


jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

实例

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

尝试一下 »


jQuery css() 方法

我们将在下一章讲解 jQuery css() 方法。

jQuery CSS 类的更多相关文章

  1. jQuery Css类

    通过 jQuery,可以很容易地对 CSS 元素进行操作 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个 ...

  2. JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  3. jQuery 获取并设置 CSS 类

    通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - ...

  4. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  5. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  6. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  7. jquery操作html元素之( 获取并设置 CSS 类)

    jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

  8. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  9. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

随机推荐

  1. jsp连接书库DatabaseUtil类

    public class DatabaseUtil { private static String driver = ConfigManager.getProperties("driver& ...

  2. GNU/Linux需要特别注意的目录

    /bin         存放大多数系统命令,如cat.mkdir.mv.cp.tar.chmod等 /boot       存放开机所需要的文件,开机时载入开机管理程序(bootloader),并映 ...

  3. Hibernate(十五):QBC检索、本地SQL检索和HQL删除

    QBC检索 QBC查询就是通过使用Hibernate提供的Query By Criteria API来查询对象,这种API封装了SQL语句的动态拼装,对查询提供了更加面向对象的功能接口. 1)通过Cr ...

  4. hdu-1237 简单计算器---中缀表达式转后缀表达式

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1237 题目大意: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值. 思路 ...

  5. easygui控件介绍

    1.msgbox: 语法:msgbox(text,title, ok_button='OK',image=None,root=None) 实例:msgbox('内容内容','标题标题','确定')返回 ...

  6. Java 枚举类型简介

    目录 Java 枚举示例 Java 枚举构造函数 枚举类型是用于定义常量集合的特殊类型,更确切的说,JAVA枚举类型是一种特殊的 java 类.枚举类型可以包含常量.方法等.在 java5 中添加了 ...

  7. leetcode 566 Reshape the Matrix 重塑矩阵

    参考:https://www.cnblogs.com/grandyang/p/6804753.html 注意:复习容器的定义方法?? class Solution { public: vector&l ...

  8. [LeetCode] Word Abbreviation 单词缩写

    Given an array of n distinct non-empty strings, you need to generate minimal possible abbreviations ...

  9. [LeetCode] Lonely Pixel I 孤独的像素之一

    Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...

  10. 【阿里聚安全·安全周刊】互联网时代人类还有被遗忘的权利吗 | Android与中兴

    本周七个关键词:互联网时代丨中兴和Android丨安卓厂商和安全补丁丨移动支付安全丨泰国移动运营商泄密丨格式化硬盘的恶意程序丨代码签名滥用 -1-   [互联网] 互联网时代 人类还有被遗忘的权利吗 ...