这是【jQuery 教程系列第 9 篇】，如果觉得有用的话，欢迎关注专栏。
在介绍 jQuery 的基础选择器之前，你必须要了解 CSS 中的基础选择器，如果你对 CSS 的基础选择器不了解或者忘了，可以点击我的这篇博客 什么是 CSS 中的选择器？CSS 的选择器都有哪些？
了解了 CSS 的基础选择器后，我们再来认识 jQuery 中常用的基础选择器。
一：什么是 jQuery 选择器
jQuery 选择器是 jQuery 为我们提供的一种方法，让我们更方便的获取到页面中的元素，然后对 HTML 元素组或者单个元素进行操作。
jQuery 选择器有很多，基本兼容了 CSS1 到 CSS3 所有的选择器，除此之外，它也有一些自定义的选择器，在 jQuery 中所有的选择器都是以 $ 符号 开始：$(“选择器”)。
下面我们仅针对 jQuery 中一些常用的选择器做一下简单说明。
为了更方便理解，我们仅通过一个例子，了解这些选择器。
HTML 代码如下所示
<body>
<div id="grandfather">
<div id="father">一
<div class="son">二</div>
<div class="son">二</div>
</div>
<div id="uncle">三
<p>四</p>
<p>四</p>
</div>
<p id="other">五</p>
</div>
</body>
浏览器运行效果如下
1、元素选择器
jQuery 元素选择器基于元素名获取元素，比如我们将页面中所有 p 元素的背景色改为蓝色
jQuery 代码如下
$(function ()
{
$("p").css("backgroundColor","blue");
});
浏览器运行效果如下
2、id 选择器
jQuery id 选择器通过 HTML 元素的 id 属性选取指定的元素，页面中元素的 id 是唯一的。
比如我们将 id 属性为 uncle 的元素的背景色改为红色
jQuery 代码如下
$(function ()
{
$("#other").css("backgroundColor","red");
});
浏览器运行效果如下
不要忘记 id 名称前面要加一个 # 符号。
3、class 选择器
jQuery 的类选择器可以通过指定的 class 查找元素。
比如我们将 class 名为 son 的元素的背景色改为紫色
jQuery 代码如下
$(function ()
{
$(".son").css("backgroundColor","purple");
});
浏览器运行效果如下
不要忘记 class 名称前面要加一个 . 符号。
4、子代选择器
jQuery 子代选择器之间用 > 符号连接，只选中父级元素的亲一代。
比如我们将 id 属性名称为 grandfather 的亲一代 p 元素的背景色改为粉色
jQuery 代码如下
$(function ()
{
$("#grandfather>p").css("backgroundColor","pink");
});
浏览器运行效果如下
因为 id 属性名称为 grandfather 的亲一代 p 元素只有一个 “五”，所以只有它变成了粉色。
5、后代选择器
jQuery 后代选择器之间用空格连接，选中的是指定元素的所有后代。
比如我们将 id 属性名称为 grandfather 的所有后代 p 元素的背景色改为粉色
jQuery 代码如下
$(function ()
{
$("#grandfather p").css("backgroundColor","pink");
});
浏览器运行效果如下
对比子代选择器，其实就是把 > 符号给换成了空格，两者可以对比下。
6：并集选择器
jQuery 的并集选择器指的是可以同时对多个选择器进行相同的操作，选择器之间通过英文逗号 “,” 连接。
比如我们将 id 属性名称为 father 和 uncle 的元素的背景色改为黄色
jQuery 代码如下
$(function ()
{
$("#father,#uncle").css("backgroundColor","yellow");
});
浏览器运行效果如下
7：交集选择器
jQuery 中的交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。
比如我们将标签为 div，class 名称为 son 的元素的背景色改为蓝色
jQuery 代码如下
$(function ()
{
$("div.son").css("backgroundColor","blue");
});
浏览器运行效果如下
8：通配符选择器
jQuery 中的通配符选择器用 * 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
比如我们将页面中所有元素的背景色都改为粉红色
jQuery 代码如下
$(function ()
{
$("*").css("backgroundColor","pink");
});
浏览器运行效果如下
常用的就简单介绍到这里，或许你已经发现了，CSS 中的选择器怎么写，在 jQuery 中就怎么写。
jQuery 中的选择器还有很多，如是你碰到了没有见过的，去查 jQuery 的官方文档就行了。
关于 jQuery 中常用的基础选择器就说到这里。
你的问题得到解决了吗？欢迎在评论区留言。
赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。
技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。
结束语
最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
