詳解Jquery中DOM操作
Jquery中的DOM操作
為了能全面的講解DOM操作，首先需要構建一個網頁。
HTML代碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
</head>
<body> <p title="選擇你最喜歡的水果。">你最喜歡的水果是？</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul> </body> </html></pre>
n 節點操作：
一、查找節點
1、查找元素節點
獲取元素節點并打印它的文本內容，jQery代碼如下：
var li_txt=$("ul li:eq(1)").text();//獲取<ul>里第二個<li>節點的文本內容 alert(li_txt);//結果為橘子2、查找屬性節點
利用jQuery選擇器查找到需要的元素之后，就可以使用attr()方法來獲取它的各種屬性的值，attr()方法的參數可以是一個，也可以是兩個，當參數是一個時，則是要查詢屬性的名字，例如：
獲取屬性節點并打印它的文本內容：
var p_txt=$("p").attr("title");//獲取<p>元素節點屬性title alert(p_txt);//結果為 選擇你最喜歡吃的水果二、創建節點
在DOM操作中，常常需要動態創建HTML內容，使文檔在瀏覽器里的呈現效果發生變化，并且達到各種各樣的人機交互目的
1、創建元素節點
如果要創建兩個<li>元素節點，并要把他們作為<ul>元素節點的子節點添加到DOM節點樹上。則需要：
（1）創建<li>新元素
（2）將新元素插入到文檔中
首先創建<li>元素： var $li_1=$("<li></li>");//創建<li>元素 然后使用jQuery中的append等方法將新元素插入文檔中 $("ul").append($li_1);//添加到<ul>節點中，使之能在網頁中顯示注意：
1、動態創建的新元素節點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中
2、當創建單個元素時，要注意閉合標簽和使用標準的XHTML格式。
2、創建文本節點
創建文本節點就是在創建元素節點時直接把文本內容寫出來，然后使用append()等方法將它們添加到文檔中就可以。
var $li_1=$("<li>香蕉</li>");//創建一個<li>元素，"香蕉"就是創建的文本節點 $("ul").append($li_1);//添加到<ul>節點中，使之能在網頁中顯示注意：無論$(html)中的HTML代碼多么復雜，都要使用相同的方式來創建。
例如：$(“<li><em>這是</em><b>一個</b><a href=”#”>復雜的組合</a></li>”)
3、創建屬性節點
創建屬性節點與創建文本節點類似：
var $li_1=$("<li title='香蕉'>香蕉</li>");//創建一個<li>元素，title="香蕉"就是創建的title="香蕉屬性節點 $("ul").append($li_1);//添加到<ul>節點中，使之能在網頁中顯示三、插入節點
append()
向每個匹配的元素內部追加內容：
HTML代碼： <p>我想說：</p> jQuery代碼： $("p").append("<b>你好</b>"); 結果： <p>我想說：<b>你好</b></p>appendTo()
將所有匹配的元素追加到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("<b>你好</b>").appendTo("p");結果：
<p>我想說：<b>你好</b></p>
prepend()
向每個匹配的元素內部前置內容：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("p").prepend<"<b>你好</b>");結果：
<p><b>你好</b>我想說：</p>
prependTo()
將所有匹配的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("<b>你好</b>").prependTo("p");結果：
<p><b>你好</b>我想說：</p>
after()
在每個匹配的元索之后插入內容：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("p").after("<b>你好</b>");結果：
<p>我想說：</p><b>你好</b>
insertAfler()
將所有匹配的元素插入到指定元素的后面。實際上，使用該方法是顛倒了常規的$(A).after(B)的操作，即不是將B插入到A后面，而是將A插入到B后面：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("<b>你好</b>").insertAfter("p");結果：
<p>我想說：</p><b>你好</b>
before()
在每個匹配的元素之前插入內容：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("p").before("<b>你好</b>");結果：
<b>你好</b><p>我想說：</p>
insertBefore()
將所有匹配的元素捅入到指定的元素的前面。實際上，使用該方法是顛倒了常規的$(A).before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面：
HTML代碼：
<p>我想說：</p>jQuer代碼：
$("<b>你好</b>").insertBefore("p");結果：
<b>你好</b><p>我想說：</p>
這些插入節點的方法不僅能將新創建的DOM元素插入到文檔中，也能對原有的DOM元素進行移動。例如利用它們創建新元素并對其進行插入操作：
$(function(){ var $li_1 = $("<li title='新增節點：數據結構'>新增節點：數據結構</li>"); // 創建第一個<li>元素 var $li_2 = $("<li title='新增節點：設計模式'>新增節點：設計模式</li>"); // 創建第二個<li>元素 var $li_3 = $("<li title='新增節點：計算機算法'>新增節點：計算機算法</li>"); // 創建第三個<li>元素var $parent = $(".nm_ul"); // 獲取<ul>節點。<li>的父節點 var $two_li = $(".nm_ul li:eq(1)"); // 獲取<ul>節點中第二個<li>元素節點 $("#btn_1").click(function(){ $parent.append($li_1); // 添加到<ul>節點中，使之能在網頁中顯示 }); $("#btn_2").click(function(){ // 可以采取鏈式寫法：$parent.append($li_1).append($li_2); $parent.append($li_2);
}); $("#btn_3").click(function(){ // insertAfter方法將創建的第三個<li>元素元素插入到獲取的<li>之后 $li_3.insertAfter($two_li);
}); });</pre>也利用它們對原有的DOM元素進行移動：
$(function(){ var $one_li = $("ul li:eq(1)"); // 獲取<ul>節點中第二個<li>元素節點 var $two_li = $("ul li:eq(2)"); // 獲取<ul>節點中第三個<li>元素節點 $two_li.insertBefore($one_li); //移動節點 });四、刪除節點
1、Remove
$("ul li:eq(1)").remove();//獲取第2個<li>元素節點后，將它從網頁中刪除這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。
$("ul li").remove("li[title!=菠蘿]");2、Empty
嚴格來講，empty()方法并不是刪除元素，而是清空節點，它能清空元素中所有的后代節點。
$("ul li:eq(1)").empty();//獲取第2個<li>元素節點后清空此元素里的內容，注意是元素里五、復制節點
復制實現了節點重用，而不用另外新建，復制的時候可以一并復制節點上面的行為(也就是綁在它上面的事件),也可以只復制節點，分別使用clone(true)和clone()
例如：$("ul li").click(function(){ $(this).clone().appendTo("ul")//復制當前的li單擊節點，并將其最加到ul元素下 })六、替換節點
替換是將已經存在的節點替換成其他的，使用的方法有replaceWith()，replaceAll()
replaceWith():XX用XXX替換掉
replaceAll()：那XXX替換所有的XX
七、包裹節點
包裹節點的意思就是將某個或者是符合條件的一組節點用其他的標記包裹起來，在jquery中使用wrap()
例如：$("strong").wrap("<b></b>");//使用b標簽把strong元素包裹起來包裹的方法還有wrapAll(),wrapInner()</span>
wrapAll：將所有匹配的元素用一個元素來包裹<與wrap的不同是，wrap對每個符和條件的元素都進行包裹，而wrapAll不是></span>
wrapInner：將每個匹配的元素的子內容進行包裹</span>
$("strong").wrapInner("<b></b>");//strong元素的子元素被b標簽包</span>n 屬性操作：
1、.獲取和設置屬性
var $var_1=$("p");//這句話是獲取節點P var $p_1=$var_1.attr("title");//獲取節點P的title屬性 var $p_2=$var_1.attr("title","你好");//設置節點P的title屬性為"你好"2、.刪除屬性
$("p").removeAttr("title");//刪除節點P的Title屬性n 樣式操作：
1.獲取和設置樣式
var $var_class=$("p").attr("class");//獲取節點P的class屬性
$("p").attr("class","class1");設置節點P的class屬性為樣式表類class1
2.追加樣式
addClass() 添加樣式到A
例子：$("p").addClass("another");添加樣式表類another類到P
3.移除樣式
removeClass() 移除類
4.切換樣式
toggleClass() 切換clss屬性類為新的類
5.判斷某個樣式是否存在
hasClass()
n 內容操作：
html() 該方法獲取html元素的內容，如：var var1=$("p").html();//獲取P元素內的內容
text() 獲取或設置某個html元素的內容
val() 獲取元素的Value值
children() 獲取html元素的所有子節點
next() 獲取html元素后緊鄰的同輩節點
prev() 獲取html元素前緊鄰的同輩節點
siblings() 獲取html元素前后緊鄰的同輩節點
n CSS-DOM技術：
$("p").css("color");//獲取顏色屬性
$("p").css("color","red");//設置顏色
$("p").css({"fontSize"："30px"，”backgroundColor“：”#888888“});//同時設置多個樣式。
有兩個注意點：
(1)如果值是數字，將會被自動轉化為像素值。
(2)在css()方法中，如果屬性中帶有”-“符號，例如font-size和background-color屬性，用駝峰式寫法。
hight().width();
offset() .left .top 獲取元素在當前視窗的偏移量，返回值對象包含兩個屬性left和top。
position() .left .top 獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的偏移量。
scrollTop() 、scrollLeft()方法。分別獲取元素的滾動條距頂端的距離和距左側的距離。也可以設置值。scrollTop(300)
來自：http://blog.csdn.net/u011955534/article/details/16373481