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');

效果展示

ID选择器

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();