<!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>
/ * Base selector
001-id selector #id
002-class selector .class
003 tag selector label name
004 and set the selector # id, .class
005 * * wildcard selector /
$("div").css("background", "red");
$("#demoID,.box1").css("background", "red");
$("*").css("background", "red");
// document.querySelectorAll(#id,.class)
/ * Level Selector * /
/ * 001 gets the specified label specified descendant elements * /
$("#demoID div").css("background", "red");
/ * 002 gets the specified tag specifies a direct descendant elements * /
$("#demoID>div").css("background", "red");
/ * Get the first 003 sibling behind the specified label * /
$(".box2 +div").css("background", "red");
/ * Get all the nodes box2 to the div * /
$(".box2 ~ div").css("background", "red")
// selector election race
// :first
// :last
// :eq()
// :not()
// :lt()
// :gt()
// :even
// :odd
// First
$("li:first").css("background", "#195");
// the last one
$("li:last").css("background", "blue");
// Specify one
// First
$("le:eq(0").css("background", "blue");
// the last one
$("li:eq(-1)").css("background", "#220");
// parity index
$("li:odd").css("background", "#100"); //奇数
$("li:even").css("background", "#100"); //偶数
// 005 exclusion
// exclude the index for that label 1
$("li:not(:eq(1))").css("background", "#154");
// exclude the last tab
$("li:not(:eq(1))").css("background", "#445");
/ * 006- range (greater than | less than) * /
$("li:lt(3)").css("background", "#546"); //小于
$("li:gt(3)").css("background", "#dsf"); //大于
// parent-child selector
// jQ.parent () to get the parent node
// jQ.parents () Gets ancestor node
// jQ.parentsUntil () Gets ancestor node until a node up
$(".box2").parent().css("background", "red");
// Get all the ancestor nodes first, and then apply the discount ancestor node id selector selector label is demoID
$(".box2").parents("#demoID").css("background", "red");
$(".box2").parentsUntil("html").css("background", "red");
// child node associated methods
$("demoID").children.css("background", "red");
// Get sibling
$(".box").next().css("background", "red");
$(".box").nextAll().css("background", "red");
$(".box2").prev().css("background", "red");
$(".box2").prevAll().css("background", "red");
All siblings after // nextAll
// prevAll () to get the current match element in front of each element in the collection fellow element, using the selector filter is optional.
// siblings (): All the brothers (except their own)
$(".box2").siblings().css("background", "red");
</script>
</body>
</html>