<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery - 获取并设置 CSS 类</title>
<script src="jquery-3.3.1.js"></script>
<script>
/*
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
*/
/*
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。
当然，在添加类时，您也可以选取多个元素：
*/
$(document).ready(function () {
$(".b1").click(function () {
$(".add h1,h2,p").addClass("blue");
$(".add div").addClass("important");
});
$(".b2").click(function () {
$(".add1 h1,h2,p").addClass("blue");
$(".add1 div").addClass("important");
});
});
</script>
<style type="text/css">
.important{
font-weight: bold;
font-size: xx-large;;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<div class="add">
<strong>以下是增加类实验</strong>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button class="b1">向元素添加类</button>
</div>
<div class="add1">
<strong>以下是增加类实验</strong>
<h1>标题 2</h1>
<h2>标题 3</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button class="b2">向元素添加类</button>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery - 获取并设置 CSS 类</title>
<script src="jquery-3.3.1.js"></script>
<script>
/*
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
*/
/*
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。
当然，在添加类时，您也可以选取多个元素：
*/
$(document).ready(function () {
$(".b1").click(function () {
$(".add h1,h2,p").addClass("blue");
$(".add div").addClass("important");
});
$(".b2").click(function () {
$(".add1 h1,h2,p").addClass("blue");
$(".add1 div").addClass("important");
});
});
</script>
<style type="text/css">
.important{
font-weight: bold;
font-size: xx-large;;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<div class="add">
<strong>以下是增加类实验</strong>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button class="b1">向元素添加类</button>
</div>
<div class="add1">
<strong>以下是增加类实验</strong>
<h1>标题 2</h1>
<h2>标题 3</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button class="b2">向元素添加类</button>
</div>
</body>
</html>
