jQuery ID选择器|极客教程

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>