<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body{
background-color: #e6fbff;
color: #000;
font-size: 20px;
padding: 0 30px;
}
li{
list-style: none;
}
a{
color: red;
text-decoration: none;
}
.red{
color: red;
}
.pink{
background-color: #20ce7d;
padding: 3px;
color: #fff;
}
.box{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>层次选择器，就是通过元素之间的层次关系来获取元素。层次选择器在实际开发中，也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。</p>
<p>在jQuery，层次选择器共有4种：</p>
<p class="red">$("M N") ------ 后代选择器，选择M元素内部后代N元素（所有N元素）</p>
<p class="red">$("M>N") ------ 子代选择器，选择M元素内部子代N元素（所有第1级N元素）</p>
<p class="red">$("M~N") ------ 兄弟选择器，选择M元素后所有的同级N元素</p>
<p class="red">$("M＋N") ------ 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）</p>
<p>注意以下2点：
（1）$("M+N")可以使用“$(M元素).next()”代替；
（2）$("M~N")可以使用“$(M元素).nextAll()”代替；</p>
</div>
</body>
</html>
JQ-层次选择器
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 键盘事件 键盘按下事件 onkeydown 键盘抬起事件 onkeyup ...
- jQuery框架使用准备 jQuery框架和JavaScript加载模式对比window.onload执行时机: ...
- jquery:库，框架 js，别人封装成的js 官网：http://jquery.com/ 1.7 jq 1...
- 好种子开花： 今天小宝睡都到很晚才醒，让我难得可以静静地坐在沙发上享受一下个人时光，听听舒服的静心音乐。另外无意中...
