JQuery选择器小结

背景

虽然近几年随着ReactJs、VueJs等框架的流行，jQuery使用的频率不是很高了。但是如果维护一些旧项目还是存在大量使用jQuery的地方。这里总结一下jQuery选择器的各种写法，以备不时之需。

基本选择器

选择器	描述	返回	示例
#id	ID选择器	单个元素	$("#cancleBtn")选取ID为cancleBtn的元素
.class	样式选择器	集合元素	$(".test") 选取所有样式为test的元素
element	标签选择器	集合元素	$(“div”) 选取所有的div元素

这三个是最基本也是最常用的。

层次选择器

通过dom元素之间的层次关系来获取后代元素、子元素、相邻元素、同辈元素等：

选择器	描述	返回	示例
$(“s1 s2”)	后代选择器(多个选择器空格隔开)	集合元素	$(“div span”)选取div里的所有span元素
$(“parent > child”)	子元素选择器	集合元素	$(“div > span”)选取div元素下标签名是span元素 (注意和后代选择器的区别)
$(“prev + next”)	选取紧接在prev元素之后的next元素	集合元素	$(".one + span")选取class为one的下一个 span同辈元素
$(“prev ~ siblings”)	选取prev元素之后的所有siblings元素	集合元素	$("#hm ~ div")选取id为hm之 后的所有div同辈元素

$("div span")等价于$("div").find("span")
$("div > span")等价于$("div").children("span")
$(".one + span")等价于$(".one").next("span")
$("#hm ~ div")等价于$("#hm").nextAll("div")

过滤选择器

通过特定的过滤规则来筛选出所需的dom元素，与css中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单属性过滤选择器。

1.基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$(“div:first”)选取所有div元素中第1个div元素
:last	选取最后一个元素	单个元素	$(“div:last”)选取所有div元素中最后一个div元素
:not(selector)	去除所有与给定选择 器匹配的元素	集合元素	$(“input:not(.myClass)”)选取class不是 myClass的所有div元素
:even	选取索引是偶数的元素	集合元素	$(“input:even”)选取索引是偶数的<input>元素
:odd	选取索引是奇数的元素	集合元素	$(“input:odd”)选取索引是奇数的<input>元素
:eq(index)	选取索引等于index的元素	单个元素	$(“input:eq(1)”)选取索引等于1的<input>元素
:gt(index)	选取索引大于index的元素	集合元素	$(“input:gt(1)”)选取索引大于1的<input>元素
:lt(index)	选取索引小于index的元素	集合元素	$(“input:gt(1)”)选取索引小于1的<input>元素
:header	选取所有的标题元素	集合元素	$(":header")选取网页中的所有<h1>、<h2>、<h3>等
:animated	选取当前正在执行动画的元素	集合元素	$(“div:animated”)选取正在执行动画的div元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦点的元素

2.内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为text的元素	集合元素	$(“div:contains(‘www’)”)选取含有文本“www”的div元素
:empty	选取不含子元素或者文本的空元素	集合元素	$(“div:empty”)选取div空元素
:has(selector)	选取含有选择器匹配的元素的元素	集合元素	$(“div:has(‘p’)”)选取含有<p>元素的div元素
:parent	选取含有子元素或文本的元素	集合元素	$(“div:parent”)选取拥有子元素的div元素

3.可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见的元素	集合元素	$(“input:hidden”)选取所有不可见的input元素
:visible	选取所有可见的元素	集合元素	$(“input:visible”)选取所有可见的input元素

4.属性过滤选择器

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$(“div[id]”)选取拥有id属性的div元素
[attribute=value]	选取属性值为value的元素	集合元素	$(“div[title=test]”)选取title属性为test的div元素
[attribute!=value]	选取属性值不等于value的元素	集合元素	$(“div[title!=test]”)选取title属性不等于test 的div元素，也包括没有title属性的div元素
[attribute^=value]	选取属性值以value开头的元素	集合元素	$(“div[title^=test]”)选取title属性以test开头的div元素

更多详见《jQuery基础教程》第2版55页。

5.子元素过滤选择器

:nth-child(index/odd/even/equation) 选取每个父元素下的第index个子元素或着奇偶元素（index从1算起）
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素的唯一子元素，那么会被匹配。

6.表单对象属性过滤选择器

选择器	描述
:enabled	选取所有可用的元素
:disabled	选取所有不可用的元素
:checded	选取所有被选中的元素(单选框、复选框)
:selected	选取所有被选中的选项元素(下拉列表)

表单选择器

选择器	描述
:input	选取所有input、textarea、select、button元素
:text	选取所有的单行文本框
:password	选取所有的密码框
:radio	选取所有的单选框
:checkbox	选取所有的多选框
:submit	选取所有的提交按钮
:image	选取所有的图像按钮
:reset	选取所有的重置按钮
:button	选取所有的按钮
:file	选取所有的上传域
:hidden	选取所有不可见元素

注：以上摘自之前阅读《jQuery基础教程》的读书笔记，最近遇到项目中使用jQuery选择器的地方，又翻出来看看，比较容易搞混的是后代选择器$(".class1 .class2 .class3") 和 选择同时满足多个样式的元素$(".class1.class2.class3")；如果同时使用多个选择器逗号相隔$(".class1,.class2")。