jQuery选择器

jQuery 最核心的组成部分就是选择器引擎。
jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。而且不必担心浏览器的兼容性，写法更加简洁。

优点：相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比，使用jQuery 选择器来进行操作代码更简单且拥有完善的代码检测机制。

jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 :基本选择器、层级选择器、筛选选择器、表单选择器。

1. 基本选择器

选择器	功能	参考示例
ID选择器	根据给定的ID匹配一个元素	$(“#divID”)
类选择器	根据给定的类名匹配所有的元素	$(“.box”)
标签选择器	根据给定的元素名匹配所有的元素	$(“div”)
通配符选择器	匹配所有的元素	$(“div”)
并集选择器	将每个选择器匹配到的元素合并在一起后返回	$(“div”)

2. 层级选择器

选择器	语法	功能	参考示例
后代选择器	parent child	根据祖先元素匹配所有的后代元素	$(“div p”)
直接后代选择器	parent > child	根据父元素匹配所有的子元素	$(“div > .box”)
下一个相邻兄弟	prev + next	匹配所有紧接在prev元素后的相邻元素	$(“#demoID + div”)
后面所有兄弟	prev ~ siblings	匹配 prev 元素之后的所有兄弟元素	$(“#demoID ~ div”)

注意：后代选择器获取的是所有的后代标签（层次关系是祖先与后代），而直接后代仅仅获取指定标签的子节点满足条件的标签（层次关系为父子关系）。
next() == 下一个相邻兄弟 || nextAll() == 后面所有兄弟

父子选择器相关方法	功能
parent()	获取当前标签的父节点
parents()	获取当前标签的祖先节点
parentsUntil()	获取当前标签的祖先节点直到…
children()	获取当前标签的子节点
siblings()	获取当前标签的兄弟节点

3. 筛选选择器

3.1 基本筛选选择器

选择器	功能
last() 或 : last	获取最后一个元素
first() 或 : first	获取第一个元素
:eq(index)	获取指定索引值的元素
:gt(index)	获取大于给定索引值的元素
:lt(index)	获取小于给定索引值的元素
:not(selector)	获取除给定选择器外的所有元素
:header	获取所有标题类型的元素，如h1 h2
:animated	获取正在执行动画效果的元素
:even	获取所有索引值为偶数的元素，索引号从0开始
:odd	获取所有索引值为奇数的元素，索引号从0开始

3.2 内容筛选选择器

选择器	功能
:contains(text)	获取包含给定文本的元素
:parent	获取含有子元素或者文本的元素
:empty	获取所有不包含子元素或文本的空元素
:has(selector)	获取含有选择器所匹配的元素

3.3 属性筛选选择器

选择器	功能
[属性名]	获取包含给定属性的元素
[属性名='value']	获取包含给定属性且等于指定值的元素
[属性名！='value']	获取包含给定属性且不等于指定值的元素
[属性名^='value']	获取包含给定属性且以指定字符开头的元素
[属性名$='value']	获取包含给定属性且以指定字符结尾的元素
[属性名*='value']	获取包含给定属性且包含指定字符的元素
[属性名1][属性名2]	获取满足多个条件的复合属性的元素

根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。
$("a[href$='com']").css("background","green");
$("a[href^='www'][title='demo']").css("background","green");

3.4 子元素筛选选择器

选择器	功能
:first-child	获取每个父元素下的第一个子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素
:nth-child(eq-index)	获取每个父元素下特定位置的元素索引从1开始

3.5 可见性筛选选择器

选择器	功能
:visible	获取所有的可见元素
:hidden	获取所有不可见元素,或者type为hidden的元素

根据元素是否可见的特征获取元素，分为可见和不可见两种。

3.6 表单对象属性筛选选择器

选择器	功能
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中所有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中option的元素

通过表单中某对象的属性特征获取该类元素，主要有enabled、disabled、checked（选中）elected等属性。

4. 表单选择器

选择器	功能
:file	获取所有文件域
:image	获取所有的图像域
:text	获取所有的单行文本框
:reset	获取所有重置按钮
:radio	获取所有单选框按钮
:button	获取所有按钮
:submit	获取所有提交按钮
:checkbox	获取所有的复选框
:password	获取所有的密码框
:input	获取所有的input、textarea、select标签

• 表单在前端开发中是非常重要的标签，在显示和提交数据的数据经常需要用到，在 jQuery 框架中引入了表单选择器，该选择器专为表单量身打造，通过表单选择器可以在页面中快速定位某表单对象。

  
  image.png