3.1 name 和 id 和 class
標籤名稱
$("p")
:找到標籤名稱為 p 的元素。
$("h1")
:找到標籤名稱為 h1 的元素。
id
$("#my_id")
:# 表示的是 id,即找到 id 為 my_id 的元素。
$("h1#my_title")
:找到 h1 標籤,且 id 為 my_title 的元素。
class
$(".my_style")
:. 表示的是 class,即找到 class 為 my_style 的元素。
$("p.my_style")
:找到 p 標籤,且 class 為 my_style 的元素。
練習
請先建立 practice/selectors.html
檔案,用於練習,內容如下:
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>jQuery 相關練習</title>
</head>
<body>
<h1>這是標題</h1>
<h1 id="my_title">這是我的標題</h1>
<p>這是段落1</p>
<p class="para para2">這是段落2</p>
<p class="para para3">段是段落3</p>
<script src="./vendors/jquery/jquery-3.4.1.min.js"></script>
<script>
// 程式碼在這輸入...
</script>
</body>
</html>
試著輸入以下例子,看是否有效:
$("h1").css("color", "red");
$("p").css("color", "red");
$("h1#my_title").css("color", "red");
$(".para").css("color", "red");
$(".para2").css("color", "red");
$("p.para3").css("color", "red");