JavaScript—Jquery选择器和过滤器

选择器

1. 基本选择器
  基本选择器和css的选择器一样，有id选择器#id，类选择器.class，标签选择器和通用选择器*
2. 复合选择器
  复合选择器有子代选择器、后代选择器、组合选择器、后面兄弟选择器和紧跟兄弟选择器，当然除了这些选择器还有对应的方法也可以获得对应的元素。
  1）子代选择器
   父代>子代或者通过对应的方法，即：父代.children()，就是获得子代的元素。
  2）后代选择器
   祖代 后代中间以一个空格隔开，或者对应的方法：父代.find()就是获得所有的后代元素。
  3）组合选择器
   选择器1,选择器2,选择器3,...
  4）后面兄弟选择器
   当前元素~后面元素，也可以用当前元素.nextAll()方法，和选择器的作用是一样的。还有一个prevAll()方法是获得前面兄弟元素。
  5）紧跟兄弟选择器
   当前元素+紧跟元素，对应的方法是.next()。.prev()方法是获得紧邻前面兄弟元素。
  除此之外还有一个方法是siblings()，它的作用是获得除当前元素之外的所有元素。

过滤器

1. 基本过滤器
  基本过滤器的基本格式是:标记
  1）首先就是根据索引过滤元素
   获取第一个元素：:first，它也有对应的方法：first()
   获取最后一个元素：:last，对应的方法：last()
   获取指定的索引：:eq(索引)，eq的意思是等于
   获取所有索引为偶数的元素 ：:even
   获取所有索引为奇数的元素 ：:odd
   获取大于某个索引的元素：:gt(索引)
   获取小于某个索引的元素：:lt(索引)
  2）除某个标签之外的元素：:not(selector)，比如:not(p)就是获取除p标签之外的所有元素
  3）直接获得元素：:header，就是获取h1、h2、h3、h4、h5、h6等。

 ☀注意：过滤器使用后还可以继续过滤，但是每次都使用上一次过滤的结果。比如：$(":gt(0):lt(3)")，过滤完0索引的元素，继续过滤时还是从0索引开始，所以它实际获得是索引为1,2,3的元素。

2. 属性过滤器（用属性作为筛选的依据）
  1）$("selector[属性名]")，过滤出含有该属性的元素
  2）$("selector[属性名=值]"),过滤出含有该属性，并且具有指定值的元素
  3）$("selector[属性名!=值]"),过滤出含有该属性，并且不具有指定值的元素
  4）$("selector[属性名^=值]"),过滤出含有该属性，并且以该值开头的元素
  5）$("selector[属性名$=值]"),过滤出含有该属性，并且以该值结尾的元素
  6）$("selector[属性名*=值]"),过滤出含有该属性，并且含有该值的元素
  7）$("selector[属性名|=值]"),过滤出含有该属性，以该值开头且之后紧跟连字符-的元素。
  8）$("selector[属性名~=值]"),过滤出含有该属性，属性值以空格分开的，只要其中包含就可以 或者 只有一个属性且值相等的元素

3. 表单元素过滤器
  1）$("#form1:enabled")，选取id为form1的表单中所有启用的元素
  2）$("#form1:disabled")，选取id为form1的表单中所有禁用的元素
  3）$("input:checked")，选取所有选中的元素
  4）$("select:selected")，选取所有的下拉列表
  5）$("#form1:hidden")，选取id为form1的表单中所有不可见元素
  6）$("#form1:visible")，选取id为form1的表单中所有可见的元素
 当然也可以根据标签过滤：$(":标签")，比如$(":radio")选取所有的单选按钮

4. 内容过滤器
  1）$(":contains(text)")，过滤出包含指定文本的元素(innerText)
  2）$(":empty")，过滤出没有子节点的元素
  3）$(":has(selector)")，过滤出包含指定标签的元素
  4）$(":parent")，过滤出所有的父元素

5. 子元素过滤器
  1）$(":first-child")，过滤出第一个子元素
  2）$(":last-child")，过滤出最后一个子元素
  3）$(":only-child")，过滤出只包含一个子元素的元素

 ☀first()和first-child()的区别
  first()是按线性结构来的，first-child()保留了层次结构