jQuery选择器

73 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天,点击查看活动详情

什么是jQuery选择器?

能够选择使用网页上的元素,跟css选择器类似

jQuery选择器的优势

1.相比于JavaScript节点获取元素,更容易控制元素

2.内部添加了特有的选择器。如奇数选择器,偶数选择器

3.更简单,更容易理解

基本选择器

标签    id    类

并集选择器    $("h1,p,li")

全局选择器    $("*")

层次选择器

后代选择器    $("ui li")

子代选择器    $("ui>li")

相邻兄弟选择器    $("ui+p") 选择ul后面的第一个兄弟元素p

通用兄弟选择器    $("ui~p") 选择ul后面所有兄弟元素p

伪类选择器

选择第一个元素    $("li:first-of-type")

选择最后一个元素  $("li:last-of-type")

选择第几个元素    $("li:nth-of-type(1)")

属性选择器

选择具有id属性的元素    $("a[id]")

选择具有id属性并且为d1的元素    $("a[id='d1']")

选择具有id属性并且为d1开头的元素  $("a[id~='d1']")

选择具有id属性并且为d1结尾的元素  $("a[id$='d1']")

选择具有id属性并且值包含d1的元素  $("a[id*='d1']")

选择具有id属性并且值不等于d1的元素    $("a[id!='d1']")

过滤选择器

选择第一个元素  $("li:first")

选择最后一个元素  $("li:last")

除了选择器以外的所有元素    $("li:not(li:firsrt)")

选择第几个元素(根据下标查找)  $("li:eq(2)")

选择偶数下标  $("li:even")

选择奇数下标  $("li:odd")

选择大于下标的元素    $("li:gt(2)")

选择小于下标的元素    $("li:gt(2)")

选择标题元素  $(":header")

选择获取焦点元素  $(":foucs")

选择动画元素  $(":animated")

可见性过滤选择器

选择所有隐藏的元素    $("ul>li:visible")

选择所有显示的元素    $("ul>li:hidden")

特殊符号的转义

如果选择器中有特殊符号,需要用反斜杠进行转义    \\

 例如:<p id="p1#a"></p>

$("#p1\\#a")    加反斜杠进行符号转义