<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 示例</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box1">点击我</div>
<div id="box2">也点击我</div>
<script>
// 等待文档加载完成
$(document).ready(function() {
// 获取元素并绑定点击事件
$('#box1').click(function() {
alert('你点击了第一个盒子！');
});
$('#box2').click(function() {
// 改变元素样式
$(this).css('background-color', 'lightcoral');
});
});
</script>
</body>
</html>
在这个示例中，我们通过 <script> 标签引入了 jQuery 库，然后使用 $(document).ready() 来确保文档已完全加载后再执行脚本。接着，通过 jQuery 选择器选择了两个 <div> 元素，并分别绑定了点击事件。点击第一个盒子时，会弹出一个提示框，点击第二个盒子时，会改变其背景颜色。
这只是 jQuery 的一个简单示例，展示了如何选择元素、绑定事件以及修改元素样式。jQuery 还提供了丰富的 API，可以进行更多的操作，例如处理 AJAX 请求、执行动画效果等。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12896/jQuery