jQuery-jQuery对象的查找

最新推荐文章于 2024-10-04 15:15:00 发布

LRight-T

最新推荐文章于 2024-10-04 15:15:00 发布

阅读量449

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44604924/article/details/108311701

版权

本文介绍jQuery中用于元素查找的方法，包括children(), find(), parent(), prevAll()和siblings()。通过实例展示了如何使用这些方法来定位DOM树中的特定元素，如查找子元素、后代元素、父元素、前所有兄弟元素及所有兄弟元素。

摘要由CSDN通过智能技术生成

children():查找子元素
find():查找后代元素
parent():查找父元素
prevAll():查找某元素前面的所有元素
siblings():查找所有兄弟元素
用法示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>查找方法</title>
		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				//ul标签的第二个span子标签
//				$("ul").children("span").eq(1).css("background-color","red");
				//ul标签的第二个span的后代标签 find()查找后代元素
//				$("ul").find("span:eq(1)").css("background-color","red");
				//ul标签的父标签
//				$("ul").parent().css("background-color","red");
				//id为cc的li标签的前面的所有li标签 prevAll
//				$("#cc").prevAll("li").css("background-color","red");
				//id为cc的li标签的所有 兄弟li标签 siblings
				$("#cc").siblings("li").css("background-color","red");
			});
		</script>
	</head>
	<body>
		<div id="div1" class="box" title="one">div1(class='box')</div>
		<div id="div2" class="box">div2(class='box')</div>
		<div id="div3">div3</div>
		<span class="box">span(class="box")</span>
		<br />
		<div>
		<ul>
			<span>span文本1</span>
			<li>AAAAA</li>
			<li title="hello" class="box2">BBBBB</li>
			<li class="box" id="cc">CCCCC</li>
			<li title="hello">DDDDD</li>
			<li title="two"><span>span文本2</span></li>
			<span>span文本3</span>
		</ul>
		<span>span文本4</span><br />
		<li>eeeee</li>
		<li>EEEEE</li>	
		</div>
		
	</body>
</html>