更多元素定位方式：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
更多元素选择方式：https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(function(){
// ==================== css选择器获取元素 ========================
// 通过id定位元素
div = $('#div1');
div.css({'color':'red'});
// 通过class定位元素
div2 = $('.box');
div2.css({'color':'green'});
// 通过name定位元素
div_name = $("[name=div4]")
div_name.css("color", "blue")
// 多层级定位元素
li1 = $('.list1 li');
li1.css({'background-color':'pink','color':'blue'});
// 选择元素数组的第2元素。eq的索引从0开始
li1.eq(1).css("font-size", "30px")
// ==================== 获取后代元素 ========================
// children()方法只能获取直接后代，后代只能为子
$('.list2').children("li:first").css("color", "white")
// find()方法可以获取其内的所有后代，后代可以是子、孙、曾孙，依此类推
$('.list2').find("li").css({'backgroundColor':'tomato'})
$('.list2').find(".li4").css("color", "green")
// ==================== 获取先辈元素 ========================
// parent()获取直接先辈，先级只能为父
$("#list2_li").parent().css("font-size", "30px")
// parents()获取其上的所有先辈，先辈可以是父、爷、祖父，依次类推
$("#list2_li").parents("div").css("font-weight", "bold")
// ==================== 获取同辈元素 ========================
// next()获取同级下一个元素
$("#list2_li").next().text("同级下一个元素")
// parents()获取其上的所有先辈，先辈可以是父、爷、祖父，依次类推
$("#list2_li").prev().text("同级上一个元素")
// 遍历元素数组，i为索引值，可缺省
$(".list2").find("li").each(function(i){
// 当处于function中时，$(this)表示当前操作元素
if ($(this).text() == 2){
$(this).text("index：" + i)
}
})
});
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div class="box">这是第二个div元素</div>
<div class="box">这是第三个div元素</div>
<div name="div4">这是第四个div元素</div>
<ul class="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>
<ul class="list2">
<li>1</li>
<li id="list2_li">2</li>
<li class="li4">3</li>
<li class="li4">4</li>
</ul>
</div>
</body>
</html>