jQuery .class 選擇器

jQuery 中的.class 選擇器用於選擇所有具有特定 class 屬性的 HTML 元素。

HTML 中的 class 屬性用於為 HTML 元素分配一個或多個類名，允許 CSS 和 JavaScript 選擇和操作具有特定類的元素。

語法

以下是 jQuery .class 選擇器的語法：

$(".class")

引數

class 選擇器指定要選擇的元素的類。

示例 1

以下示例選擇具有類 "highlight" 的元素並將它們的背景顏色更改為黃色：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".highlight").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="highlight">This text will be highlighted.</p>
  <button>Click</button>
</body>
</html>

單擊按鈕後，具有類 "highlight" 的選中（段落）元素將以黃色背景突出顯示。

示例 2

在此示例中，我們選擇所有具有類 "highlight" 的元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".highlight").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <p>This text won't be highlighted.</p>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <p>This text won't be highlighted.</p>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <button>Click</button>
</body>
</html>

單擊按鈕後，所有具有類 "highlight" 的段落元素將以黃色背景突出顯示。

示例 3

此示例選擇具有類 "content" 的元素，並將其內容替換為新文字：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".content").html("Content modified...");
    })
  });
</script>
</head>
<body>
  <div class="content">Hello mate, click the button below.</div>
  <button>Click</button>
</body>
</html>

單擊按鈕後，具有 "content" 類的 <div> 元素中的內容將被替換為 "Content modified..."。

jquery_ref_selectors.htm

列印頁面