<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li class="main">我是li4</li>
<li>我是li5</li>
<li>我是li6</li>
<li>我是li7</li>
<li>我是li8</li>
<li>我是li9</li>
<li>我是li10</li>
<p>1111</p>
</ul>
<!-- 1.需要引入外部的jQuery文件 -->
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$("ul").children("li").css("background-color","red");//相当于 $("ul>li") 子代选择器
$("ul").find("li").css("background-color","orange");//相当于 $("ul li") 后代选择器
$(".main").siblings("li").css("background-color", "pink");
$(".main").parent().css("background-color", "skyblue");
$("li").eq(2).css("background-color", "yellowgreen");
$(".main").next().css("background-color", "yellow");
$(".main").nextAll("li").css("background-color", "green");
//prev() prevAll()
$("").css().siblings().css().parent().siblings().children().css()
document.getElementsByTagName("ul")[0].getElementsByTagName("li")
})
</script>
</body>
</html>
上述运行结果: