JQuery 层级选择器(next(),preAll(),siblings(),parent())

$('#d1 div') //取所有子元素，不管是几层。

$('#d1>div') //取直接子元素，一层
$('#d1+div') //之后紧邻的一个同级元素
$('#d1~div') //之后的所有同级元素

$('#d1').next() //后面的一个同级元素
$('#d1').nextAll() //后面的所有同级元素
$('#d1').prev() //前面的一个同级元素
$('#d1').prevAll() //前面的所有同级元素
$('#d1').siblings() //前面和后面的所有同级元素
$('#d1').parent() //直接父元素
$('#d1').parents('tr') //所有的祖先元素中的<tr>标签对象。
$('#d1').children() //所有直接子元素
$('#d1').find(':button') //所有子元素中的button标签对象。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//鼠标移上
$(this).css('background-color', 'red')
.prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链
.css('background-color', 'yellow')
.end()//恢复最近的一次链的破坏之前的JQuery对象
.nextAll()
.css('background-color', 'blue')
;
}, function () {//鼠标移开
$(this).css('background-color', 'white')
.siblings().css('background-color', 'white');//获取左右的兄弟节点
});
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「houyanhua1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/houyanhua1/java/article/details/78826801