基本选择器：
#id 根据Id匹配一个元素
.class 根据给定的类名匹配一个元素
element 根据元素名匹配一个元素
* 匹配所有元素
selecttor1,selector2 并集，返回两个选择器匹配到的元素
层次选择器：
ancestor descendant 根据祖先匹配所有的后代元素
parent>child 根据父元素匹配所有的子元素，直接后代
prev+next 匹配下一个兄弟元素 相当于next()方法
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
简单过滤选择器：
:first或first() 匹配第一个元素
:last或last() 匹配最后一个元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值为偶数的元素，索引号从0开始
:odd 匹配索引值为奇数的元素，索引号从0开始
:eq(index) 匹配指定索引号的元素，索引号从0开始
:gt(index) 匹配索引号大于给定索引值的元素，索引号从0开始
:lt(index) 匹配索引号小于给定索引值的元素，索引号从0开始
:header 匹配所有的标题元素 h1 h2 h3 h4 h5 h6
:animated 匹配所有正在执行动画的元素
内容过滤选择器：
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
可见性过滤选择器：
:hidden 匹配不可见元素，或者type="hidden"的元素 含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式
:visible 获取所有的可见元素
属性过滤选择器：
[attribute] 匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value] 匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素，部分前后，中间有也算
[selector][selector] 匹配属性选择器的交集
子元素过滤选择器：
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
:first 获取所有父元素下的第一个子元素
:last 获取所有父元素下最后一个子元素
:only-child 获取所有父元素下唯一的一个元素
表单对象属性过滤选择器：
:enabled 获取表单中所有可用的元素
:disabled 获取表单中所有不可用的元素
:checked 获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器：
:input 获取所有的表单元素<input开头的，还有textarea select
:text 获取所有的单行文本框 <input type="text" />
:password 获取所有的密码框元素 <input type="password" />
:radio 获取所有的单选按钮 <input type="radio" />
:checkbox 获取所有的复选框 <input type="checkbox">
:submit 获取所有的提交按钮 <input type="submit" />
:image 获取所有的图像按钮 <input type="image" />
:reset 获取所有的重置按钮 <input type="reset" />
:button 获取所有的按钮 <input type="button">
:file 获取所有的文件上传框 <input type="file" />
1、基本选择器
(1)、#id 根据Id匹配一个元素
$("#div1").css("background-color","red"); //匹配id为"div1"的元素
<div id="div1">我是一个DIV</div> //会选中该div元素
(2)、element 根据给定的元素名匹配元素
$("p").css("background-color","red"); //匹配页面所有的p元素
<p>我是一个P</p>
(3)、class 根据class属性匹配元素
$(".important").removeClass(); //匹配所有class="important"元素
<p class="important">我是一个p元素</p>
(4)、* 匹配所有的元素
$("*").css("background-color","red");
(5)、selector1,selector2 选择器之间用逗号分隔 返回每一个选择器匹配到的元素
$(".div1,#span1").css("background-color","red");
2、层次选择器
(1)、ancestor descendant 根据祖先元素匹配所有的后代元素，返回的是匹配到的后代元素，用空格分开。
$("#div1 span").css("color","red");
<div id="div1">
<span>我是span1</span> ***会被选中，是#div1的后代span
<div>
<span>我是span3</span> ***会被选中，也是#div1的后代span
</div>
</div>
<span>我是span2</span> ***不会被选中，不是#div1的后代
(2)、parent > child 根据父元素匹配所有的子元素 返回所有的子元素 用大于号">"分隔
$("#div1 > span").css("color","red");
<div id="div1">
<span>我是span1</span> ***会被选中，是#div1的子元素span
<div>
<span>我是span3</span> ***不会被选中，是#div1的后代元素，但不是直接子元素
</div>
</div>
<span>我是span2</span> ***不会被选中，不是#div1的子元素
(3)、prev + next 匹配紧接在prev元素后的相邻的下一个元素 用加号"+"分隔。
相当于.next()方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").next().css("color","red");
<div>
<p>我是第一个P</p> ***不会被选中，是class为p1的上一个了
<p class="p1">我是第二个P</p> ***prev本身并不会被选中
<p>我是第三个P</p> ***会被选中，是class为p1的下一个相邻元素
<p>我是第四个P</p> ***不会被选中，不是class为p1的下一个，是下二个了
</div>
(4)、prev ~ sibings 匹配prev后面的的所有兄弟元素 用波浪线"~"分隔开
相当于 nextAll()方法
$(".p1 + p").css("color","red"); //此行代码相当于$(".p1").nextAll("p").css("color","red");
<div>
<p>我是第一个P</p> ***不会被选中，是class为p1前面的元素
<p class="p1">我是第二个P</p> ***prev本身并不会被选中
<p>我是第三个P</p> ***会被选中，是class为p1后面的P兄弟元素
<p>我是第四个P</p> ***会被选中，也是class为p1后面的P兄弟元素
</div>
(5)、选中所有的兄弟元素 sibling