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")