您的位置：首页 > Web前端 > JQuery

jQuery学习——层级

2013-12-11 19:42 447 查看
[b]Child Selector (“parent > child”)[/b]

描述: 选择所有指定“parent”元素中指定的"child"的直接子元素。

parent: 任何有效的选择器。

child: 用来筛选子元素的选择器。

作为一个CSS选择器，这个子元素组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持，但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括IE6。

这个子元素组合器(E > F)和(E F)都作为后代组合，但是他们有所不同，更具体的是(E > F)它只会选择第一级的后代。

<script>$("ul.topnav > li").css("border", "3px double red");</script>


[b]Descendant Selector (“ancestor descendant”)[/b]

描述: 选择给定的祖先元素的所有后代元素。

ancestor: 任何有效的选择器。

descendant: 一个用来筛选后代元素的选择器。

一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。

<script>$("form input").css("border", "2px dotted blue");</script>


[b]Next Adjacent Selector (“prev + next”)[/b]

prev: 任何有效的选择器。

next: 用于筛选紧跟在 "prev" 后面的元素的选择器。

其中重要的一点既要考虑下一个相邻兄弟选择器（ 
prev + next
）和一般兄弟选择器（ 
prev ~ siblings
）所选择到的元素，必须在同一个父元素下。

<script>$("label + input").css("color", "blue").val("Labeled!")</script>


[b]Next Siblings Selector (“prev ~ siblings”)[/b]

prev: 任何有效的选择器

siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

(
prev + next
) 和 (
prev ~ siblings
)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

查找所有跟在 id 为 #prev 的元素后面的所有 div。注意，跟在后面的 span 不会被选中，因为它不是 div 。同时 "niece" 也不会被选中，因为它是某个兄弟元素的子元素，而不是兄弟元素。

<!DOCTYPE html>
<html>
<head>
<style>

div,span {
display:block;
width:80px;
height:80px;
margin:5px;
background:#bbffaa;
float:left;
font-size:14px;
}
div#small {
width:60px;
height:25px;
font-size:12px;
background:#fab;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>

<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航