使用 jQuery 设置样式
使用 jQuery 设置样式
使用 jQuery 设置样式 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
简介
您好，
到目前为止，我们在所有示例中操作的都是 HTML DOM 对象。
使用 jQuery，我们还可以操作 HTML 元素的样式。
jQuery 提供了一些方法来实现这一点。
class
在接下来的示例中，我们将学习如何在 jQuery 中使用 class。
在下面的示例中，我们将 jQuery 库引入 HTML，并定义名为 pink 和 yellow 的两个 class，使文本分别显示为粉色和黄色。
让我们开始吧 🚀
示例
我们在 <body> 标签之间添加了一个 <p> 元素。
目前，这个元素还没有 class。
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>示例 2
现在，让我们使用 addClass() 方法为段落元素添加 pink class。
在预览界面中，我们会看到 Lorem ipsum 文本的颜色变成粉色。
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
removeClass() 方法
如果我们想从 HTML 元素中移除 class，就可以使用 removeClass() 方法。
我们修改了下面的示例，并在 HTML 元素中预先定义了 pink class。DOM 加载后，p 元素中的 pink class 就会被移除。
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>切换类
toggleClass() 方法
顾名思义，使用此方法时，
如果目标元素中存在某个 class，就会将其移除；否则就会添加它。
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>CSS 方法
css() 方法
我们已经了解了添加和移除 class 的方法。
现在，让我们学习用于为 HTML 节点定义内联样式的 CSS 方法。
CSS 方法接受两个参数。
- 第一个参数是要赋值的属性名称。
- 第二个参数是要赋予该属性的值。
下面的示例展示了 CSS 方法的不同用法。
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
jQuery API
我们已经学习了许多使用 jQuery 操作 DOM 的方法。
除了已经学习的方法之外，jQuery 还提供了许多操作方法。
您可以点击下面的链接浏览完整的 API。
恭喜
恭喜您 🎉
我们学习了使用 jQuery 设置样式。
下一节中，我们将学习在 jQuery 中管理事件。
常见问题解答
「使用 jQuery 设置样式」课时是免费的吗？
是的 — 「使用 jQuery 设置样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「使用 jQuery 设置样式」这节课中我会学到什么？
使用 jQuery 设置样式 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「使用 jQuery 设置样式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。