JQuery查找DOM節點的方法_jquery

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

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

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

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

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

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

找元素節點

取得元素節點並列印出它的文字內容，JQuery程式碼如下：

var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
var li_txt = $li.text(); // 输出第二个<li>元素节点的text

以上程式碼取得了

元素裡第2個
• 節點，並將它的文字內容「簡單易懂的JavaScript魔法」列印出來。

  找出屬性節點

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

  取得屬性節點並印出它的文字內容，JQuery程式碼如下：

  var $para = $(".nm_p"); // 获取<p>节点
  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
  
  

  以上程式碼取得了class為nm_p的

  節點，並將它的title屬性的值「歡迎造訪簡明現代魔法圖書館」列印出來。

  本例完整JQuery程式碼如下：

  <script type="text/javascript">
  //<![CDATA[
  $(function(){
    var $para = $(".nm_p"); // 获取<p>节点
    var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
    var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
    var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
    var li_txt = $li.text(); // 输出第二个<li>元素节点的text
    $("#btn_1").click(function(){
      alert(ul_txt);
    });
    $("#btn_2").click(function(){
      alert(li_txt);
    });
    $("#btn_3").click(function(){
      alert(p_txt);
    });
  });
  //]]>
  </script>
  
  

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