夜光带你走进Jquery（十五）擅长的领域

夜光序言：

回眸，撩起云水边的清凉，拢一袖的香，岁月行的如此悠远。

万般情愫，曾经的过往，彼时的欢喜，早在不语间随如水的文字流泻。

正文：

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。

我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

嗯唔：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() 方法中规定多个类：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("body div:first").addClass("important blue");});});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style>
</head>
<body><div id="div1">这是一些文本</div>
<div id="div2">这是一些文本</div>
<br>
<button>为第一个 div 元素添加类</button></body>
</html>

嗯唔：jQuery removeClass() 方法

如何在不同的元素中删除指定的 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").removeClass("blue");});});</script><style type="text/css">.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}</style>
</head>
<body><h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p class="important">这是另外一个段落。</p>
<br>
<button>夜光：从元素中移除 class</button>
</body>
</html>

有点帅：jQuery toggleClass() 方法

展示如何使用 jQuery toggleClass() 方法。

该方法对被选元素进行添加/删除类的切换操作：

<!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").toggleClass("blue");});});</script><style type="text/css">.blue{color:blue;}</style>
</head>
<body><h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>夜光：切换 class</button>
</body>
</html>

夜光带你走进Jquery（十五）擅长的领域相关推荐

夜光带你走进Jquery（十四）擅长的领域
夜光序言: 一杯香茗,任岁月荏苒,落花成冢,独守一份清静寂寞在心尖的边缘躁动,悠然品茗静谧韵味. 轻轻的推开紫纱轩窗,清风柔柔地将思绪挑逗,伸手,掬起一捧月色,吟唱一首离殇婉约的诗词正文: jQu ...
夜光带你走进JavaScript（五十八）擅长的领域
夜光序言: 人生旅途上,横竖都是路,决定今天的不是今天,而是昨天对人生的态度:决定明天的不是明天,而是今天对事业的作为.我们的今天由过去决定,我们的明天由今天决定~~ 正文: JavaScript 计 ...
夜光带你走进C# 游戏开发等（七十九）擅长的领域
夜光序言: 随着时间的流逝,年龄在增长,表面是如此,可内心的成长,那才是最重要的,只有这样活着才会变得更加美好,内心的成长是每个人一生的追求,我向往内心的成长,成熟正文: using System; ...
夜光带你走进软件工程（十五）
夜光序言: 你要逼自己努力变得优秀,让后骄傲的活着.以梦为马,不负韶华. 正文:
夜光带你走进微信小程序开发（四十二）擅长的领域
夜光序言: 世人笑我痴红尘,不过红尘恋伊人. 正文: 以道御术 / 以术识道 /*夜光: pages/g ...
夜光带你走进python开发（五十五）传奇语言
夜光序言: Do not worry about smiling, my mouth hardly ever smiles, but it doesn't mean I'm not smiling i ...
夜光带你走进C# 反射（二十）擅长的领域
夜光序言: 申请进入你的心里,我敲门了喔. 正文: using System; using System.Collections.Generic; using System.ComponentMode ...
夜光带你走进 Java 成神之路--Spring（四十六）擅长的领域
夜光序言: 人生不要被过去所控制,决定你前行的,是未来; 人生不要被安逸所控制,决定你成功的,是奋斗; 人生不要被别人所控制,决定你命运的,是自己; 人生不要被金钱所控制,决定你幸福的,是知足; 人生 ...
夜光带你走进JavaScript（四十六）擅长的领域
夜光序言: 从一开始以为这个世界上只有自己,到明白自己的天赋其实只够做一个不错的普通人. 然后人就长大了正文: 事件冒泡或事件捕获? 事件传递有两种方式:冒泡与捕获. 事件传递定义了元素事件触发的顺 ...

夜光带你走进Jquery（十五）擅长的领域

夜光序言：

回眸，撩起云水边的清凉，拢一袖的香，岁月行的如此悠远。

万般情愫，曾经的过往，彼时的欢喜，早在不语间随如水的文字流泻。

正文：

jQuery 操作 CSS

嗯唔：jQuery addClass() 方法

在 addClass() 方法中规定多个类：

嗯唔：jQuery removeClass() 方法

有点帅：jQuery toggleClass() 方法

夜光带你走进Jquery（十五）擅长的领域相关推荐

最新文章

热门文章