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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM