<!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() {
// 写入文本到id为"test"的元素
$("#test").text("Hello, World!");
// 将一个对象转换为JSON字符串
var obj = { name: "John", age: 31, city: "New York" };
var jsonString = JSON.stringify(obj);
$("#json").text(jsonString);
// 点击按钮时隐藏id为"hide"的元素
$("#hide").click(function() {
$(this).hide();
});
// 基本选择器示例
$("#btn1").click(function() {
$(".class1").css("color", "red");
});
// 层级选择器示例
$("#btn2").click(function() {
$("div > p").css("color", "blue");
});
// 基本过滤选择器示例
$("#btn3").click(function() {
$("div:first").css("color", "green");
});
});
</script>
</head>
<body>
<div id="test">测试文本</div>
<div id="json"></div>
<button id="hide">隐藏</button>
<button id="btn1">改变class1的颜色</button>
<button id="btn2">改变div直接子元素p的颜色</button>
<button id="btn3">改变第一个div的颜色</button>
<div>
<p class="class1">段落1</p>
<p>段落2</p>
</div>
<div>
<p class="class1">段落3</p>
<p>段落4</p>
</div>
</body>
</html>这段代码展示了如何使用jQuery来完成一些基本的DOM操作，包括页面加载时的文本写入、对象转换为JSON字符串、按钮点击时的元素隐藏、基本选择器、层级选择器和基本过滤选择器的使用。