jQuery-初识-操作(章节一)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 初识与操作</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 当点击按钮时，改变段落的文本内容
$("#btn1").click(function(){
$("#p1").text("Hello, jQuery!");
});
// 当点击按钮时，改变段落的背景颜色
$("#btn2").click(function(){
$("#p2").css("background-color", "yellow");
});
// 当点击按钮时，隐藏图像
$("#btn3").click(function(){
$("#img1").hide();
});
// 当点击按钮时，显示图像
$("#btn4").click(function(){
$("#img1").show();
});
});
</script>
</head>
<body>
<button id="btn1">改变文本</button>
<p id="p1">这是一个段落。</p>
<button id="btn2">改变背景色</button>
<p id="p2">这是另一个段落。</p>
<button id="btn3">隐藏图片</button>
<img id="img1" src="image.jpg" alt="示例图片" style="width: 200px;">
<button id="btn4">显示图片</button>
</body>
</html>这个代码实例展示了如何使用jQuery库来改变HTML元素的文本内容、背景颜色以及显示或隐藏图片。代码中使用了$(document).ready()来确保DOM完全加载后再绑定事件和执行操作。每个按钮点击事件都被包裹在$(function(){...})内，这样可以保证代码在文档加载完成后执行。
评论已关闭