-------------------------------------------------------------------
源文地址: 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節點操作,還有哪些具有代表性的相關的操作呢?歡迎留言補充哦..
