jQuery选择器（二）

三、层次选择器

层次选择器通过 DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选 择器	ancestor descendant	选取 ancestor 元素里的所有 descendant （后代）元素	$("#menu span" ) 选取 #menu 下的 元素
子选择 器	parent>child	选取 parent 元素下的 child （子） 元素	$("#menu>span" )选取 #menu 的子元素
相邻元 素选择 器	prev+next	选取紧邻 prev 元素之后的 next 元 素	$(" h2+dl " ) 选取紧邻 元素 之后的同辈元素
同辈元 素选择 器	prev~sibings	选取prev元素之后的所有 siblings 元素	$(" h2~dl " ) 选取元素之后 所有的同辈元素

示例：

<div id="menu">
<h2>全部旅游产品分类</h2>
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd><a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草
原</a></dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd><a href="#">名胜</a> <a href="#">暑期</a> <a href="#">乐园
</a></dd>
<dd><a href="#">山水</a> <a href="#">双休</a></dd>
</dl>
<span>更多分类</span>
</div>

1 、后代选择器

后代选择器用来获取元素的后代元素

前提是存前后层次关系 （外层是前辈层，内层是后辈层），每个基本选择器用来描述每一 层对象，用空格分隔

注意：尽量层次关系描述清楚

$("#menu span").css("background-color","#09F")

获取并设置 #menu 下的 <span> 元素的背景颜色

2 、子选择器

子选择器用来获取元素的子元素

$("#menu>span").css("background-color","#09F")

获取并设置 #menu 下的子元素 <span> 的背景颜色

3 、相邻选择器

相邻选择器用来选取紧邻目标元素的下一个元素

$("h2+dl").css("background-color","#09F")

获取并设置紧接在 <h2> 元素后的 <dl> 元素的背景颜色

4 、同辈选择器

同辈选择器用来选取目标元素之后的所有同辈元素

$("h2~dl").css("background-color","#09F")

获取并设置 <h2> 元素之后的所有同辈元素 <dl> 的背景颜色

四、属性选择器

属性选择器通过 HTML 元素的属性来选择元素

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href ='#']" ) 选取 href 属性值为 “#”的元素
[attribute!=value]	选取不等于给定属性是某个特定值的元素	$(" [href !='#']" ) 选取 href 属性值不为“#”的元素

[attribute^=value]	选取给定属性是以某些特 定值开始的元素	$(" [href^='en']" ) 选取 href 属性值以 en 开 头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" ) 选取 href 属性值以 .jpg 结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* ='txt']" ) 选取 href 属性值中含有 txt 的元素
[selector] [selector2] [selectorN]	选取满足多个条件的复合属性的元素	$(" li[id][title= 新闻要点 ] " ) 选取含有 id 属性 和 title 属性为新闻要点的 元素

示例：

<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">银魂</li>
<li class="evens" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
</div>

1 、根据属性名获取元素

属性选择器可以根据是否包含某属性来选取元素

$("h2[title]").css("background-color","#09F")

改变含有 title 属性的 <h2> 元素的背景颜色

2 、根据属性的值来选取元素

$("[class=odds]").css("background-color","#09F")

改变 class 属性的值为 odds 的元素的背景颜色

注意：属性选择器也支持属性值的模糊匹配

模糊匹配

1.class 前缀为 hint 的所有 div 的 jquery 对象

$("div[class^='hint']");

2.class 后缀为 hint 的所有 div 的 jquery 对象

$("div[class$='hint']");

class 中包含 hint 的所有 div 的 jquery 对象 $("div[class*='hint']");`

[ 属性名称 ] 匹配包含给定属性的元素

[att=value] 匹配包含给定属性的元素 ( 大小写区分 )

[att*=value] 模糊匹配包含有 value 的原色

[att!=value] 不能是这个值

[att^=value] 以 value 开头的所有元素

[att$=value] 以 value 结尾的所有元素

[att1][att2][att3]… 同时匹配多个属性条件

3 、多属性条件选择

属性选择器支持多属性条件复合查找元素

$("li[class][title*=y]").css("background-color","#09F")

改变包含 class 属性，且 title 属性的值中含有 y 的 <li> 元素的背景颜色

五、基本过滤选择器

过滤选择器通过特定的过滤规则来筛选元素

语法特点是使用 “:” ，如使用 $(“li:first”) 来选取第一个 li 元素

主要分类如下：

基本过滤选择器

可见性过滤选择器

表单对象过滤选择器（后面介绍）

内容过滤选择器、子元素过滤选择器 …… （可参见开发接口文档）

基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素

语法构 成	描述	示例
:first	选取第一个元素	$(" li:first" ) 选取所有 <li> 元素中的第一个 <li> 元素
:last	选取最后一个元素	$(" li:last" ) 选取所有 <li> 元素中的最后一个 <li> 元素
:even	选取索引是偶数的所有元素（ index 从0开始）	$(" li:even" ) 选取索引是偶数的所有 <li> 元素
:odd	选取索引是奇数的所有元素（ index 从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素

案例：

<ul>
<li>王妃不好当</li>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>

1 、选取第一个元素

$("li:first")

2、选取最后一个元素

$("li:last")

3 、选取索引为偶数的元素

$("li:even")

4 、选取索引为奇数的元素

$("li:odd")

基本过滤选择器可以根据索引的值选取元素

语法构成	描述	示例
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" ) 选取 class 不是 three的元素
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素

8 、根据选择器反向选择元素

$("li:not(.three)")

$(".test:not(ul)").css("background-color","pink");
//注意：前后两部分选择器依然可以是其它选择器

9 、选取所有标题元素

$(":header")

10 、选取获得焦点的元素

<input type="text" name="userName" value="用户名" />
<input type="text" name="age" value="20" />

$(":focus")

//获得焦点的变换背景
$(document).ready(function(){
$("input").focus(function(){
$("input:focus").css("background-color","red");
});
});

jQuery选择器内容比较多，将分为三篇博客来讲述，这是第二篇

感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！