题目：创建一个点击按钮显示/隐藏文本的功能
要求：
-
在 HTML 中创建一个按钮元素和一个文本元素。
-
使用 jQuery 实现点击按钮时，文本的显示和隐藏切换。
-
初始状态下，文本应该是隐藏的。
-
当用户点击按钮时，如果文本是隐藏的，则显示文本；如果文本是显示的，则隐藏文本。
提示：
-
可以使用 jQuery 的
click()方法来监听按钮的点击事件。 -
使用 jQuery 的
toggle()方法来切换文本的显示和隐藏状态。<!DOCTYPE html>
<html>
<head>
<title>点击按钮显示/隐藏文本</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-button").click(function(){
$("#hidden-text").toggle();
});
});
</script>
</head>
<body>
<button id="toggle-button">显示/隐藏</button>
<p id="hidden-text" style="display:none">这是要隐藏的文本。</p>
</body>
</html>在这个例子中，一个按钮和一个段落元素被创建。按钮的 ID 被设置为 "toggle-button"，段落元素的 ID 被设置为 "hidden-text"，并且将其初始状态设置为隐藏。
在 JavaScript/jQuery 部分，我们在文档加载完成后使用
$(document).ready()来确保页面完全加载后再执行代码。然后，我们使用click()方法来监听按钮的点击事件，当按钮被点击时，我们使用toggle()方法来切换段落元素的显示和隐藏状态。这样，当用户点击按钮时，段落元素的显示和隐藏状态会切换。如果段落元素是隐藏的，则会显示出来，如果段落元素是显示的，则会隐藏。
题目：创建一个计数器功能
要求：
-
在 HTML 中创建一个按钮元素和一个显示计数的文本元素。
-
使用 jQuery 实现点击按钮时，计数器递增，并更新文本显示的计数值。
-
初始状态下，计数器的值为 0。
-
每次点击按钮时，计数器的值应该增加 1。
-
在文本元素中显示当前计数器的值。
提示：
-
可以使用 jQuery 的
click()方法来监听按钮的点击事件。 -
使用 jQuery 的
text()方法来更新文本元素的内容。 -
可以创建一个变量来保存计数器的值，并在每次点击按钮时进行递增操作。
<!DOCTYPE html>
<html>
<head>
<title>计数器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var counter = 0;
$("#count-button").click(function(){
counter++;
$("#counter-text").text(counter);
});
});
</script>
</head>
<body>
<button id="count-button">计数</button>
<p>计数器的值是：<span id="counter-text">0</span></p>
</body>
</html>在这个例子中，一个按钮和一个段落元素被创建。按钮的 ID 被设置为 "count-button"，段落元素中的计数器文本的 ID 被设置为 "counter-text"。
在 JavaScript/jQuery 部分，我们在文档加载完成后使用
$(document).ready()来确保页面完全加载后再执行代码。然后，我们创建一个变量counter来保存计数器的值，并将其初始值设置为 0。每次点击按钮时，我们将计数器值加 1，并使用text()方法将其更新到段落元素中的计数器文本中。这样，每次点击按钮时，计数器的值会增加 1，并更新到文本元素中显示。
题目：添加/移除 CSS 类
要求：
-
在 HTML 中创建一个按钮元素和一个文本元素。
-
使用 jQuery 实现点击按钮时，为文本元素添加或移除一个特定的 CSS 类。
-
初始状态下，文本元素不包含该 CSS 类。
-
点击按钮时，如果文本元素已经包含该 CSS 类，则移除它；如果文本元素不包含该 CSS 类，则添加它。
提示：
-
可以使用 jQuery 的
click()方法来监听按钮的点击事件。 -
使用 jQuery 的
toggleClass()方法来添加或移除 CSS 类。<!DOCTYPE html>
<html>
<head>
<title>添加/移除 CSS 类</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-button").click(function(){
$("#highlight-text").toggleClass("highlight");
});
});
</script>
</head>
<body>
<button id="toggle-button">添加/移除 CSS 类</button>
<p id="highlight-text">这是一段文本。</p>
</body>
</html>在这个例子中，一个按钮和一个段落元素被创建。段落元素的 ID 被设置为 "highlight-text"，并且设置了一个 CSS 类 "highlight"，其中包含一些样式。
在 JavaScript/jQuery 部分，我们在文档加载完成后使用
$(document).ready()来确保页面完全加载后再执行代码。然后，我们使用click()方法来监听按钮的点击事件，当按钮被点击时，我们使用toggleClass()方法来添加或移除段落元素中的 CSS 类 "highlight"。这样，每次点击按钮时，段落元素中的 CSS 类 "highlight" 会被添加或移除，以实现高亮或取消高亮的效果。
题目：滑动切换图像
要求：
-
在 HTML 中创建一个图像元素和一个按钮元素。
-
使用 jQuery 实现点击按钮时，图像元素的滑动切换效果。
-
初始状态下，图像应该是隐藏的。
-
点击按钮时，如果图像是隐藏的，则以滑动效果显示出来；如果图像是显示的，则以滑动效果隐藏起来。
提示：
-
可以使用 jQuery 的
click()方法来监听按钮的点击事件。 -
使用 jQuery 的
slideToggle()方法来切换元素的滑动显示和隐藏效果。<!DOCTYPE html>
<html>
<head>
<title>滑动切换图像</title>
<style>
#slide-image {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-button").click(function(){
$("#slide-image").slideToggle();
});
});
</script>
</head>
<body>
<button id="toggle-button">切换图像</button>
<img id="slide-image" src="https://via.placeholder.com/300x200.png?text=Slide+Image" alt="滑动图像">
</body>
</html>在这个例子中，一个按钮和一个图像元素被创建。图像元素的 ID 被设置为 "slide-image"，并且设置了一个 CSS 样式，将其初始状态设置为隐藏。
在 JavaScript/jQuery 部分，我们在文档加载完成后使用
$(document).ready()来确保页面完全加载后再执行代码。然后，我们使用click()方法来监听按钮的点击事件，当按钮被点击时，我们使用slideToggle()方法来切换图像元素的滑动显示和隐藏效果。这样，每次点击按钮时，图像元素会以滑动效果显示出来或隐藏起来。如果图像元素是隐藏的，则会以滑动效果显示出来；如果图像元素是显示的，则会以滑动效果隐藏起来。