概念

官方概念：

Query 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

个人理解：

jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

jQuery选择器的优势

• 代码更简单；
• 支持CSS1到CSS3选择器；
• 完善的机制处理。

基本选择器

id选择器

ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。
语法：

$("#id")

示例：

查找 ID 为"myDiv"的元素。

HTML代码：

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery代码：

$("#myDiv");

元素选择器

元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。
语法：

$("element")

示例：

查找一个 DIV 元素。

HTML代码：

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery代码：

$("div");

类名选择器

类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
语法：

$(".class")

示例：

查找所有类是 “myClass” 的元素。

HTML代码：

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery代码：

$(".myClass");

复合选择器

复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号","分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。

注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。
语法：

$("selector1,selector2,......,selectorN")

解释：

• selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等；
• selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等；
• selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等；
  示例：

找到匹配任意一个类的元素。

HTML代码：

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

jQuery代码：

$("div,span,p.myClass")

通配符选择器

匹配所有元素， 取得页面上所有的DOM元素集合的jQuery包装集。
语法：

$("*")

示例：

找到每一个元素 。

HTML代码：

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery代码：

$("*")

层次选择器

ancestor descendant选择器

ancesdor descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素。
语法：

$("ancestor descendant")

解释：

• ancestor是指任何有效的选择器；
• descendant是用以匹配元素的选择器，并且它是ancestor所指定元素后代元素 ；
  示例：

找到表单中所有的 input 元素。

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$("form input")

parent>child选择器

parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素。
语法：

$("parent>child")

解释：

• parent是指任何有效的选择器；
• child是用以匹配元素的选择器，并且它是parent元素的子元素 ；
  示例：

匹配表单中所有的子级input元素。

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$("form > input")

prev+next选择器

pev+next选择器用于匹配所有紧接在prev元素后的next元素，其中，prev和next是两个相同级别的元素。
语法：

$("prev+next")

解释：

• prev是指任何有效的选择器；
• next是一个有效选择器并紧接着prev选择器；
  示例：

匹配所有跟在 label 后面的 input 元素。

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$("label + input")

prev~siblings选择器

prev~siblings选择器用于匹配prev元素之后的所有siblings元素，其中prev和siblings是个相同辈元素。
语法：

$("prev~siblings")

解释：

prev是指任何有效的选择器。
示例：

找到所有与表单同辈的 input 元素。

HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码：

$("form ~ input")

过滤选择器

简单过滤选择器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。

:first 选择器

说明：匹配找到的第一个元素，它是与选择器结合使用的。

示例：$("tr:first") //匹配表格的第一行
:last 选择器

说明：匹配找到的最后一个元素，它是与选择器结合使用的。

示例：$("tr:last") //匹配表格最后一行
:even 选择器

说明：匹配所有索引值为偶数的元素，索引值从0开始计数。

示例：$("tr:even") //匹配索引值为偶数的行
:odd 选择器

说明：匹配所有索引值为奇数的元素，索引值从0开始计数。

示例：$("tr:odd") //匹配索引值为奇数的行
:eq(index) 选择器

说明：匹配一个给定索引值的元素。

示例：$("div:eq(1)") //匹配第二个div元素
:gt(index) 选择器

说明：匹配所有大于给定索引值的元素。

示例：$("span:gt(0)") //匹配索引大于0的span元素（注：大于0,而不包括0)
:lt(index) 选择器

说明：匹配所有小于给定索引值的元素。

示例：$("div:lt(2)") //匹配索引小于2的div元素（注：小于2,而不包括2)
:header 选择器

说明：匹配h1,h2,h3…之类的标题元素。

示例：$(".cls:header") //匹配全部类名为cls的标题元素，如果":"前不写则匹配所有的标题元素
:not(selector) 选择器

说明：去除所有给定选择器匹配的元素。

示例：$("input:not(:checked)") //匹配没有被选中的input元素
:animated 选择器

说明：匹配所有正在执行动画效果的元素。

示例：$("div:animated") //匹配正在执行的动画的div元素

内容过滤选择器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
:contains(text) 选择器

说明：匹配包含给定文本的元素。

示例：$("li:contains('word')") //匹配含有"word"文本内容的元素
:empty 选择器

说明：匹配所有不包含子元素或者文本的空元素。

示例：$("td:empty") //匹配不包含子元素或者文本的单元格
:has(selector) 选择器

说明：匹配含有选择器所匹配元素的元素

示例：$("td:has(p)") //匹配表格的单元格中还有<p>标记的单元格
:parent 选择器

说明：匹配含有子元素或者文本的元素。

示例：$("td:parent") //匹配不为空的单元格，即在该单元格中还包括子元素或则文本

可见性过滤选择器

元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。
:visible 选择器

说明：匹配所有可见元素。

示例：$("tr:visible") // 查找所有可见的 tr 元素
:hidden 选择器

说明：匹配所有不可见元素。

示例：$("tr:hidden") // 查找隐藏的 tr

注意：在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配识别。

表单对象属性过滤选择器

表单对象的属性过滤选择器通过表单元素的状态属性（例如：选中、不可用等状态）匹配元素。
:checked 选择器

说明：匹配所有选中的被选中元素。

示例：$("input:checked") //匹配所有被选中的input元素
:disabled 选择器

说明：匹配所有不可用元素。

示例：$("input:disenabled") //匹配所有不可用input元素
:enabled 选择器

说明：匹配所有可用的元素。

示例：$("input:enabled") //匹配所有可用的input元素
:selected 选择器

说明：匹配所有选中的option元素。

示例：$("select option:selected") //匹配所有被选中的选项元素

子元素过滤选择器

子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定。
:first-child 选择器

说明：匹配所有给定元素的第一个子元素。

示例：$("ul li:first-child") //匹配ul元素中的第一个子元素li
:last-child 选择器

说明：匹配所有给定元素的最后一个子元素。

示例：$("ul li:last-child") //匹配ul元素中的最后一个子元素li
:only-child 选择器

说明：如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配。

示例：$("ul li:only-child") //匹配只含有一个li元素的ul元素中的li
:nth-child(index/even/odd/equation) 选择器

说明：匹配可每个父元素下的第index个子或奇偶元素，index从1开始，而不是从0开始。

示例：$("ul li :nth-child(even)") //匹配ul中索引值为偶数的li元素

$("ul li:nth-child(3)") //匹配ul中第3个li元素

属性选择器

属性选择器就是通过元素的属性作为过滤条件进行筛选对象。
[attribute]

说明：匹配包含给定属性的元素。

示例：$("div[name]") //匹配包含有name属性的div元素
[attribute=value]

说明：匹配属性值为value的元素。

示例：$("div[name='test']") //匹配name属性是test的div元素
[attribute!=value]

说明：匹配属性值不等于value的元素。

示例：$("div[name!='test']") //匹配name属性不是test的div元素
[attribute*=value]

说明：匹配属性值含有value的元素。

示例：$("div[name*="test"]") //匹配name属性值中含有test值的div元素
[attribute^=value]

说明：匹配属性值以value开始的元素。

示例：$("div[name^='test']") //匹配name属性以test开头的div元素
[attribute$=value]

说明：匹配属性值以value结束的元素。

示例：$("div[name$='test']") //匹配name属性以test结尾的div元素
[selector1][selector2][selectorN]

说明：复合属性选择器，需要同时满足多个条件时使用。

示例：$("div\[id\][name^='test']") //匹配具有id属性并且name属性是以test开头的div元素

表单选择器

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。
:input

说明：匹配所有的input元素。

示例：$(":input") //匹配所有的input元素

$("form :input") //匹配<form>标记中的所有input元素，需要注意，在form和冒号之间有一个空格
:button

说明：匹配所有的普通按钮，即type="button"的input元素。

示例：$(".button") //匹配所有普通按钮
:checkbox

说明：匹配所有的复选框。

示例：$(":checkbox") //匹配所有的复选框
:file

说明：匹配所有的文件域。

示例：$(":file") //匹配所有的文件域
:hidden

说明：匹配所有的不可见元素，或者type为hidden的元素。

示例：$(":hidden") //匹配所有的隐藏域
:image

说明：匹配所有的图像域。

示例：$(":image") //匹配所有的图像域
:password

说明：匹配所有的密码域。

示例：$(":password") //匹配所有的密码域
:radio

说明：匹配所有的单选按钮。

示例：$(":radio") //匹配所有的单选按钮
:reset

说明：匹配所有的重置按钮，即type="reset"的input元素。

示例：$(":reset") //匹配所有的重置按钮
:submit

说明：匹配所有的提交按钮，即type="submit"的input元素。

示例：$(":submit") //匹配所有的提交按钮
:text

说明：匹配所有的单行文本框。

示例：$(".text") //匹配所有的单行文本框
微信交流：zzxingyun