jQuery实操练习题
## 题目：创建一个点击按钮显示/隐藏文本的功能
要求：
- 在 HTML 中创建一个按钮元素和一个文本元素。
- 使用 jQuery 实现点击按钮时，文本的显示和隐藏切换。
- 初始状态下，文本应该是隐藏的。
- 当用户点击按钮时，如果文本是隐藏的，则显示文本；如果文本是显示的，则隐藏文本。
提示：
- 可以使用 jQuery 的 `click()` 方法来监听按钮的点击事件。
- 使用 jQuery 的 `toggle()` 方法来切换文本的显示和隐藏状态。
## 题目：创建一个计数器功能
要求：
- 在 HTML 中创建一个按钮元素和一个显示计数的文本元素。
- 使用 jQuery 实现点击按钮时，计数器递增，并更新文本显示的计数值。
- 初始状态下，计数器的值为 0。
- 每次点击按钮时，计数器的值应该增加 1。
- 在文本元素中显示当前计数器的值。
提示：
- 可以使用 jQuery 的 `click()` 方法来监听按钮的点击事件。
- 使用 jQuery 的 `text()` 方法来更新文本元素的内容。
- 可以创建一个变量来保存计数器的值，并在每次点击按钮时进行递增操作。
## 题目：添加/移除 CSS 类
要求：
- 在 HTML 中创建一个按钮元素和一个文本元素。
- 使用 jQuery 实现点击按钮时，为文本元素添加或移除一个特定的 CSS 类。
- 初始状态下，文本元素不包含该 CSS 类。
- 点击按钮时，如果文本元素已经包含该 CSS 类，则移除它；如果文本元素不包含该 CSS 类，则添加它。
提示：
- 可以使用 jQuery 的 `click()` 方法来监听按钮的点击事件。
- 使用 jQuery 的 `toggleClass()` 方法来添加或移除 CSS 类。
## 题目：滑动切换图像
要求：
- 在 HTML 中创建一个图像元素和一个按钮元素。
- 使用 jQuery 实现点击按钮时，图像元素的滑动切换效果。
- 初始状态下，图像应该是隐藏的。
- 点击按钮时，如果图像是隐藏的，则以滑动效果显示出来；如果图像是显示的，则以滑动效果隐藏起来。
提示：
- 可以使用 jQuery 的 `click()` 方法来监听按钮的点击事件。
- 使用 jQuery 的 `slideToggle()` 方法来切换元素的滑动显示和隐藏效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<style>
.aaa {
color: #a94442
}
#myText1{
display:none
}
img {
display: none
}
button {
color: white;
background: #4e6ef2;
border: 1px solid #c4c7cc;
border-radius: 3px;
}
</style>
<body>
<button id="myButton1">切换文本</button>
<p id="myText1">这是要显示和隐藏的文本。</p>
<button id="myButton2">计数器</button>
<p id="myText2">0</p>
<button id="myButton3">切换样式</button>
<p id="myText3">这是要添加或移除 CSS 类的文本。</p>
<button id="myButton">切换图像</button>
<img id="myImage" src="dog.jpg" alt="" width="200px" height="200px" >
</body>
</html>
<script>
$(document).ready(function () {
$("#myButton1").click(function () {
$("#myText1").toggle();
});
});
$(document).ready(function () {
let x = 0; // 初始化计数器变量，初始值为0
$("#myButton2").click(function () {
x++; // 计数器递增
$("#myText2").text(x); // 在文本元素中显示当前计数器的值
});
});
$(document).ready(function () {
$("#myButton3").click(function () {
$("#myText3").toggleClass("aaa")
})
})
$(document).ready(function () {
$("#myButton").click(function () {
$("#myImage").slideToggle();
});
});
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<style>
.aaa {
color: #a94442
}
#myText1{
display:none
}
img {
display: none
}
button {
color: white;
background: #4e6ef2;
border: 1px solid #c4c7cc;
border-radius: 3px;
}
</style>
<body>
<button id="myButton1">切换文本</button>
<p id="myText1">这是要显示和隐藏的文本。</p>
<button id="myButton2">计数器</button>
<p id="myText2">0</p>
<button id="myButton3">切换样式</button>
<p id="myText3">这是要添加或移除 CSS 类的文本。</p>
<button id="myButton">切换图像</button>
<img id="myImage" src="dog.jpg" alt="" width="200px" height="200px" >
</body>
</html>
<script>
$(document).ready(function () {
$("#myButton1").click(function () {
$("#myText1").toggle();
});
});
$(document).ready(function () {
let x = 0; // 初始化计数器变量，初始值为0
$("#myButton2").click(function () {
x++; // 计数器递增
$("#myText2").text(x); // 在文本元素中显示当前计数器的值
});
});
$(document).ready(function () {
$("#myButton3").click(function () {
$("#myText3").toggleClass("aaa")
})
})
$(document).ready(function () {
$("#myButton").click(function () {
$("#myImage").slideToggle();
});
});
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！