JQuery查找DOM節(jié)點的方法
更新時間：2015年06月11日 09:21:27 作者：簡明現代魔法
這篇文章主要介紹了JQuery查找DOM節(jié)點的方法,實例分析了jQuery選擇器實現DOM元素結點與屬性結點的查找技巧,需要的朋友可以參考下
本文實例講述了JQuery查找DOM節(jié)點的方法。分享給大家供大家參考。具體分析如下：
DOM操作是JQuery最常見的用法，下面我們來將JQuery的DOM操作逐個剖析下。先來最簡單的查找節(jié)點操作。
為了能全面地講解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在文檔樹上查找節(jié)點非常容易，可以通過JQuery選擇器來完成。
查找元素節(jié)點
獲取元素節(jié)點并打印出它的文本內容，JQuery代碼如下：
var $li = $(".nm_ul li:eq(1)"); // 獲取第二個<li>元素節(jié)點
var li_txt = $li.text(); // 輸出第二個<li>元素節(jié)點的text
以上代碼獲取了<ul>元素里第2個<li>節(jié)點，并將它的文本內容“簡單易懂的JavaScript魔法”打印出來。
查找屬性節(jié)點
利用JQuery選擇器查找到需要的元素之后，就可以使用attr()方法來獲取它的各種屬性的值。attr()方法的參數可以是一個，也可以是兩個。當參數是一個時，則是要查詢的屬性的名字，例如：
獲取屬性節(jié)點并打印出它的文本內容，JQuery代碼如下：
var $para = $(".nm_p"); // 獲取<p>節(jié)點
var p_txt = $para.attr("title"); // 輸出<p>元素節(jié)點屬性title
以上代碼獲取了class為nm_p的<p>節(jié)點，并將它的title屬性的值“歡迎訪問簡明現代魔法圖書館”打印出來。
本例完整JQuery代碼如下：
<script type="text/javascript">
//<![CDATA[
$(function(){
var $para = $(".nm_p"); // 獲取<p>節(jié)點
var $li = $(".nm_ul li:eq(1)"); // 獲取第二個<li>元素節(jié)點
var p_txt = $para.attr("title"); // 輸出<p>元素節(jié)點屬性title
var ul_txt = $li.attr("title"); // 獲取<ul>里的第二個<li>元素節(jié)點的屬性title
var li_txt = $li.text(); // 輸出第二個<li>元素節(jié)點的text
$("#btn_1").click(function(){
alert(ul_txt);
});
$("#btn_2").click(function(){
alert(li_txt);
});
$("#btn_3").click(function(){
alert(p_txt);
});
});
//]]>
</script>
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
Jquery css函數用法(判斷標簽是否擁有某屬性) ，需要的朋友可以參考下。2011-05-05
在此之前對于Microsoft Ajax的Sys和Jquery的$符號一直很好奇， 不明白為什么輸入一個'$()'就可以實現選擇器？2009-12-12
jquery對象和javascript對象即DOM對象相互轉換
對于已經是一個 DOM 對象，只需要用 $() 把DOM對象包裝起來，就可以獲得一個 jQuery 對象了，使用[index]和.get(index)可以轉為DOM對象2014-08-08
這篇文章主要介紹了jQuery取消ajax請求的方法,可實現在Ajax請求超時的情況下取消請求的功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jquery拖動層效果插件用法,結合實例形式分析了jquery-ui-1.7.2.custom.min.js插件的具體使用技巧,并附帶完整demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jquery中map函數遍歷數組用法,實例分析了jQuery中map函數遍歷數組的相關技巧,并提供了一個自定義遍歷數組函數供參考之用,需要的朋友可以參考下2015-05-05
JQuery選擇器之三 首先老規(guī)矩提供我學習用的例子2009-07-07
jquery序列化form表單使用ajax提交后處理返回的json數據
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數據的示例,需要的朋友可以參考下2014-03-03
jQuery.parseJSON(json)將JSON字符串轉換成js對象
本節(jié)主要介紹了使用jQuery.parseJSON(json)將JSON字符串轉換成js對象,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細介紹了jQuery實現div跟隨鼠標移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05