jquery选择器与css选择器的风格类似，但是jquery涉及到的功能更为强大，利用jquery选择器，可以很快的找出特定的DOM元素，并且对其进行操作，无需担心浏览器是否支持这一选择器。
根据选择器行为特点划分，jquery选择器主要有以下几种分类：
（1）基本选择器
（2）层次选择器
（3）过滤选择器
（4）表单选择器
1.基本选择器
特点：最常用、最简单。
| 选择器 | 描述 | 返回 | 示例 |
| ＃id（id选择器） | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选择id为test的元素 |
| .class（类选择器） | 根据给定的class名称匹配多个元素 | 集合元素 | $(".test")选择类名为test的所有元素 |
| element（元素选择器） | 根据给定的元素名匹配多个元素 | 集合元素 | $("div")选择所有<div>元素 |
| ＊（全部选择器） | 匹配所有元素 | 集合元素 | $("*")选择所有元素 |
| sele1,sele2,seleN有效选择器 | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,p.test")选择所有的<div>和拥有class为test的<p>元素合并的集合 |
注：在网页中，每个id名称只能使用一次，class名称可重复使用。
2.层次选择器
特点：利用DOM元素间的层次关系。
| 选择器 | 描述 | 返回 | 示例 |
| $("a b") 后代选择器 | 选择a元素中所有的b（后代）元素 | 集合元素 | $("div span")选择<div>后代元素中的所有的<span>元素 |
| $("parent>child") 子选择器 | 选择parent元素下的child（子）元素。 | 集合元素 | $("div>span")选择<div>下的所有<span>子元素 |
| $("prev+next")相邻同辈元素选择器 | 选择紧接在prev元素后的next元素 | 单个元素 | $(".test+p")选择紧接在class为test的元素后的第一个<p>同辈元素 |
| $("prev~siblings")一般同辈元素选择器 | 选择器prev元素后的所有同辈元素 | 集合元素 | $("#test~div")选择id为test的元素后面的所有<div>同辈元素 |
注：
（1）子选择器与后代选择器的区别：后代选择器包括孙元素。
<body> <div> <p> <span></span> </p> <span></span> <span></span> </div></body>
如代码所示，当我们使用$("div span")后代元素选择器时，可以匹配到<div>中后代为<span>的元素，所以匹配结果为3个；当我们使用$("div>span")子元素选择器时，可以匹配到<div>中子元素为<span>的元素，所以匹配结果为2个（因为p标签中的span元素不是div的子元素）。
（2）可以用next()方法代替$("prev+next")选择器；用nextAll()方法代替$("prev~siblings")选择器。同时，有一个方法可选择所有的同辈节点元素，即siblings()方法。
3.过滤选择器
特点：通过过滤规则选择所需的DOM元素。按照不同的过滤规则，过滤选择器可分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。
基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选择第一个元素 | 单个元素 | $("div:first")选择所有<div>元素中第1个<div>元素 |
| :last | 选择最后一个元素 | 单个元素 | 同上反推 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("div:not(.test)")选择class不是test的div元素 |
| :even | 从一个元素集合中选择索引是偶数的所有元素 | 集合元素 | $("div:even")选择索引是偶数的div元素 |
| :odd | 从一个元素集合中选择索引是奇数的所有元素 | 集合元素 | 同上原理 |
| :eq(index) | 从一个元素集合中选择索引等于index的元素 | 单个元素 | $("div:eq(1)")选择索引等于1的<div>元素 |
| :gt(index) | 从一个元素集合中选择索引大于index的元素 | 集合元素 | $("div:gt(1)")选择索引大于1的<div>元素 |
| :lt(index) | 从一个元素集合中选择索引小于index的元素 | 集合元素 | 同上反推 |
| :header | 选择所有的标题元素 | 集合元素 | $(":header")选择网页中所有的<h1>,<h2>...元素 |
| :animated | 选择当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选择正在执行动画的<div>元素 |
| :focus | 选择当前获取焦点的元素 | 集合元素 | $("focus")选择当前获取焦点的元素 |
内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取含有文本内容为"text"的元素 | 集合元素 | $("div:contains('test')")选择含有文本test的<div>元素 |
| :empty | 选取不包含子元素或者文本的元素（即空元素） | 集合元素 | $("div:empty")选取不包含子元素的<div>元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent | 选择拥有子元素（包括文本）的元素 | 集合元素 | $("div:parent")选择含有子元素的<div>元素 |
内容过滤选择器的过滤规则主要以标签所包含的子元素来进行筛选过滤，其中子元素也包括了文本信息。
可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :hidden | 选择所有不可见的元素 | 集合元素 | $(":hidden") |
| :visible | 选择所有可见的元素 | 集合元素 | $("visible") |
隐藏元素包括：<input type="hidden"/>、<div >、<div >，如果需要确定元素类型，在前方加上元素名即可。例如，$("input:hidden")。
属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选择拥有此属性的元素 | 集合元素 | $("div[id]")选择拥有属性id的元素 |
| [attribute=value] | 选择属性的值为value的元素 | 集合元素 | $("div[class=test]")选择属性class为“test”的<div>元素 |
| [attribute!=value] | 选择属性的值不等于value的元素 | 集合元素 | 同上反推 |
| [attribute^=value] | 选择属性的值以value开始的元素 | 集合元素 | $("div[class=te]")将选择到例如class为"test"的<div>元素 |
| [attribute$=value] | 选择属性的值以value结束的元素 | 集合元素 | 同上反推 |
| [attribute*=value] | 选择属性的值含有value的元素 | 集合元素 | $("div[class=es]")将选择到例如class为"test"的<div>元素 |
| [attribute|=value] | 选择属性等于给定字符串或以该字符串为前缀 | 集合元素 | $("div[class|='te']")选择属性title等于te或者以te为前缀的元素 |
| [attribute~=value] | 选择属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[class~='te']")将选择到例如class为"te abc"的<div>元素 |
| [attribute1]...[attributeN] | 多个属性选择器合并成一个复合属性选择器 | 集合元素 | $("div[id][title$='test']")选择同时拥有id，并且title以test结束的<div>元素 |
属性过滤选择器主要是通过元素的属性来获取相应的元素。
子元素过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :nth-child(index/odd/even/equation) | 选择每个父元素下的第index个子元素或者奇偶元素(index)从1开始计算 | 集合元素 | $("div.test :nth-child(2)")选择class为"test"的<div>父元素下的第二个子元素 |
| :first-child | 选择每个父元素的第一个子元素 | 集合元素 | $("ul:first-child")将选择每个<ul>元素中第一个<li>元素 |
| :last-child | 选择每个父元素的最后一个子元素 | 集合元素 | 同上反推 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那将会被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选择唯一子元素<li> |
需要注意的是，“每个父元素”与“父元素”的区别，前者是多个元素的集合，后者是单个元素。:nth-child(3n)可以选择到每个父元素下索引值是3的倍数的元素。
表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选择所有可用元素 | 集合元素 | $("#form :enabled")选择id为form的表单内的所有可用元素 |
| :disabled | 选择所有不可用元素 | 集合元素 | 同上反推 |
| :checked | 选择所有被选中的元素 | 集合元素 | $("input:checked")选择所有被选中的<input>元素 |
| :selected | 选择所有被选中的选项元素 | 集合元素 | $("select option:selected") |
表单对象属性过滤选择器主要是针对表单元素进行过滤。
4.表单选择器
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选择所有的<input>、<textarea>、<select>、<button>元素 | 集合元素 | $(":input") |
| :text | 选择所有的单行文本框 | 集合元素 | $(":text") |
| :password | 选择所有的密码框 | 集合元素 | $(":password") |
| :radio | 选择所有的单选框 | 集合元素 | $(":radio") |
| :checkbox | 选择所有的复选框 | 集合元素 | $(":checkbox") |
| :submit | 选择所有的提交按钮 | 集合元素 | $(":submit") |
| :image | 选择所有的图像按钮 | 集合元素 | $(":image") |
| :reset | 选择所有的重置按钮 | 集合元素 | $("reset") |
| :button | 选择所有按钮 | 集合元素 | $("button") |
| :file | 选择所有的上传域 | 集合元素 | $("file") |
表单选择器能使我们能够方便的获取到表单的某个或某类型的元素。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
