jQuery #id 選擇器

jQuery 中的 #id 選擇器用於選擇具有特定 id 屬性的元素。id 屬性在文件中必須是唯一的，確保 #id 選擇器只針對一個唯一的元素。

選擇器區分大小寫，這意味著 "#MyID" 和 "#myid" 如果都存在，則會選擇不同的元素。

語法

以下是 jQuery 中 #id 選擇器的語法：

$("#id")

引數

id 選擇器以 "#" 開頭，後跟要選擇的元素的 id 值。

示例 1

在下面的示例中，我們使用 jquery #id 選擇器來更改 <div> 元素中文字的顏色：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").css("background-color", "yellow");
            })
        });
    </script>
</head>
<body>
    <div id="demo">This text will turn blue.</div>
    <button>Click</button>
</body>
</html>

當我們執行上述程式時，id 為 "demo" 的元素會將其文字背景顏色更改為黃色。

示例 2

在這個示例中，我們正在更改 <p> 元素的文字內容：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").text("The text has been changed!");
            })
        });
    </script>
</head>
<body>
    <p id="demo">Hello mate, click the button below.</p>
    <button>Click</button>
</body>
</html>

當我們點選按鈕時，id 為 "demo" 的元素會將其文字內容更改為 "The text has been changed!"。

示例 3

這裡，我們使用 jQuery #id 選擇器來隱藏一個 <p> 元素：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#demo").hide();
            })
        });
    </script>
</head>
<body>
    <p id="demo">This paragraph will be hidden.</p>
    <button>Click</button>
</body>
</html>

點選按鈕後，id 為 "demo" 的元素使用 hide() 方法隱藏它。

jquery_ref_selectors.htm

列印頁面