版权声明：菜鸟的个人见解，请指导 https://blog.csdn.net/HUSHILIN001/article/details/81396540
介绍不多，建议w3c，
parent：返回操作元素的父辈；
children：返回元素的儿子辈；
find：返回元素的后代；
sibling：返回元素的兄弟；
至于其他的，比如next等，就不多介绍了，直接代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div_1" style="width: 400px;height: 400px;background-color: #000;">
<div class="div_1_1" id="operation" style="width:200px;height:200px;background-color:red">
<span style="color: yellow;">这个是div_1_1的元素的第一个子元素</span>
<span style="color:green;">这个是div_1_1的元素的第2个子元素</span>
</div>
<div class="div_1_2" style="width:200px;height:200px;background-color:blue"></div>
</div>
<button class="parent">parent</button>
<button class="children">children</button>
<button class="children_first">children_first</button>
<button class="sibling">sibling</button> <button class="find">find</button>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
//点下parent按钮,改变operation的parent的背景色
$("body").on("click", ".parent", function() {
$("#operation").parent().css("background-color", "#333");
});
//点下children按钮，改变operation的所有孩子的颜色
$("body").on("click", ".children", function() {
$("#operation").children().css("color", "#000");
});
//点下sibling按钮，改变operation的所有兄弟的颜色
$("body").on("click", ".sibling", function() {
$("#operation").siblings().css("background-color", "#000");
});
//点下children_first按钮，改变operation的第一个名字为span的子元素的颜色
$("body").on("click", ".children_first", function() {
$("#operation").children("span:nth-child(1)").css("color", "#000");
});
//点下find按钮，改变operation的后代中第一个名字为span的子元素的颜色
$("body").on("click", ".find", function() {
$("#operation").find("span:nth-child(1)").css("color", "#000");
});
//find返回的是所有的后代，而children返回的是儿子辈，即find对应的是parents，children对应的是parent
</script>
</html>所用的jq版本：1.11