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

jQuery层级选择器

2017-10-24 20:36 302 查看

<body>
<ul id="ul_1">
<li>
<div>title_1</div>
<ul>
<li>li_1_1</li>
<li>li_1_2</li>
</ul>
</li>
<li>
<div>title_2</div>
<ul>
<li>li_2_1</li>
<li>li_2_2</li>
</ul>
</li>
</ul>
<div>
<div>div1</div>
<div>div2</div>
<div class="div">div3</div>
<div>div4</div>
<div>div5</div>
<p>p1</p>
<span>span1</span>
</div>
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function(){
// 后代选择器 子辈和孙子辈
$('#ul_1 li').css('border','1px solid red');

// > 子代选择器 只包括子代标签 孙子辈不包括
$('#ul_1>li').css('border','1px solid blue');

// + 同一级的兄弟节点(要相邻的)
$('.div+div').css('color','blue');

// ~ 后面的同级兄弟节点
$('.div~div').css('border','1px solid lightblue');
})();
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航