這篇文章主要介紹了JQuery查找DOM節點的方法,實例分析了jQuery選擇器實現DOM元素結點與屬性結點的查找技巧,需要的朋友可以參考下

本文實例講述了JQuery查找DOM節點的方法。分享給大家供大家參考。具體分析如下：

DOM操作是JQuery最常見的用法，下面我們來將JQuery的DOM操作逐個剖析下。先來最簡單的查找節點操作。

為了能全面地講解DOM操作，首先需要構建一個網頁。因為每一張網頁都能用DOM表示出來，而每一份DOM都可以看作一棵DOM樹。HTML代碼如下：

1. <p class="nm_p" title="歡迎訪問武林網" >歡迎訪問武林網</p> 
2. <ul class="nm_ul"> 
3. <li title='PHP編程'>簡單易懂的PHP編程</li> 
4. <li title='JavaScript編程'>簡單易懂的JavaScript編程</li> 
5. <li title='JQuery編程'>簡單易懂的JQuery編程</li> 
6. </ul> 

順便說下，類命名的nm是nowamagic的簡寫～

使用JQuery在文檔樹上查找節點非常容易，可以通過JQuery選擇器來完成。

查找元素節點

獲取元素節點并打印出它的文本內容，JQuery代碼如下：

1. var $li = $(".nm_ul li:eq(1)"); // 獲取第二個<li>元素節點 
2. var li_txt = $li.text(); // 輸出第二個<li>元素節點的text 

以上代碼獲取了

元素里第2個
• 節點，并將它的文本內容“簡單易懂的JavaScript魔法”打印出來。

   

  查找屬性節點

  利用JQuery選擇器查找到需要的元素之后，就可以使用attr()方法來獲取它的各種屬性的值。attr()方法的參數可以是一個，也可以是兩個。當參數是一個時，則是要查詢的屬性的名字，例如：

  獲取屬性節點并打印出它的文本內容，JQuery代碼如下：

   

   

  1. var $para = $(".nm_p"); // 獲取<p>節點 
  2. var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title 

  以上代碼獲取了class為nm_p的

  節點，并將它的title屬性的值“歡迎訪問簡明現代魔法圖書館”打印出來。

  本例完整JQuery代碼如下：

   

   

  1. <script type="text/javascript"> 
  2. //<![CDATA[ 
  3. $(function(){ 
  4. var $para = $(".nm_p"); // 獲取<p>節點 
  5. var $li = $(".nm_ul li:eq(1)"); // 獲取第二個<li>元素節點 
  6. var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title 
  7. var ul_txt = $li.attr("title"); // 獲取<ul>里的第二個<li>元素節點的屬性title 
  8. var li_txt = $li.text(); // 輸出第二個<li>元素節點的text 
  9. $("#btn_1").click(function(){ 
  10. alert(ul_txt); 
  11. }); 
  12. $("#btn_2").click(function(){ 
  13. alert(li_txt); 
  14. }); 
  15. $("#btn_3").click(function(){ 
  16. alert(p_txt); 
  17. }); 
  18. }); 
  19. //]]> 
  20. </script> 

  希望本文所述對大家的jQuery程序設計有所幫助。