jQuery DOM节点操作 - 父节点子节点兄弟节点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery DOM节点操作 - 父节点子节点兄弟节点相关的知识，希望对你有一定的参考价值。
-------------------------------------------------------------------
源文地址: http://www.cnblogs.com/yunlei0821/p/7577400.html ，转载请务必保留此出处.
子(/孙)节点:
.children([selector]). 获得匹配元素集合中每个元素的所有直接子元素（选择器可选）。
实例:
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p id="p1">欢迎来到臻和信息</p>
<p id="p2">欢迎来到臻和信息</p>
</div>
操作: $("div").children();
结果: 得到<a></a>和<p></p>总共3个节点.
操作: $("div").children("#p1");
结果: 得到<p id="p1"></p>节点.
.find(selector). 获得当前匹配元素集合中每个元素的后代（选择器必须）。
实例:
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p id="p1">欢迎来到<span>臻和信息</span></p>
<p id="p2">欢迎来到臻和信息</p>
</div>
操作: $("div"). find ("span");
结果: 得到2个<span></span>节点.
兄弟节点:
.siblings([selector]). 获得匹配元素集合中所有元素的同辈元素（选择器可选）。
实例:
<div>
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p>欢迎来到<span>臻和信息</span></p>
<span id="sp1">臻和信息</span>
</div>
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p>欢迎来到<span>臻和信息</span></p>
</div>
</div>
操作: $("a").siblings();
结果: 得到<p></p>,<span id="sp1"></span>共3个节点.
操作: $("a").siblings("p");
结果: 得到2个<p></p>节点.
.prev([selector]). 获得匹配元素集合中每个元素紧邻的前一个同辈元素（选择器可选）。
.next([selector]). 获得匹配元素集合中每个元素紧邻的后一个同辈元素（选择器可选）。
实例:
<div>
<span id="sp1">zhenheinfo</span>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p id="p1">欢迎来到<span>臻和信息</span></p>
<p id="p2">欢迎来到臻和信息</p>
<span id="sp2">臻和信息</span>
</div>
操作: $("#p1").prev(); 结果: 得到<a></a>节点.
操作: $("#p1").next(); 结果: 得到<p id="p2"></p>节点.
操作: $("#p1"). prev ("span"); 结果: 得到<span id="sp1"></span>节点.
操作: $("#p1"). next ("span"); 结果: 得到<span id="sp2"></span>节点.
.prevAll([selector]). 获得匹配元素集合中每个元素之前的所有同辈元素（选择器可选）。
.nextAll([selector]). 获得匹配元素集合中每个元素的所有同辈元素（选择器可选）。
实例:
<div>
<div>
<lable id="lab-1">中国梦</lable>
<a href="#"><span>welcome to </span><b>zhenheinfo</b></a>
<p>欢迎来到<span>臻和信息</span></p>
<span id="sp1">臻和信息</span>
<lable id="lab-2">中国梦</lable>
</div>
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p>欢迎来到<span>臻和信息</span></p>
<lable id="lab-3">中国梦</lable>
</div>
</div>
操作: $("p").prevAll();
结果: 得到<a></a>,<lable id="lab-1"></label>共3个节点.
操作: $("p"). nextAll ();
结果: 得到<span id="sp1"></span>和<lable id="lab-2"></lable>和<lable id="lab-3"></lable>共3个节点.
操作: $("p"). prevAll ("a");
结果: 得到2个<a></a>节点.
操作: $("p").nextAll("lable");
结果: 得到<lable id="lab-2"></ lable>和<lable id="lab-3"></ lable>节点.
父(/祖先)节点:
.parent([selector]). 获得当前匹配元素集合中每个元素的父元素（选择器可选）。
.parents([selector]). 获得当前匹配元素集合中每个元素的祖先元素（选择器可选）。
实例:
<div>
<div id="d1">
<lable id="lab-1">中国梦</lable>
<a href="#"><span>welcome to </span><b>zhenheinfo</b></a>
<p>欢迎来到<span>臻和信息</span></p>
<span id="sp1">臻和信息</span>
<lable id="lab-2">中国梦</lable>
</div>
<div>
<a href="#"><span>welcome to </span>zhenheinfo</a>
<p>欢迎来到<span>臻和信息</span></p>
<lable id="lab-3">中国梦</lable>
</div>
</div>
操作: $("span").parent();
结果: 得到<div id="d1"></div>和<a></a>和<p></p>共5个节点.
操作: $(" span "). parent("div");
结果: 得到<div id="d1"></div>节点.
操作: $("p"). parents();
结果: 得到<div></div>和<a></a>和<p></p>共7个节点.
操作: $("p"). parents("div");
结果: 得到3个<div></div>节点.
ps:关于DOM节点操作,还有哪些具有代表性的相关的操作呢?欢迎留言补充哦..
以上是关于jQuery DOM节点操作 - 父节点子节点兄弟节点的主要内容，如果未能解决你的问题，请参考以下文章