jquery只能用id選擇器嗎

jquery不是隻能用id選擇器。jquery提供了多種選擇器：1、class選擇器，可通過指定class查詢元素；2、標籤選擇器，可通過html標籤名選擇元素；3、屬性選擇器，用XPath表示式來選擇帶有指定屬性的元素；4、群組選擇器等。

本教學操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery只能用id選擇器嗎

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()。

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 屬性選擇器

jQuery 使用 XPath 表示式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

#id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：

$("#test")

範例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>這是一個標題</h2>
<p>這是一個段落</p>
<p id="test">這是另外一個段落</p>
<button>點我</button>
</body>
</html>

輸出結果：

+4.gif

.class 選擇器

jQuery 類選擇器可以通過指定的 class 查詢元素。

語法如下：

$(".test")

範例如下：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>
<h2 class="test">這是一個標題</h2>
<p class="test">這是一個段落。</p>
<p>這是另外一個段落。</p>
<button>點我</button>

輸出結果：

+5.gif

群組選擇器

群組選擇器，用於同時對幾個選擇器進行相同的操作。

語法：

$("選擇器1, 選擇器2, ... , 選擇器n")

兩個選擇器之間必須用英文逗號,隔開，否則該選擇器無法生效。

舉例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("h3,div,p,span").css("color","red");
        })
    </script>
</head>
<body>
    <h3>中文網</h3>
    <div>中文網</div>
    <p>中文網</p>
    <span>中文網</span>
</body>
</html>

相關視訊教學推薦：

以上就是jquery只能用id選擇器嗎的詳細內容，更多請關注TW511.COM其它相關文章！