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");

Previous3 選取器 (Selectors)Next3.2 屬性

Last updated 4 years ago