JQ节点的查找与过滤操作
查找和过滤操作都属于“筛选”操作，按照筛选的对象相对于原节点的位置，可分为筛选出长辈、晚辈、自身、兄弟这几种
长辈：parent([选择器])、parents([选择器])、offsetParent() 晚辈：children([选择器])、find(选择器)
自身：first()、last()、not(选择器|obj)、has(选择器|obj)、filter([选择器])、eq(index)
兄弟：next([选择器])、nextAll([选择器])、prev([选择器])、prevAll([选择器])、siblings([选择器])
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style: none;
padding: 20px;
}
.red{
color:red;
}
.blue{
color:blue;
}
li{
margin: 20px;
padding: 5px;
border:red solid 2px;
background-color: burlywood;
font-size: 40px;
}
form{
line-height: 40px;
}
.bg{
background-color: cyan;
font-size: 40px;
}
</style>
<script src = "../js/jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
//$("#li3_2").parent().addClass("bg")//直接获得元素父结点
//$(".bg").parent("#ul3_2").addClass("bg")//获得满足条件的元素父结点
//console.log($("#li3_2_2").parents());//所有祖先元素
//console.log($("#li3_2_2").parents("#myUl")[0].id)//获得满足条件的祖先结点
//console.log($("#boxIn").offsetParent())
// console.log($("#myUl").children())//Children找的是结点的子结点
// console.log($("#myUl").children(".blue"))//Children找的是结点的子结点
//find方法必须添加参数，该方法找的是所有后代
//console.log($("#myUl").find())
//first是找到集合中的第一个元素
//console.log($("#ul3_1").children().first().text("我是不是这个li"))
//last是找到集合中的最后一个元素
//console.log($("#ul3_1").children().last().text("我是不是这个li"))
//not操作,找到所有不是条件的结点
//console.log($("#ul3_1").children().not(".bg").text("我是不是这个li"))
//has操作,找到所有子结点中满足条件的结点集合
//console.log($("ul").has(".bg"))
//filter是在自己中寻找满足条件的结点
//console.log($("ul").filter(".bg"))
//eq是按索引值找到结点，如果是负数则最后一个结点为-1，往前就是-2，以此类推
//console.log($("#ul3_1").children().eq(-1).text("我是eq值为负1"))
//next就是当前结点的下一个兄弟结点
//$("#li3_2").next().text("我是li3_2的next兄弟")
//nextAll是当前结点的后面的所有兄弟结点
//$("#li3_2").nextAll().text("我是li3_2的nextAll兄弟")
//prev就是当前结点的前一个兄弟结点
// $("#li3_2").prev().text("我是li3_2的prev兄弟")
// //prevAll是当前结点的前面的所有兄弟结点
// $("#li3_3").prevAll().text("我是li3_3的prevAll兄弟")
//siblings是当前结点所有兄弟结点
$("#li3_3").siblings().text("我是li3_3的siblings兄弟")
})
</script>
</head>
<body>
<div id = "boxOut" style="margin: 100px; position: relative; width: 500px; height: 400px;">
<div id="boxMid">
<div id="boxIn" style="position: absolute; margin: 100px; top:30px; left:20px">
大家好
</div>
</div>
</div>
<h1>dom节点初识</h1>
<ul id="myUl">
<li class="red" title="Li1">1</li>
<li class="blue" title="Li2">2</li>
<li id = "Li3" class="red">
<ul id="ul3_1">
<li>3.1</li>
<li class="bg" id = "li3_2">3.2</li>
<li id = "li3_3">3.3</li>
<li>3.4</li>
</ul>
<ul id="ul3_2" class="bg">
<li>3.2.1</li>
<li id = "li3_2_2">3.2.2</li>
<li>3.2.3</li>
<li>3.2.4</li>
</ul>
</li>
<li class="blue"><a id = "A1" href="" title="我是链接标题">我是链接</a></li>
</ul>
<form action="">
用户名：<input name="username" type="text"><br>
密码：<input name="pwd" type="password"><br>
爱好：<input name="ins" type="checkbox" value="sing">唱歌,
<input type="checkbox" value="code">编程<br>
<select name="sl" id="">
<option>北京</option>
<option>上海</option>
<option>南京</option>
</select><br>
<button>提交</button>
</form>
</body>
</html>
