首頁 > web前端 > 前端問答 > jquery只能用id選擇器嗎

jquery只能用id選擇器嗎

WBOY
發布: 2022-04-20 18:00:29
原創
1564 人瀏覽過

jquery不是只能用id選擇器。 jquery提供了多種選擇器:1、class選擇器,可透過指定class查找元素;2、標籤選擇器,可透過html標籤名稱選擇元素;3、屬性選擇器,用XPath表達式選擇帶有指定屬性的元素;4、群組選擇器等。

jquery只能用id選擇器嗎

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

jquery只能用id選擇器嗎

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

jQuery 選擇器基於元素的 id、類別、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。它基於已經存在的 CSS 選擇器,除此之外,它還有一些自訂的選擇器。

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

jQuery 元素選擇器

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

$("p") 選取

元素。

$("p.intro") 選取所有 class="intro" 的

元素。

$("p#demo") 選取所有 id="demo" 的

元素。

jQuery 屬性選擇器

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

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

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

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

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

#id ​​選擇器

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

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

透過id 選取元素語法如下:

$("#test")
登入後複製

範例如下:




 
123 

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(&quot;#test&quot;).hide();
  });
});
</script>

这是一个标题

这是一个段落

这是另外一个段落

登入後複製

輸出結果:

jquery只能用id選擇器嗎

##.class 選擇器

jQuery 類別選擇器可以透過指定的class 來尋找元素。

語法如下:

$(".test")
登入後複製

範例如下:

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(&quot;.test&quot;).hide();
  });
});
</script>

这是一个标题

这是一个段落。

这是另外一个段落。

登入後複製

輸出結果:

jquery只能用id選擇器嗎

群組選擇器

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

語法:

$("选择器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影片教學

以上是jquery只能用id選擇器嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板