<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../server/jquery-3.4.1.js"></script>
</head>
<body>
<div id="demoID">div1</div>
<div class="box1">div2</div>
<div class="box1">div3</div>
<div>div4</div>
<span>A</span>
<span>B</span>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<script>
/* 基本選擇器
001-id選擇器 #id
002-class選擇器 .class
003-標簽選擇器 標簽名
004-並集選擇器 #id，.class
005-通配符選擇器 * */
$("div").css("background", "red");
$("#demoID,.box1").css("background", "red");
$("*").css("background", "red");
// document.querySelectorAll(#id,.class)
/* 層級選擇器 */
/* 001-獲取指定標簽指定的后代元素 */
$("#demoID div").css("background", "red");
/* 002-獲取指定標簽指定的直接后代元素 */
$("#demoID>div").css("background", "red");
/* 003-獲取指定標簽后面的第一個兄弟節點 */
$(".box2 +div").css("background", "red");
/* 獲取box2到div的所有節點 */
$(".box2 ~ div").css("background", "red")
// 賽選選擇器
// :first
// :last
// :eq()
// :not()
// :lt()
// :gt()
// :even
// :odd
// 第一個
$("li:first").css("background", "#195");
// 最后一個
$("li:last").css("background", "blue");
// 指定某一個
// 第一個
$("le:eq(0").css("background", "blue");
// 最后一個
$("li:eq(-1)").css("background", "#220");
// 索引為奇偶數
$("li:odd").css("background", "#100"); //奇數
$("li:even").css("background", "#100"); //偶數
// 005-排除
// 排除索引為1的那個標簽
$("li:not(:eq(1))").css("background", "#154");
// 排除最后一個標簽
$("li:not(:eq(1))").css("background", "#445");
/* 006-范圍(大於|小於) */
$("li:lt(3)").css("background", "#546"); //小於
$("li:gt(3)").css("background", "#dsf"); //大於
// 父子選擇器
// jQ.parent() 獲取父節點
// jQ.parents() 獲取祖先節點
// jQ.parentsUntil() 獲取祖先節點直到某個節點為止
$(".box2").parent().css("background", "red");
// 先獲取所有的祖先節點，然后在折現祖先節點中應用選擇器 選擇器id為demoID的標簽
$(".box2").parents("#demoID").css("background", "red");
$(".box2").parentsUntil("html").css("background", "red");
// 子節點相關方法
$("demoID").children.css("background", "red");
//獲取兄弟節點
$(".box").next().css("background", "red");
$(".box").nextAll().css("background", "red");
$(".box2").prev().css("background", "red");
$(".box2").prevAll().css("background", "red");
// nextAll 之后的所有兄弟元素
//prevAll() 獲得當前匹配元素集合中每個元素的前面的同胞元素，使用選擇器進行篩選是可選的。
//siblings()：所有兄弟（除了自己）
$(".box2").siblings().css("background", "red");
</script>
</body>
</html>