學習JQuery的DOM操作

今天為大家介紹的是JQuery的DOM操作，希望大家會喜歡。

JQuery中的DOM操作主要對包括：建【新建】、增【添加】、刪【刪除】、改【修改】、查【查找】【像數據庫操作】。下面的DOM操作將圍繞上面的DOM樹進行學習JQueryDOM操作。

一、查--查找DOM節點

查找節點非常容易，使用選擇器就能輕松完成各種查找工作。例：查找元素節點p返回p內的文本內容$("p").text();例：查找元素節點p的屬性返回屬性名稱對應的屬性值$("p").attr("title"),返回p的屬性title的值。

二、建--新建DOM節點

1、創建元素節點

創建元素節點並且把節點作為

元素的子節點添加到DOM節點樹上。先創建元素點，創建元素節點使用Jquery的工廠函數$()來完成，格式如下：$(html),該方法會根據傳入的html字符串返回一個DOM對象，並將DOM對象包裝成一個JQuery對象後返回。創建一個元素節點JQuery代碼如下：

 

$li1=$("

•  
")

 

代碼返回$li1就是一個由DOM對象包裝成的JQuery對象。把新建節點添加到DOM樹中JQuery代碼如下：

$("ul").append($li1);

添加後頁面中只能看到

• 元素默認的"·",由於沒有為節點添加文本所以只顯示默認符號，下面創建文本節點。

   

  PS:append()方法是添加DOM節點方法詳見增--添加DOM節點。

  2、創建文本節點

  使用JQuery的工廠函數$()同樣能夠創建文本節點，創建文本節點的JQuery代碼如下：

  $li2=$("

• 蘋果
");

 

代碼返回$li2就是一個由DOM對象包裝成JQuery對象，把新建的文本節點添加到DOM樹中JQuery代碼如下：

$("ul").append($li2);

添加後頁面中能看到"·蘋果"，右鍵查看頁面源碼發現新加的文本節點沒有title屬性。下面方法創建帶屬性的節點。

3、創建屬性節點

創建屬性節點同元素節點、文本節點一樣使用JQuery的工廠函數完成。創建屬性節點的JQuery代碼如下：

$li3=$("

• 榴蓮
");

 

代碼返回$li3也是一個由DOM對象包裝成JQuery對象，把新建的屬性節點添加到DOM樹中JQuery代碼如下：

$("ul").append($li3);

添加後頁面中能看到"·榴蓮"，右鍵查看頁面源碼發現新加的屬性節點有title='榴蓮'屬性。

以上就是我們為大家准備的JQuery的DOM操作的相關內容，希望對大家可以有所幫助。