<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">
<p>I am p</p>
<div class="son">
<p>Son is my father</p>
</div>
</div>
<div class="brother">爸爸的兄弟</div>
<ul class="family">
<li class="1">brother1</li>
<li class="2">brother2</li>
<li class="3">brother3</li>
<li class="4">brother4</li>
<li class="5">brother5</li>
<li class="theYoungestBrother">brother6</li>
</ul>
</body>
<script src="./jquery-3.7.1.min.js"></script>
<script>
$(()=>{
//1.找父元素
console.log($(".son").parent()) // 0: div.father, length: 1
//2.找子元素
// $(".father").children("p").css("color","red")
//3.find("标签")找所有指定的子元素
console.log($(".father").find("p").css("color","blue"))// 0: p, 1: p, length: 2
//4.找兄弟元素
console.log($(".father").siblings().css("color","red"))// 0: div.brother, 1: script, 2: script, 3: script, length: 4,
//5.找当前元素后的所有同辈份元素
console.log($(".family li").nextAll().css("color","green"))// 0: li.2, 1: li.3, 2: li.4, 3: li.5, 4: li.theYoungestBrother, length: 5
//6.找当前元素前的所有同辈份元素
console.log($(".family .theYoungestBrother").prevAll().css("color","yellow"))// 0: li.5, 1: li.4, 2: li.3, 3: li.2, 4: li.1, length: 5
//7.选择指定索引的兄弟元素
console.log($(".family li").eq(2).css("color","red"))// 0: li.3, length: 1,
//8.检查当前元素是否有某个特定的类，返回的是布尔值
console.log($("ul").hasClass("family")) //true
console.log($("ul").hasClass("father")) //false
})
</script>
</html>
在继承和优先级的规则中，显示效果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
