jquery的选择器

Posted 2020-08-09 不会飞的麻雀

一。基本选择器

1.$("#id") id选择器，返回单个元素

2.$(".class") class选择器，返回集合元素

3.$("element") 标签element，返回集合元素

4.$("*") 所有元素*，改变所有html标签元素，返回集合元素

5.$("selector,selector2……") 将每一个选择器匹配到的元素合并后一起返回，返回集合元素

二。层次选择器

1.$("ancestor descendant") 后代元素选择器，其中ancestor是指任何有效元素，descendant是其后代

2.$("parent>child") 子元素选择器

　　注：子元素选择器只能选择到子元素，后代元素选择器能选择所有后代，子孙等

3.$("prev+next") 相邻元素选择器，next是prev元素相邻的下一个元素

4.$("prev~siblings") 兄弟选择器，siblings是指prev元素后面的所有兄弟元素

在这里写几个方法，可以与上面的方法交替使用：

1.jquery.parent() 找父元素

2.jquery.parents() 找到所有祖先元素，不只限于一个父元素

3.jquery.children() 查找所有子元素，只会找到直接的孩子节点，不会孙子

4.jquery.contents() 查找下面的所有内容，包括节点和文本

5.jquery.prev() 查找上一个兄弟节点

6.jquery.prevAll() 查找之前的所有兄弟节点

7.jquery.next() 查找下一个兄弟节点

8.jquery.nextAll() 查找之后的所有兄弟节点

9.jquery.siblings() 查找其余的所有兄弟节点，部分前后

10.jquery.find(expr) 查找其子孙后代中的元素节点

三。基本过滤选择器

jquery选择器的过滤规则与css中的伪类选择器语法是相同的，都以":"开头。

1. :first 选取第一个元素，例如：$("E:first")。返回单个元素

2. :last 选取最后一个元素，返回单个元素

3. :not(selector) 去除所有与给定选择器匹配的元素，返回集合元素

4. :even 选取索引值为偶数的所有元素，其中索引值从0开始计算，返回集合元素

5. :odd 选取索引值为奇数的所有元素，返回集合元素

6. :eq(index) 选取索引值等于index的元素，其中index从0开始计算，返回集合元素

7. :gt(index) 选取索引值大于index的元素，其中index从0开始计算，返回集合元素

8. :lt(index) 选取索引值小于index的元素，其中index从0开始计算，返回集合元素

9. :header 选取页面所有标题元素h1-h6，返回集合元素

10. :animated 选取当前正在执行动画的所有元素

四。内容过滤选择器

1. :contains(text) 选取含有文本内容为"text"的元素，返回集合元素

2. :empty 选取不含任何子元素或文本的空元素，返回集合元素

3. :has(selector) 选取含有选择器所匹配的元素，返回集合元素

4. :parent 选取含有子元素或者文本的元素标签，返回集合元素