jQuery基础04

HTML部分

        <div id="div1">
			这是div1
			<div id="div2">
				这是div2
			</div>
			<div id="div3" class="a">
			div3
			</div>
			<div id="div4">
				这是4
				<div id="div5">
					这是5
				</div>
				<div id="div6">
					这是6
					<div id="div7">
						这是7
					</div>
				</div>
			</div>
		</div>
		<ul>
			<li id="li1">1</li>
			<li id="li2" class="abc">2</li>
			<li id="li3">3</li>
			<li id="li4" class="abc">4</li>
			<li id="li5">5</li>
			<li id="li6">6</li>
			<li id="li7" class="abc">7</li>
			<li id="li8" class="abc">8</li>
			<li id="li9">9</li>
			<li id="10">10</li>
		</ul>

CSS部分

        <style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				border: 2px solid red;
				font-size:40px;
				padding: 20px;
				background-color: white;
			}
		</style>

JQ通过节点之间的关系查找节点

1. 查找某个节点的父节点parent(选择器), 其参数可以对找到的父元素做过滤

$("div").parent("div").css("background","red");

2.查找某节点的所有祖先节点parents(选择器),可以找到的祖先元素做过滤

$("#div7").parents("div").css("background",red);

3. 查找某个节点的所有祖先节点停止, 不包含指定的节点

parentsUntil(指定找到的位置选择器，选择器),第二个参数可以对找到的祖先元素做过滤

$("#div7").parentsUntil("body").css("background","red");

4. 查找某个节点所有的子节点children(选择器)参数对找到的子元素做过滤

$("body").children(".a").css("background-color","#0000FF");

5. 找到某个节点的所有后代节点find("*"),还可以写其他的选择器在对应节点内部查找元素

$("#div1").find("*").css("background","gold");

6. 查找节点上一个相邻兄弟prev()

$("div").prev().css("background","red");

7. 查找节点下一个兄弟节点next()

$("div").next().css("background","red");

8.查找节点上面所有兄弟节点 prevAll()

$("#div4"). prevAll().css("background","red");

9.查找节点下面所有兄弟节点 nextAll()

$("#div2"). prevAll().css("background","yellow");

10.查找节点上面的所有兄弟节点直到某个节点停止，不会找到指定的节点，第二个参数可以继续为找到的节点过滤prevUntil（“找到的节点选择器”,"过滤选择器"）

$("#li10").prevUntil("#li2",".abc").css("background","yellow");

11.查找节点下面的所有兄弟节点直到某个节点停止，不会找到指定的节点，第二个参数可以继续为找到的节点过滤nextUntil（“找到的节点选择器”,"过滤选择器"）

$("#li10"). nextUntil("#li2",".abc").css("background","yellow");

12. 找到节点所有的兄弟节点

$("#li5").siblings().css("background","red")