背景

最近被问到好几次JQuery的选择器，原本想选择器想用的时候上网搜一下就好。
后来想想，自己学习技术的时候不够系统，是与他人进行技术方面的沟通时无法顺畅的沟通的主要原因之一。
古人说：亡羊补牢为时未晚。想到就做，就从现在开始系统的学习吧～加油～～～

文章中也会掺杂一些学习过程中遇到的知识点，目的也是为了能够举一反三扩充自己的知识点

学习时参考的文章列表如下：

jQuery入门笔记之（一）选择器引擎

guowenfhguowenfh.github.io/2015/12/31/jQuery-01-Sizzle

常规选择器

简单选择器

id选择器

$("#nodeid")

元素选择器

$("div")

类选择器

$(".className")

进阶选择器

群组选择器

群组选择器通过,把复数个选择器给连接起来获取对应的节点

$("#nodeid, div, .className")

后代选择器

获取指定的后代对象

$("ul li a")
等价的JQuery函数find

通配选择器

获取所有DOM对象

$("*")

高级选择器

子选择器

取得当前直接子代元素

$("ul > li")
等价的JQuery函数children

PS:

后代选择器和子选择器的区别是
后代选择器选择的是属于当前父节点的所有子代元素（例如：儿子，孙子，从孙子）
而子选择器选择的是儿子元素。

相邻元素选择器

选择的是

与 + 前元素同级
与 + 前元素相临
位于 + 前元素之后

$(“li + a”)

兄弟选择器

选择的是

与 + 前元素同级
位于 + 前元素之后

$(“li ~ a”)

PS:

CSS中不存在，JQuery独有的选择器函数
prev(与相邻元素选择器是一对儿)
    1.与当前元素同级
    2.与当前元素相临
    3.位于当前元素之前
    4.仅选择一个
    1 $("#nodeid").prev("p")

prevAll(与兄弟选择器是一对儿)
    1. 与当前元素同级
    2. 位于当前前元素之前
    $("#nodeid").prevAll("p")
prevUntil
    1.与当前元素同级
    2.位于当前元素之前
    3.在当前元素和指定元素之间
    $("#nodeid").prevUntil("div")
nextUntil
    1.与当前元素同级
    2.位于当前元素之后
    3.在当前元素和指定元素之间
    $("#nodeid").nextUntil("div")
siblings
    1.prevAll + nextAll
    **注意在同级中选择器可以命中两个指定节点时，此两个节点都会被选中**
    $("#nodeid").siblings()

属性选择器

$("input[type]")          选取拥有type属性值的input节点
$("input[type='text']")   选取type属性值为text的input节点
$("input[type^='date']")  选取type属性值为date开头的input节点
$("input[type$='e']")     选取type属性值为e结尾的input节点
$("input[type|='en']")    选取type属性值为en或以en-开头的input节点
$("input[type!='text']")  选取不具有type属性值或type属性值不等于text的input节点
$("input[type~='text']")  选取type属性值等于text或text在一个以空格分割的列表中的input节点
$("input[type*='e']")     选取type属性值包含``e``的input节点
$("input[data-widget][type='text']") 选取具有data-widget属性并且type属性值为text的input节点

过滤选择器

基本过滤器

$("input[type='text']:first")              选取指定元素中的第一个
$("input[type='text']:last")               选取指定元素中的最后一个
$("input:not(selector)")                   选取指定元素中selector没有命中的元素
$("div:odd")                               选取指定元素集合中序列号是奇数的元素(从0开始)
$("div:even")                              选取指定元素集合中序列号是偶数的元素(从0开始)
$("div:eq(1)")                             选取指定元素集合中序列号是1的元素(从0开始)
$("div:gt(1)")                             选取指定元素集合中序列号大于1的元素(从0开始)
$("div:lt(1)")                             选取指定元素集合中序列号小于1的元素(从0开始)

内容过滤器

$("div:contains('N')")                     选取包含N文本内容的元素
$("div:empty")                             选取不包含任何子元素和文本的元素
$("div:has('p')")                          选取含有p的div,与:not是好基友
$("div:parent")                            选取含有子元素或文本的元素

jQuery也提供了几个和名称:parent相同的函数
$("div").parent(selector)                  选取div的直接父节点，selector用于过滤
$("div").parents(selector)                 选取div的所有父节点，selector用于过滤
$("div").parentsUntil(selector)            选取div与selector之间的节点

可见性过滤器

$(“div:hidden”) 选取隐藏元素

符合以下几种情况的元素会被选取
1.input type="hidden"
2.display:none
3.width和height设为0
4.以上2和3两种元素的子元素也会被选取
5.option元素
**补充：visibility=true和opacity=0的元素没有被选中的原因是因为元素虽然不可见，但是还在当前文档中占有位置

$(“div:visible”) 选取可见元素

符合以下情况的元素会被选取
1.width或height不为0的元素
2.visibility=true和opacity=0的元素
3.其他任何可见元素

子元素过滤器

:first-child 获取父元素的第一个子元素

此处有疑问，first, first-child, first-of-type有什么区别呢？
个人理解
li:first取得的是li选择器获得的集合中的第一个元素
li:first-child取得的是li选择器获得的集合中的元素为其父元素物理位置上的第一个子元素
li:first-of-type取得的是li选择器获得的集合中的元素为其父元素中物理位置上第一个**li**子元素

:last-child 获取父元素的最后一个子元素
:only-child 获取其父元素内只有自己一个子元素的元素
:nth-child 获取指定索引值的元素

参数是基于被过滤的元素的父元素节点的顺序。
另外参数支持公式(an + b), n为周期长度，b为偏移值。例如2n + 1位下标为2的倍数 + 1的元素。
譬如下面的情况使用li:nth-child(1)无法匹配到li节点，需要使用li:nth-child(2)才可以。
1
2
3
4 <ul>
    <p></p>
    <li></li>
</ul>

例：
:nth-child(1)                          索引值从1开始计算
:nth-child(odd)                        奇数
:nth-child(even)                       偶数

其他方法

jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便开发时灵活使用。

方法名	描述
is(selector/jqueryObject/element/function)	传递选择器、DOM、jquery对象或是函数来匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，返回true
hasClass(className)	判断是否含有指定样式的元素
slice(start, end)	选择从start到end位置之前的元素(start<=index<end)，如果是负数，则从后开始
filter(selector/jqueryObject/element/function)	筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合。
end()	获取当前元素的前一个状态的元素(同级或父级)，另一种说法是终止在当前链的最新过滤操作，并返回匹配的元素的以前状态.此函数个人认为是高级操作，需要对jquery有详细了解时再使用
contents()	获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容

表单选择器

常规选择器

正常可以通过

1 2	$("input").val(); $("input[type='password']").val();

来取得表单内指定控件的值
PS:val和html等函数默认取得第一个元素的值

表单选择器

说白了就是提供简写的方式对form表单内的元素进行选择

方法名	描述
:input	选取所有 input、textarea、select 和 button元素
:text	选择所有单行文本框，即 type=text
:password	选择所有密码框，即 type=password
:radio	选择所有单选框，即 type=radio
:checkbox	选择所有复选框，即 type=checkbox
:submit	选取所有提交按钮，即 type=submit
:reset	选取所有重置按钮，即 type=reset
:image	选取所有图像按钮，即 type=image
:button	选择所有普通按钮，即 button 元素
:file	选择所有文件按钮，即 type=file

表单过滤器

方法名	描述
:enabled	选取所有可用元素
:disabled	选取所有不可用元素
:checked	选取所有被选中的元素，单选和复选字段
:selected	选取所有被选中的元素，下拉列表