jQuery Level Selector Instance Code
- 2021-07-16 01:45:42
- OfStack
In this paper, we share the specific code of jQuery hierarchy selector for your reference. The specific contents are as follows
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2> Sub-selector and descendant selector </h2>
<div class="left">
<div class="aaron">
<p>div The lower number 1 A p Element </p>
</div>
<div class="aaron">
<p>div The lower number 1 A p Element </p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div Under article Under p Element </p>
</article>
</div>
<div class="imooc">
<article>
<p>div Under article Under p Element </p>
</article>
</div>
</div>
<script type="text/javascript">
// Sub-selector
//$('div > p') Select all div Child elements inside the element P
$('div > p').css("border", "5px groove red");
</script>
<script type="text/javascript">
// Descendant selector
//$('div p') Select all div Inside the element p Element
$('div p').css("border", "9px groove green");
</script>
<h2> Adjacent sibling selector and 1 General brother selector </h2>
<div class="bottom">
<div> Brother node div, +~ The selector cannot select forward </div>
<span class="prev"> Selector span Element </span>
<div>span Afterwards 1 Sibling nodes div</div>
<div> Brother node div
<div class="small"> Child element div</div>
</div>
<span> Brother node span, Not optional </span>
<div> Brother node div</div>
</div>
<script type="text/javascript">
// Adjacent sibling selector
// Select prev The following number 1 A div Brother node
$(".prev + div").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//1 General adjacency selector
// Select prev All of the back div Brother node
$(".prev ~ div").css("border", "3px groove blue");
</script>
</body>
</html>