jQuery选择器

时间:2022-12-29 11:20:57
什么是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") 加反斜杠进行符号转义