jQuery的层级选择器
<!DOCTYPE html>
<html >
<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 >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>
- 上一篇 »css选择器
- 下一篇 »【转】Selenium专题—JQuery选择器