1.基础选择器
1.1 ID选择器
语法：
$("#id").action();
栗子:
HTML
<div id="box1" class="box"></div>
CSS
.box{width:50px;height:50px;line-height:50px;text-align:center;border-radius:100%;background:orangered;margin:10px 15px;}
JS
$('#box1').css('background-color','green');
效果展示
1.2 class选择器
语法
$(".className").action();
栗子
HTML
<div class="box box2"></div>
CSS
.box{width:50px;height:50px;line-height:50px;text-align:center;border-radius:100%;background:orangered;margin:10px 15px;}
JS
$('.box2').css('background-color','yellow');
效果展示
1.3 元素选择器
语法
$("element").action();
栗子
HMTL
<div class="box"><p>元素</p></div>
CSS
.box{width:50px;height:50px;line-height:50px;text-align:center;border-radius:100%;background:orangered;margin:10px 15px;}
JS
$('p').css('color','#fff');
效果展示
2. 属性选择器
2.1 获取所有包含[attr]的元素
语法
$("[attr]").action();
2.2 获取[attr = value]的所有元素
语法
$("[attr = value]").action();
2.3 获取[attr != value]的所有元素
语法
$("attr != value").action();
2.4 获取[attr $= value]属性值以value开始的左右元素
语法
$("attr $= value").action();
3. 首尾选择器
3.1获取第一个元素
语法
$("selector:first").action();
3.2获取最后一个元素
语法
$("selector:last").action();
4.奇、偶选择器
4.1奇数选择器
语法
$("selector:odd").action();
4.2偶数选择器
语法
$("selector:even").action();
栗子
JS
$('ul li:even').css('background-color','red');
$('ul li:odd').css('background-color','yellow');
效果展示
5.个数选择器
5.1选择第几个元素（index从零开始）
语法
$("selector:eq(index)").action();
5.2选择n大于某个值的元素
语法
$("selector:gt(n)").action();
5.3选择n小于某个值的元素（n从零开始）
语法
$("selector:lt(n)").action();
5.4选择不是指定选择器的元素（n从零开始）
语法
$("selector:not(selector)").action();
栗子
JS
$('ol li:gt(3)').css('background-color','#0f0');
$('ol li:lt(4)').css('background-color','#ccc');
$('input:not(:empty)').css('background-color',"#00a0e6");
效果展示
6.标题选择器(获取所有的标题元素(h1-h6)
语法
获取从h1-h6的所有标题
$(":header").action();
获取所有h1
$("h1:header").action()；
栗子
JS
$('h1:header').css('color',"#f00");
$('h3:header').css('color',"#ff0");
$('h4:header').css('color',"#00f");
$('h5:header').css('color',"#0f0");
$('h6:header').css('color',"#ddd");
效果展示
7.表单选择器
7.1 input选择器
语法
$(":input").action();
7.2 获取所有类型为text的input元素
语法
$(":text").action();
7.3 获取所有类型为password的input元素
语法
$(":password").action();
7.4 获取所有类型为radio的input元素
语法
$(":radio").action();
7.5 获取所有类型为checkbox的input元素
语法
$(":checkbox").action();
7.6 获取所有类型为submit的input元素
语法
$(":submit").action();
7.7 获取所有类型为reset的input元素
语法
$(":reset").action();
7.8 获取所有类型为button的input元素
语法
$(":button").action();
7.9 获取所有类型为image的input元素
语法
$(":image").action();
7.10 获取所有类型为file的input元素
语法
$(":file").action();
8.状态选择器
8.1获取所有激活的元素
语法
$(":enable").action();
8.2 获取所有禁用的元素
语法
$(":disabled").action();
8.3 获取所有选取的元素
语法
$(":selected").action();
8.4 获取所有选中的元素
语法
$(":checked").action();
