選擇器 · jQuery

## jQuery 選擇器 * * * jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。 jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基于已經存在的 [CSS 選擇器](https://www.w3cschool.cn/cssref/css-selectors.html)，除此之外，它還有一些自定義的選擇器。 jQuery 中所有選擇器都以美元符號開頭：$()。 * * * ## 元素選擇器 jQuery 元素選擇器基于元素名選取元素。在頁面中選取所有元素: $("p") **實例** 用戶點擊按鈕后，所有元素都隱藏： ``` $(document).ready(function(){ ?$("button").click(function(){ ???$("p").hide(); ?}); }); ``` ## #id 選擇器 jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。通過 id 選取元素語法如下： $("#test") **實例** 當用戶點擊按鈕后，有 id="test" 屬性的元素將被隱藏： ``` <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p>這是一個段落</p> <p id="test">這是另外一個段落</p> <button>點我</button> </body> ``` ## .class 選擇器 jQuery 類選擇器可以通過指定的 class 查找元素。語法如下： $(".test") **實例** 用戶點擊按鈕后所有帶有 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> </body> ``` ## CSS 選擇器 jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。 ### 實例下面的例子把所有 p 元素的背景顏色更改為紅色： ``` $("p").css("background-color","red"); ```