1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 示例</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1 id="myHeading">Hello, jQuery!</h1>
<button id="myButton">点击我</button>
<div id="myDiv">这是一个 div 元素</div>
<script>
// jQuery 准备就绪时执行
$(document).ready(function() {
// jQuery 代码写在这里
// 1. 通过 ID 选择器选取元素，并修改文本内容
$("#myHeading").text("Hello, jQuery World!");
// 2. 添加点击事件处理
$("#myButton").click(function() {
// 3. 在点击按钮时，隐藏或显示 div 元素
$("#myDiv").toggle(1000); // 以1秒的速度切换显示/隐藏
});
});
</script>
</body>
</html>
在这个例子中：
- 引入了 jQuery 库。
- 使用 $(document).ready() 确保文档加载完毕后执行 jQuery 代码。
- 使用 $("#myHeading") 通过 ID 选择器选取元素，并使用 .text() 修改元素的文本内容。
- 使用 $("#myButton").click() 添加点击事件处理，当按钮被点击时，执行相关的操作，例如使用 .toggle() 在 div 元素的显示和隐藏之间切换。
这只是一个简单的例子，展示了 jQuery 在操作 DOM 和处理事件方面的基本用法。你可以根据具体需求进一步深入学习 jQuery 的各种功能和方法。
转载请注明出处：http://www.zyzy.cn/article/detail/4636/jQuery