jQuery的选择器（包含多条件选择器，相对选择器，层次选择器）

• 一、jQuery选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

•  二、常用的过滤选择器如下

1、:first，选取第一个元素，比如$("div:first")选取第一个div元素

2、:last，选取最后一个元素，比如$("div:last")选取最后一个div元素

3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取类名不是className的所有div元素

4、：even/：odd，选取索引为偶数/奇数的元素，比如$("div:even"),选取索引号为偶数的所有div元素

5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("div:lt(3)"),选取索引号小于3的所有div元素

注意：

过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)  

• 三、多条件选择器 、相对选择器、 层次选择器
• 1. 多条件选择器

或选择器：$("p,div,span,menuitem"),同时选择p标签,div标签,span标签元素,menuitem标签元素
注意选择器表达式中的空格不能多不能少，易错！

与选择器：$(".intro.demo")，所有 class="intro" 且 class="demo" 的元素

• 2.相对选择器

只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下

<table id="table1">
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
</table>

那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素

<script type="text/javascript">
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
</script>

•  3.层次选择器

1 $("#div li")获取div下的所有li元素（后代，子，子的子....）
2 $("#div > li")获取div下的直接li子元素//注意空格
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素，不常用。
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素，不常用。

细节区别在于（易错点）：
多条件选择器：$("p,div,span,menuitem"),

相对选择器：$("td", $(this)).css("background", "red")",

层次选择器：$("#div li")获取div下的所有li元素（后代，子，子的子....）

三者的区别是：

多条件选择器：在一个“”内有逗号区分，

相对选择器：2个元素分开 ，

层次选择器在一个“”内以空格区分 ，没有逗号，没有空格，代表条件同时成立的选择器

 

 

 

 

转载于:https://my.oschina.net/u/3422045/blog/995798