极客教程jQuery ID选择器
在jQuery中，ID选择器使用 “#” 符号来选择指定ID的元素。ID选择器是一种基本的选择器，通过给定的ID来选择一个单一的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery ID选择器</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<script>
(document).ready(function(){("#title").css("color", "red");
});
</script>
</body>
</html>
在上面的示例中，我们选取了ID为 “title” 的元素，并将其文本颜色改为红色。
语法
使用ID选择器时，需要在选择器前面加上 “#” 符号，然后跟上要选择的ID。
$("#idName")
示例
以下是一个更复杂的示例，展示如何使用ID选择器来操作多个元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery ID选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container">
<p id="first-paragraph">第一段落</p>
<p id="second-paragraph">第二段落</p>
<p id="third-paragraph">第三段落</p>
</div>
<script>
// 改变第一段和第三段的颜色
("#first-paragraph, #third-paragraph").css("color", "blue");
// 隐藏第二段("#second-paragraph").hide();
</script>
</body>
</html>
在上面的示例中，我们选择了ID为 “first-paragraph” 和 “third-paragraph” 的段落元素，并将它们的文本颜色改为蓝色；同时隐藏了ID为 “second-paragraph” 的段落元素。
注意事项
- ID选择器是区分大小写的，确保要选择的ID名称与HTML元素中的ID名称完全一致。
- 一个HTML文档中应该只有一个相同ID的元素，否则会导致选择器选择到多个元素。
- 使用ID选择器可以很方便地选取并操作指定的元素，但在项目中应该合理使用，避免滥用ID选择器导致选择器权重过高的情况。