<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
.normal
{
font-weight: bold;
font-size: x-large;
}
.red
{
color: red;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("#btn2").click(function(){
$("h1,h2,p").removeClass("red");
});
$("#btn3").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
</head>
<!--
jQuery-获取并设置CSS类
通过jQuery,可以容易地对CSS元素进行操作
jQuery操作CSS
jQuery拥有若干进行CSS操作的方法.我们将学习下面这些:
-addClass()-向被选元素添加一个或多个类
-removeClass()-从被选元素删除一个或多个元素
-toggleClass()-对被选元素进行添加/删除类的切换操作
-css()-设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子
.imortant
{
font-weight:bold;
font-size:22-large;
}
.blue
{
color:blue;
}
jQuery addClass()方法
下面的例子展示如何向不同的元素添加class属性.
当然在添加类时,您可以选取多个元素
$("#btn1").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
jQuery removeClass()方法
下面的例子演示如何在不同的元素中时删除指定的class属性
$("#btn2").click(function(){
$("h1,h2,p").removeClass("red");
});
});
jQuery toggleClass()方法
下面的例子将展示如何使用jQuery toggleClass()方法,该方法对被选元素进行添加/删除类的切换操作
$("#btn3").click(function(){
$("h1,h2,p").toggleClass("blue");
});
-->
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<div>这是一些重要的文本!</div>
<br>
<button id="btn1">为元素添加class</button>
<h1 class="red">标题1</h1>
<h2 class="red">标题2</h2>
<p class="red">这是一个段落.</p>
<p class="normal">这是另外一个元素</p>
<br>
<button id="btn2">从元素中移除class</button>
<h1>标题1</h1>
<h2>标题2</h2>
<p>这是一个段落</p>
<p>这是另外一个段落</p>
<br>
<button id="btn3">切换class</button>
</body>
</html>