jQuery Css类
通过 jQuery，可以很容易地对 CSS 元素进行操作
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子：
.important
{
font-weight:bold;
font-size:xx-large;
} .blue
{
color:blue;
}
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body> <h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button> </body>
</html>
您也可以在 addClass() 方法中规定多个类：
$("button").click(function(){
$("body div:first").addClass("important blue");
});
jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery Css类的更多相关文章
- jQuery CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一 ...
- JQuery：JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- jQuery 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - ...
- jQuery 学习03——HTML：捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- jquery操作html元素之（ 获取并设置 CSS 类）
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
随机推荐
- PHP--时间格式处理
Ymd格式转Y-m-d或转成时间戳将Ymd格式如19930811转成1993-08-11格式 date('Y-m-d',strtotime('19930811') 将Ymd格式如19930811转成时 ...
- [BZOJ2427][HAOI2010]软件安装-tarjan缩点-树上dp
<题面> 这个题真伤人 之前Tarjan和树规都没学好,吃了不少亏,仔仔细细的搞了一天,收获颇丰 先来一个Tarjan的链接:$\mathbb{O}$ 题目的数据比较友好: $dp$不对: ...
- 爬取简书图片(使用BeautifulSoup)
import requests from bs4 import BeautifulSoup url_list = [] kv = {'User-Agent':'Mozilla/5.0'} r = re ...
- vue 使用 element ui动态添加表单
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...
- laravel-- 在laravel操作redis数据库的数据类型(string、哈希、无序集合、list链表、有序集合)
安装redis和连接redis数据库 在controller头部引入 一.基本使用 public function RedisdDbOne() { // 清空Redis数据库 Redis::flush ...
- 为什么DW的可视化下看到的效果与浏览器的效果有所区别？
可视区不是调用外面浏览器,Dreamweav 可视化区是为用户编辑而设计. 支持最基本的 HTML 与 CSS ,对 CSS 而言,我写入样式时如果你使用最基本的样式时它显示与你浏览器中看的效果相差不 ...
- Node.js模拟发起http请求从异步转同步的5种方法
使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...
- 计算机组成原理作业一 熟悉MIPS指令
第一题 .data outputd: .asciiz "Alpha","November","First","alpha" ...
- thinkphp5.1学习总结
1.修改应用根目录名称 (1)重新定义入口文件如下namespace think; // 定义应用目录define('APP_PATH', __DIR__ . '/../app/'); // 加载基础 ...
- Python 使用BeautifulSoup模块抽取数据