jQuery选择器是jQuery库中最重要的部分之一，它允许我们通过CSS选择器来选取HTML元素，jQuery选择器的工作方式与JavaScript中的document.querySelector()和document.getElementById()等DOM选择器类似，但提供了更多的灵活性和功能。
1、基本选择器
最基本的jQuery选择器就是直接使用CSS选择器，我们可以使用"#id"来选择一个具有特定ID的元素，使用".class"来选择一个具有特定类的元素，或者使用"tag"来选择一个特定的标签。
$("#myId") // 选择一个ID为myId的元素
$(".myClass") // 选择一个类为myClass的元素
$("p") // 选择一个<p>标签的元素
2、层级选择器
层级选择器允许我们选择一个元素的子元素。"parent > child"会选择所有父元素是指定元素的元素，"prev + next"会选择紧接在指定元素后面的下一个元素。
$("#myId p") // 选择一个ID为myId的元素的所有<p>子元素
$("div span") // 选择一个div元素的所有span子元素
$("ul li:first-child") // 选择一个ul元素的第一个li子元素
3、属性选择器
属性选择器允许我们根据元素的属性来选择元素。"[attribute]"会选择具有指定属性的元素，"[attribute=value]"会选择属性值为指定值的元素，"[attribute!=value]"会选择属性值不为指定值的元素。
$("a[target='_blank']") // 选择一个目标为_blank的<a>元素
$("input[type='text']") // 选择一个类型为text的<input>元素
$("img[alt!='example']") // 选择一个alt属性不为'example'的<img>元素
4、过滤选择器
过滤选择器允许我们基于一定的条件来过滤元素。":even"会选择所有偶数索引的元素，":odd"会选择所有奇数索引的元素，":first"会选择第一个元素，":last"会选择最后一个元素。
$("tr:even") // 选择一个表格的所有偶数行
$("td:odd") // 选择一个表格的所有奇数列
$("li:first") // 选择一个列表的第一个<li>元素
$("p:last") // 选择一个段落的最后一个<p>元素
5、内容选择器
内容选择器允许我们基于元素的文本内容来选择元素。":contains(text)"会选择包含指定文本的元素。
$("p:contains('Hello')") // 选择一个包含'Hello'的<p>元素
6、可见性选择器
可见性选择器允许我们基于元素的可见性来选择元素。":hidden"会选择所有不可见的元素，":visible"会选择所有可见的元素。
$("div:hidden") // 选择一个隐藏的div元素
$("button:visible") // 选择一个可见的button元素
以上就是jQuery选择器的主要内容，通过这些选择器，我们可以方便地选取和操作HTML元素，实现各种复杂的功能。
发表评论