AI正在生成摘要
文章介绍了Jquery中的关系查找方法，包括parent()、prev()、next()、children()，用于定位元素并动态添加属性。文章以Z-Blog代码优化插件为例，说明了关系查找在实际操作中的优势与缺点，并提供了相关代码示例。
疫情让一个玩乐器的开始写代码也是很神奇。
记录一下一些JQ的定位操作，免得用到的时候还要百度。
我们有时候需要查找页面中的某个元素动态添加某些属性，比如Z-Blog代码优化+复制增强版这个插件，点击不同的按钮需要定位不同的元素。
当然可以通过$("#id")的方式去定位，但是就比如Z-Blog，插入代码的元素并没有ID，所以用关系查找的方式定位元素就很有用了。
关系查找缺点 :
操作繁琐，容易被误判
使用到的Jquery方法 :
parent() 查找父级元素
prev() 查找上一个同辈元素
next() 查找下一个同辈元素
children() 查找子类元素
栗子：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ关系查找</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>aaaaaaaaaaa</h1>
<p>ppppppppppp</p>
<h1>aaaaaaaaaaa</h1>
<p>ppppppppppp</p>
</div>
<div> parent().prev() </div>
<div>
<button id="parentprev">parent().prev()</button>
<button id="parentnext">parent().next()</button>
<button id="children">children</button>
</div>
<div> parent().next() </div>
<script>
$("#parentprev").click(function(){
$(this).parent().prev().css("color","red");
});
$("#parentnext").click(function(){
$(this).parent().next().css("color","red");
});
$("#children").click(function(){
$(this).parent().prev().prev().children("p").css("color","red");
});
</script>
</body>
</html>
