CSS选择器
首先了解一下CSS选择器，CSS即层叠样式表他将网页结构和表现样式完全分离出来，利用CSS选择器可以轻松在不改变HTML结构的前提下改变样式。他是利用获取目标元素后施加样式，有三种方式：行间样式表、内部样式表、外部样式表。
| 选择器 | 语法 | 描述 | 示例 |
| 标签选择器 | E{ 样式 } |
以标签作为选择符 | td{ font-size:14px; } |
| ID选择器 | #ID{ 样式 } |
以文档元素的唯一ID作为选择符 | #info{ font-size:14px; } |
| 类选择器 | E.className{ } .className{ } |
以文档元素的class作为选择器符 | div.info{ font-size:14px; } .info{ font-size:14px; } |
| 群组选择器 | E1,E2,E3{ 样式 } |
多个选择符共用同样的样式 | div,p,a{ font-size:14px; } |
| 后台选择器 | E F{ 样式 } |
元素E的后代元素F作为选择符 | #links a{ font-size:14px; } |
| 通配符选择器 | *{ 样式 } |
以文档的所有元素作为选择符 | *{ font-size:14px; } |
<style>
#info{
font-size:14px;
}
.demo{
font-size:13px;
}
</style>
jQuery选择器
jQuery选择器完全继承了CSS的风格，通过选择器轻松获取到DOM元素后，然后为其添加行为。
function click(){
alert("success");
}
<p id="cl" onclick='click()'>Click me</p>
$("#cl").click(function(){
alert("click me!");
});
js获取页面元素，如果元素不存在则会报错，所以要对其进行检验。而jQuery中获取对象后，即使该元素不存在也不会抱错，使用js判断元素是否存在：
<script>
if(document.getElementById("demo")){
...
}
//如果使用jQuery判断该元素是否存在
if($("#demo").length>0){
.....
}
//或者转化为DOM对象
if($("#demo")[0]){
...
}
</script>jQuery选择器分类
jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据指定的ID匹配元素 | 单个元素 | $("#info")获取id为info的元素 |
| .class | 根据指定的类名匹配元素 | 集合元素 | $(".info")获取class属性为info的元素 |
| element | 根据指定标签匹配元素 | 集合元素 | $("p")选取所有p标签的元素 |
| ＊ | 匹配所有元素 | 集合元素 | $("p")选区所有元素 |
| select1,select2.... | 匹配每一个指定的元素 | 集合元素 | $("div,span,p.myClass")选区所有<div>元素、<span>元素、class为myClass的<p>元素 |
$("p").css("background","#ffffff")改变所有p元素的背景颜色。
$(".demo").css("background","#ffffff")改变所有class为demo的背景颜色。
$("span,div.demo,#demo").css("background","#ffffff")改变所有span元素、div元素中class为demo、id为demo的元素背景颜色。
层次选择器
如果想要通过DOM元素间的层次关系获取元素，可以使用层次选择器。比如：后代元素、子元素、相邻元素和同辈元素等。
| 选择器 | 描述 | 返回 | 示例 |
| $("sele1 sele2") | 后代元素，获取sele1元素后的所有sele2元素 | 集合元素 | $("div span")获取div元素内的span元素 |
| $("parent > child") | 子代元素，这个是获取parent子代元素，上面的那个是获取其下的所有元素。 | 集合元素 | $("div > span")获取div元素下的<span>元素 |
| $("selec1 + selec2") | 相邻元素，选取selec1元素后的selec2元素 | 集合元素 | $(".demo + div")选取class属性为demo的下一个<div>元素 |
| $("sele1~sele2") | 同代元素，选取sele1元素后的所有sele2元素 | 集合元素 | $("#demo~div") 选取id为demo元素后的所有div元素 |
相邻元素选择器和同代元素选择器有更简单的替代
$(".demo + div") 相当于 $(".demo").next("div");
$("#demo ~ div")相当于$("#demo").nextAll("div");这个只能获取其后面的所有元素
$("#demo").siblings("div")无论前后都能获取。
过滤选择器
通过特定的过滤规则筛选所需的DOM元素。
| 选择器 | 描述 | 返回 | 示例 |
| :first | 获取第一个元素 | 单个元素 | $("div:first")获取div元素中的第一个div元素 |
| :last | 获取最后一个元素 | 单个元素 | $("div:last")获取div元素中的最后一个元素 |
| :not(selector) | 去除指定匹配的元素 | 集合元素 | $("div:not(.demo)")选取div中class属性不是demo的元素 |
| :even | 选取索引是偶数的元素，索引从0开始 | 集合元素 | $("input:even")选取input元素中索引是偶数的<input>元素 |
| :odd | 选取索引是奇数的元素，索引从0开始 | 集合元素 | $("input:odd")选取input元素中索引是奇数的<input>元素 |
| :eq(index) | 选取索引等于index的元素 | 单个元素 | $("input:eq(1)")选取input元素中索引等于1的<input>元素 |
| :gt(index) | 索引大于index元素 | 集合元素 | $("div:gt(1)")选取div中索引大于index的元素 |
| :lt(index) | 索引小于index元素 | 集合元素 | 同上小于 |
| :header | 选取所有head元素 | 集合元素 | $(":header")选取页面中所有标题元素 |
| :animated | 选取正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
| :focus | 选取当前聚焦点元素 | 单个元素 | $(":focus")选取当前聚焦点元素 |
可见性过滤器：选取所有不可见元素 :hidden ，可见元素:visible。属性过滤器$("div[id]")选取div中含有id属性的元素，$("div[title=test]")选取属性tile为test的div元素，$("div[title!=test]")属性不为test的元素$("div[title^=test]")属性值以test开头,$("div[title$=value]")属性值以value结尾，$("div[title*=test]")属性值含有test，$(div[id][title=value])含有属性id并且含有属性title属性值为value的元素。另外后有自元素过滤器ntlochild()、first-child()、last-child()、only-child.
表单属性过滤器：$("#form1:enabled")id为form1的表单内所有可用元素$("$form2:disabled")id为form2的表单内所有不可用元素,$(input:checked)input元素被选中的元素,$(select option:selected)菜单被选中的元素。
表单选择器
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选取所有<input>,<textarea>,<select><button>元素 | 集合元素 | $(":input") |
| :text | 选取所有单行文本框 | 集合元素 | $(":text") |
| :password | 选取所有密码框 | 集合元素 | $(":password") |
| :radio | 选取所有单选框 | 集合元素 | $(":radio") |
| :checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
| :submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
| :reset | 选取所有重置按钮 | 集合元素 | $(":reset") |
| :button | 选取所有按钮 | 集合元素 | $("button") |
| :file | 选取所有上传域 | 集合元素 | $(":file") |
| :hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
| :image | 选取所有图像的按钮 | 集合元素 | $(":image") |