选择器 · 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"); ```