飞比寻常 (JOE) 生，简单，活，简单，生活，不简单！
JOE个人网站
JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。
1、#id ID选择器
$(function(){
$('#pid').css('background','blue');
});
<p id='pid'>AAA</p> //p被选中
2、element 元素选择器
$(function(){
$('p').css('background','blue'); //p被选中
});
<p>AAA</p>
3、.class 类选择器
$(function(){
$('.pid').css('background','blue'); //p被选中
});
<p class='pid'>AAA</p>
4、* 通配符
$(function(){
$('*').css('background','blue');
});
<p class='pid'>AAA</p> //选中所有
<b>CCCCC</b>
5、多个选择器多选，用“,”隔开
$(function(){
$('.pid,b,i').css('background','blue');
});
<p class='pid'>AAA</p>
<b>CCCCC</b>
<i>xxxx</i> //p,b,i都被选中
6、关联选择器，用空格隔开
$(function(){
$('p b').css('background','blue');
});
<b>AAA</b>
<p><b>DDD</b></p> //这个被选中
7、parent > child parent下面的所有child子元素
$(function(){
$('div > p').css('background','blue');
});
<div >
<p>222</p>
<p>333</p>
<b>444</b>
<p>555</p> //选中2，3，5
</div>
<p>666</p>
8、prev + next 匹配所有紧接在prev后的next元素
$(function(){
$('p + b').css('background','blue');
});
<div >
<p>333</p>
<b>444</b>
<p>555</p>
</div>
<b>222</b>
9、prev ~ sibling 匹配 prev元素之后的所有 sibling元素
$(function(){
$('p ~ b').css('background','blue');
});
<div >
<p>333</p>
<b>444</b>
<i>
<b>777</b>
</i>
<b>666</b>
</div>
<b>222</b> //选中了4，6
10、:first 获取匹配的第一个元素
$(function(){
$('p:first').css('background','blue');
});
<p>1</p> //选中1
<p>2</p>
<p>3</p>
<p>4</p>
11、:last 获取匹配的最后一个元素，例子同上类似
12、:not(selector) 去除所有与给定选择器匹配的元素
$(function(){
$('input:not(:checked)').attr('checked','checked');
});
<form>
<input type="checkbox" name='sex' value=1 checked="checked" />男
<input type="checkbox" name="sex" value=0 />女
<input type="checkbox" name="sex" value=4 />未知
</form> //都被选中了
13、:even 偶数
$(function(){
$('p:even').css('background','blue');
});
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p> //a,c被选中，even是从0开始的
14、:odd 奇数 例子类似上面
15、:eq(index) 匹配一个给定索引值的元素，index从0开始计数
$(function(){
$('p:eq(1)').css('background','blue');
});
<p>a</p>
<p>b</p> //b被选择了
<p>c</p>
<p>d</p>
16、:gt(index) 匹配所有大于给定索引值的元素
$(function(){
$('p:gt(1)').css('background','blue');
});
<p>a</p>
<p>b</p>
<p>c</p> //c被选择了
<p>d</p> //d被选择了
17、:lt(index) 匹配所有小于给定索引值的元素
$(function(){
$('p:gt(1)').css('background','blue');
});
<p>a</p> //a被选择了
<p>b</p>
<p>c</p>
<p>d</p>
18、:header 匹配h家族的标题元素
$(function(){
$(':header').css('background','blue');
});
<p>a</p>
<p>b</p>
<h1>TTT</h1> //被选中
<p>c</p>
<p>d</p>
19、animated 匹配所有正在执行动画效果的元素（以后讲）
20、focus 触发每一个匹配元素的focus事件（以后讲）
21、:contains(text) 匹配包含给定文本的元素
$(function(){
$('p:contains(aa)').css('background','blue');
});
<p>aacc</p> //被选中
<p>b</p>
<p>c</p>
<p>daat</p> //被选中
22、:empty 匹配所有不包含子元素或者文本的空元素
$(function(){
$('p:empty').html('jquery');
});
<p>aacc</p>
<p></p> //被选中，输出jquery
<p><b></b></p>
<p></p> //被选中，输出jquery
23、:has(selector) 匹配含有选择器所匹配的元素的元素
$(function(){
$('p:has(b)').html('jquery');
});
<p>aacc</p>
<p></p>
<p><b></b></p> //输出jquery，b标签被替换没了
<p></p>
24、:parent 匹配所有有子元素或者文本的元素
$(function(){
$('p:parent').css('background','blue');
});
<p>aacc</p> //被选中
<p></p>
<p><b></b></p> //被选中
<p></p>
25、:hidden 匹配所有不可见元素，或者type为Hidden的元素
$(function(){
$('p:hidden').css('background','blue');
$('input:hidden').css('background','blue');
});
<p style="display:none">aa</p> //被选中
<p>bb</p>
<p><b>cc</b></p>
<input type="hidden" /> //被选中
26、:visible 匹配所有的可见元素
$(function(){
$('p:visible').css('background','blue');
$('input:visible').css('background','blue');
});
<p style="display:none">aa</p>
<p>bb</p> //被选中
<p><b>cc</b></p> //被选中
<input type="hidden" />
<input type="text" /> //被选中
27、[attribute] 匹配包含给定属性的元素
$(function(){
$('p[style]').css({'display':'block','background':'blue'});
});
<p style="display:none">aa</p>
<p>bb</p>
<p><b>cc</b></p>
28、[attribute=value] 匹配给定的属性是某个特定值的元素
$(function(){
$('input[name=one]').attr('checked','true');
});
<form>
<input type="checkbox" name='one' />A //被选中
<input type="checkbox" name='one' />B //被选中
<input type="checkbox" name='two' />C
</form>
29、[attribute!=value] 匹配所有不含指定的属性，或者属性不等于待定值的元素
$(function(){
$('input[name!=one]').attr('checked','true');
});
<form>
<input type="checkbox" name='one' />A
<input type="checkbox" name='one' />B
<input type="checkbox" name='two' />C //被选中
</form>
30、[attribute^=value] 匹配给定的属性是以某些值开始的元素
$(function(){
$('input[name^=o]').attr('checked','true');
});
<form>
<input type="checkbox" name='one' />A //被选中
<input type="checkbox" name='one' />B //被选中
<input type="checkbox" name='two' />C
</form>
31、[attribute$=value] 匹配给定的属性是以某些值结尾的元素
$(function(){
$('input[name$=o]').attr('checked','true');
});
<form>
<input type="checkbox" name='one' />A
<input type="checkbox" name='one' />B
<input type="checkbox" name='two' />C //被选中
</form>
32、[attribute*=value] 匹配给定的属性是以包含某些值的元素
$(function(){
$('input[name*=o]').attr('checked','true');
});
<form>
<input type="checkbox" name='one' />A //被选中
<input type="checkbox" name='one' />B //被选中
<input type="checkbox" name='two' />C //被选中
</form>
33、[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件
$(function(){
$('input[id][name^=o]').attr('checked','true');
});
<form>
<input id='boss' type="checkbox" name='one' />A //被选中
<input type="checkbox" name='one' />B
<input type="checkbox" name='two' />C
</form>
34、:nth-child 匹配其父元素下的第N个子或奇偶元素：':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)
$(function(){
$('ul li:nth-child(2)').css('background','blue');
});
<ul>
<li>A</li>
<li>B</li> //被选中
<li>C</li>
</ul>
<ul>
<li>D</li>
<li>E</li> //被选中
<li>F</li>
</ul>
35、:first-child 匹配第一个子元素：':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
$(function(){
$('ul li:first-child').css('background','blue');
});
<ul>
<li>A</li> //被选中
<li>B</li>
<li>C</li>
</ul>
<ul>
<li>D</li> //被选中
<li>E</li>
<li>F</li>
</ul>
36、:last-child 匹配最后一个子元素：':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
$(function(){
$('ul li:last-child').css('background','blue');
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li> //被选中
</ul>
<ul>
<li>D</li>
<li>E</li>
<li>F</li> //被选中
</ul>
37、only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
$(function(){
$('ul li:only-child').css('background','blue');
});
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul>
<li>D</li> //被选中
</ul>
38、:input 匹配所有 input,textarea,select 和button 元素
$(function(){
$(':input').css('background','blue');
});
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
39、:text 匹配所有的单行文本框
上面的例子中，$(':text').css('background','blue');就只有type="text"会被选中
40、:password 匹配所有 密码框
上面的例子中，$(':password').css('background','blue');就只有type="password"会被选中
41、:radio 匹配所有单选按钮
上面的例子中，$(':radio').css('background','blue');就只有type="radio"会被选中
42、:checkbox 匹配所有复选框
上面的例子中，$(':checkbox').css('background','blue');就只有type="checkbox"会被选中
43、:submit 匹配所有提交按钮
上面的例子中，$(':submit').css('background','blue');就只有type="submit"会被选中
44、:image 匹配所有图像域
上面的例子中，$(':image').css('background','blue');就只有type="image"会被选中
45、:reset 匹配所有重置按钮
上面的例子中，$(':reset').css('background','blue');就只有type="reset"会被选中
46、:button 匹配所有按钮
上面的例子中，$(':button').css('background','blue');就只有type="button"会被选中
47、:file 匹配所有文件域
上面的例子中，$(':file').css('background','blue');就只有type="file"会被选中
48、:enabled 匹配所有可用元素
$(function(){
$(':enabled').css('background','blue');
});
<form>
<input name="one" disabled="disabled" value="11" />
<input name="id" /> //被选中
</form>
49、:disabled 匹配所有不可用元素
上例子中，换成$(':disabled').css('background','blue');就是第一个Input被选中了
50、:checked 匹配所有选中的被选中元素（复选框、单行框等，不包括select中的option）
$(function(){
$('input:checked').css('background','blue');
});
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" /> //被选中
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> //被选中
</form>
51、:selected 匹配所有选中的option元素
$(function(){
$('select option:selected').css('background','blue');
});
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option> //被选中
<option value="3">Trees</option>
</select>