一. 后代选择器和find方法
jquery对象.find(选择器)：是jquery对象的方法，表示找到这个标签下的所有的指定的选择器的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
var $allLi1 = $(".box li");
console.log($allLi1);
//找到 class是box的元素下面的所有的li标签元素
var $allLi2 = $(".box").find("li"); // 效果等同于前面的后代选择器。
console.log($allLi2);
})
</script>
</head>
<body>
<div class="box">
<ul>
<li>第一个li的内容</li>
<li>第二个li的内容</li>
<li>第三个li的内容</li>
</ul>
</div>
</body>
</html>
二. 子元素选择器和children方法
<script type="text/javascript">
$(function () {
var $divs = $(".box>div"); //子元素选择器
console.log($divs);
// 找到.box 元素下的所有直接子元素。只找儿子不找孙子。 和子元素选择器后果一样。
// children方法也可以带参数，代表表示这个选择器选中的子标签
var $children = $(".box").children();
console.log($children);
var $cc = $(".box").children(".item1");
console.log($cc);
})
</script>
三. next选择器( + )和next方法
<script type="text/javascript">
$(function () {
//next选择器其实就是下一个兄弟选择器.
//找到.box .item2 后的 是 .item3的紧挨着的下一个兄弟
var $nextDiv1 = $(".box .item2 + .item3");
console.log($nextDiv1);
//同next选择器. 可以跟参数，也可以不跟参数。有参数 表示下一个兄弟必须满足这个条件,否则就拉到
//不跟参数表示如果有下一个兄弟就返回，没有拉到
var $nextDiv2 = $(".box .item2").next(".item3");
console.log($nextDiv2);
})
</script>
四. nextAll选择器( ~ )和nextAll方法
<script type="text/javascript">
$(function () {
//获取.item2的所有的后面同辈div标签 注意：不包括.item这个标签
var $divs = $(".item2~div");
console.log($divs);
//也可以使用nextAll方法，效果同上。 可以不跟参数，表示后面的所有同辈元素
var $divss = $(".item2").nextAll("div");
console.log($divss);
})
</script>
五. prev方法和prevAll方法
<script type="text/javascript">
$(function () {
//找到紧挨着这个的上一个同辈div元素。 如果不是div则拉到。
//也可以不给参数，表示返回上一个同辈元素
var $prev = $(".item2").prev("div");
console.log($prev);
//获取.item5的所有的前面的同辈div元素。
var $prevAll = $(".item5").prevAll("div");
console.log($prevAll);
})
</script>
六. sibling方法
<script type="text/javascript">
$(function () {
//sibling获取的是所有同辈标签
var $sibling = $(".item2").siblings();
console.log($sibling);
})
</script>