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() {
// 点击按钮时，改变所有段落的文本颜色为红色
$("#changeColorBtn").click(function() {
$("p").css("color", "red");
});
// 点击按钮时，隐藏所有标题元素
$("#hideTitlesBtn").click(function() {
$(":header").hide();
});
// 点击按钮时，获取第一个段落的文本内容
$("#getFirstParaTextBtn").click(function() {
alert("第一个段落的文本内容是: " + $("p:first").text());
});
// 点击按钮时，获取所有带有 'class-a' 类的元素的数量
$("#countClassABtn").click(function() {
alert("带有 'class-a' 类的元素数量: " + $(".class-a").length);
});
});
</script>
</head>
<body>
<button id="changeColorBtn">改变颜色</button>
<button id="hideTitlesBtn">隐藏标题</button>
<button id="getFirstParaTextBtn">获取第一个段落文本</button>
<button id="countClassABtn">计算 'class-a' 类的数量</button>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p class="class-a">这是带有 'class-a' 类的段落。</p>
<p class="class-a">这是另一个带有 'class-a' 类的段落。</p>
</body>
</html>这段代码演示了如何使用jQuery来对HTML元素进行基本操作。通过点击页面上的按钮，可以改变文本颜色、隐藏元素、获取元素的文本内容或者获取特定元素的数量。这些操作都是通过jQuery选择器和筛选器来实现的。
评论已关闭