标签：
1、什么是jQuery选择器
jQuery选择器类似于CSS选择（定位元素，施加样式），能够实现定位元素，施加行为。
使用jQuery选择器能够将内容与行为分离
2、选择器的种类
jQuery选择器包括如下种类：
基本选择器
层次选择器
过滤选择器
表单选择器
3、#id
特点：最快，尽量使用id选择器
<body>
<div id="d1">hello jQuery</div>
</body>
function f(){
$(‘#d1‘).css(‘font-size‘,‘30px‘);
}
4、.class
特点：根据class属性定位元素
<body>
<div class="s1">hello</div>
<div class="s1">jQuery</div>
</body>
funtion f(){
$(‘.s1‘).css(‘font-size‘,‘30px‘);
}
5、element
标记选择器或元素选择器，依据HTML标记来区分
<body>
<div id="d1">hello</div>
<div class="s1">jQuery</div>
</body>
function f(){
$(‘div‘).css(‘font-size‘,‘30px‘);
}
6、selector1,selector2,...selectorN
合并选择器，即所有选择器的合集
<body>
<div id="d1">hello</div>
<div class="s1">jQuery</div>
<p>空白格</p>
</body>
function f(){
$(‘#d1,.s1,p).css(‘font-size‘,‘30px‘);
}
7、*
所有页面元素，很少使用
<body>
<div id="d1">hello</div>
<div class="s1">jQuery</div>
<p>空白格</p>
</body>
function f(){
$(‘*‘).css(‘font-size‘,‘30px‘);
}
8、select1空格select2
根据select1找到节点后，再去寻找子节点中符合select2的节点（重要）
<div id="d1"> <div id="d2">hello</div> <div class="s1">jQuery</div> <p>空白格</p> </div> function f(){ $(‘#d1 div‘).css(‘font-size‘,‘30px‘); }
9、select1>select2
只查找直接子节点，不查找间接子节点。
<div id="d1"> <div>hello</div> <p>jQuery<p> <div><p>空白格</p></div> </div> function f(){ $(‘#d1>div‘).css(‘font-size‘,‘30px‘); }
10、select1+select2
"+" 表示下一个兄弟节点
<div id="d1"> <div id="d2">hello</div> <div id="d3">jQuery</div> <div><p id="d4">空白格</p></div> </div> function f(){ $(‘#d2+div‘).css(‘font-size‘,‘30px‘); }
11、select1~select2
"~"代表下面的所有兄弟节点
<div id="d1"> <div id="d2">hello</div> <div id="d3">jQuery</div> <div><p id="d4">空白格</p></div> </div> function f(){ $(‘#d2~div‘).css(‘font-size‘,‘30px‘); }
12、基本过滤选择器
过滤选择器以":"或"[]"开始
first 第一个元素
last 最后一个元素
not(selector) 把selector排除在外
even 挑选偶数行
odd 挑选奇数行
eq(index) 下标等于index的元素
gt(index) 下标大于index的元素
lt(index) 下标小于index的元素
13、基本过滤选择器
<table>
<thead>
<tr><td>歌手</td><td>年龄</td></tr>
</thead>
<tbody>
<tr><td>邓小琪</td><td>22</td></tr>
<tr id="tr1"><td>梦叔</td><td>31</td></tr>
<tr><td>王小二</td><td>26</td></tr>
<tr><td>雨神</td><td>26</td></tr>
</tbody>
</table>
function f(){
$(‘table tr:first‘).css(‘background-color‘,‘#ccc‘);
}
function f(){ $(‘table tr:first‘).css(‘background-color‘,‘#ccc‘); $(‘tbody tr:eq(2)‘).css(‘background-color‘,‘#ccc‘); $(‘tbody tr:even‘).css(‘background-color‘,‘#ccc‘); $(‘tbody tr:odd‘).css(‘background-color‘,‘#red‘); $(‘tbody tr:eq(1) td:eq(1)‘).css(‘background-color‘,‘#blue‘); $(‘tbody tr:not(#tr1)‘).css(‘background-color‘,‘#ccc‘); }
14、内容过滤选择器包含：
contains(text) 匹配包含给定文本的元素
empty 匹配所有不包含子元素或文本的空元素
has(selector)匹配含有选择器所匹配的元素
parent 匹配含有子元素或者文本的元素
15、可见性过滤选择器包含：
hidden 匹配所有不可见的元素，或type为hidden的元素。
visible 匹配所有的可见元素
<div>hello jQuery</div> <div style="display:none;">hello Ajax</div> function f(){ $(‘div:hidden‘).css(‘display‘,‘block‘); $(‘div:hidden‘).show(normal); $(‘div:visible‘).hide(800); }
16、属性过滤选择器包含如下：
[attribute] 匹配具有attribute属性的元素
[attribute=value] 匹配属性等于value的元素
[attribute!=value]匹配属性不等于value的元素。
17、子元素过滤选择器包括
nth-chid(index/even/old)将为每一个父元素匹配子元素，index是从1开始的整数，表示对应位置的子元素
eq(index)匹配一个给定索引值的元素，index是从0开始的整数
18、表单对象属性过滤选择器包括：
enabled
disabled
checked
selected
19、表单选择器包括：
input
text
password
radio
checkbox
submit
image
reset
button
file
hidden
标签：
原文地址：http://www.cnblogs.com/Crow00/p/4589745.html
