jQuery基礎之三 -- 操作DOM

什麼是 DOM？
通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。
要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。
在 1998 年，W3C 發佈了第一級的 DOM 規範。這個規範允許訪問和操作 HTML 頁面中的每一個單獨的元素。
所有的瀏覽器都執行了這個標準，因此，DOM 的兼容性問題也幾乎難覓蹤影了。

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。
DOM 被分爲不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
Core DOM    定義了一套標準的針對任何結構化文檔的對象
XML DOM     定義了一套標準的針對 XML 文檔的對象
HTML DOM  定義了一套標準的針對 HTML 文檔的對象。

1.查找節點

查找元素節點： var $li = $("ul li:eq(1)");查找<ul>裏第二個<li>節點
查找屬性節點： var p_txt = $("p").attr("title");獲取p元素節點的屬性title

2.創建節點 $(html)

創建元素節點： $(html); //根據傳入的HTML標記字符串，創建一個DOM對象，並將這個DOM對象包裝成一個jQuery對象返回
   var $li_1 = $("<li></li>");
   var $li_2 = $("<li></li>");
   $("ul").append($li_1).append($li_2);

創建文本節點： 
   var $li_1 = $("<li>aaa</li>"); //即包含元素節點，又包含文本節點
   var $li_2 = $("<li>bbb</li>");
   $("ul").append($li_1).append($li_2);

創建屬性節點： 
   var $li_1 = $("<li title='aaa'>aaa</li>"); //即包含元素節點，又包含文本節點, 還包含屬性節點
   var $li_2 = $("<li title='bbb'>bbb</li>");
   $("ul").append($li_1).append($li_2);

當HTML字符串是沒有屬性的元素時, 內部使用document.createElement創建元素, 比如:
//jQuery內部使用document.createElement創建元素:
$("<div/>").css("border","solid 1px #FF0000").html("動態創建的div").appendTo(testDiv);

 否則使用innerHTML方法創建元素:
//jQuery內部使用innerHTML創建元素:
$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>").appendTo(testDiv);

3.插入節點

append();       向每個匹配的元素的內部追加內容 eg: $("p").append("<b>bbbb</b>"); <p>pppp <b>bbbb</b> </p>
appendTo();     將所有匹配的元素追加到指定的元素上eg: $("<b>bbbb</b>").appendTo("p"); <p>pppp <b>bbbb</b> </p>
prepend();      向每個匹配的元素的內部前置內容eg: $("p").prepend("<b>bbbb</b>"); <p> <b>bbbb</b> pppp</p>
prependTo();    將所有匹配的元素前置到指定的元素上eg: $("<b>bbbb</b>").prependTo("p"); <p> <b>bbbb</b> pppp</p>
after();        在每個匹配的元素之後插入內容eg: $("p").after("<b>bbbb</b>"); <p>pppp</p> <b>bbbb</b>
insertAfter();  將所有匹配的元素插入到指定的元素後面eg: $("<b>bbbb</b>").insertAfter("p"); <p>pppp</p> <b>bbbb</b>
before();       在每個匹配的元素之前插入內容eg: $("p").before("<b>bbbb</b>"); <b>bbbb</b> <p>pppp</p>
insertBefore(); 將所有匹配的元素插入到指定的元素前面eg: $("<b>bbbb</b>").insertBefore("p"); <b>bbbb</b> <p>pppp</p>

4.刪除節點

remove(); //所有後代節點將同時被刪除
   var $li=$("ul li:eq(1)").remove();
   $li.appendTo("ul");
   $("ul li").remove("li[title!=aaa]"); //將元素不等於aaa的<li>元素刪除
empty(); //清空元素中的所有後代節點
   $("ul li:eq(1)").empty(); //清空此元素裏的內容，注意是元素裏

5.複製節點

$("ul li").click(function(){
   $(this).clone(true).appendTo("ul"); //參數true的含義是複製元素的同時複製元素中所綁定的事件，否則不具備任何行爲
});

6.替換節點

//如果在替換前綁定了事件，替換後原先綁定的事件和被替換的元素一起消失，需要在新元素上重新綁定事件  
replaceWith(); $("p").replaceWith("<strong>aaa</strong>"); //將所有匹配的元素都替換成指定的HTML或者DOM元素
replaceAll(); $("<strong>aaa</strong>").replaceAll("p"); //與replaceWith相同，只是顛倒了操作

7.包裹節點

wrap();      將所有元素單獨包裹 $("strong").wrap("<b></b>"); <b> <strong>aaaaaa</strong> </b>, <b> <strong>aaaaaa</strong> </b>
wrapAll();   將所有元素一起包裹 $("strong").wrapAll("<b></b>"); <b> <strong>aaaaaa</strong> <strong>aaaaaa</strong> </b>
wrapInner(); 包裹所有匹配元素的子內容 $("strong").wrapInner("<b></b>"); <strong> <b>aaaaaa</b> </strong>
unwrap();    移除並替換指定元素的父元素$("p").unwrap();  移除<p>的父元素

8.屬性操作

獲取屬性和設置屬性
   var txt=$("p").attr("title");
   $("p").attr("title", "your title");
   $("p").attr("title":"your title", "name":"your name");
刪除屬性
   $("p").removeAttr("title");

9.樣式操作

獲取樣式和設置樣式
   var p_class=$("p").attr("class");
   $("p").attr("class", "your class");
追加樣式
   $("p").addClass("your class");
移除樣式
   $("p").removeClass(); //全部樣式被移除
   $("p").removeClass("your class");
   $("p").removeClass("class1 class2");
切換樣式
   $("p").toggleClass("your class"); //如果類名存在則刪除它，如果類名不存在則添加它
判斷是否含有某個樣式
   $("p").hasClass("your class"); //返回true或者false 等價於$("p").is(.myClass);

10.設置和獲取HTML、文本和值

$("p").html();  //獲取p元素的HTML代碼
$("p").html("<strong>xxxxxxxx</strong>"); //設置p元素的HTML代碼
text(); val();方法同html();方法

另外，val();方法在表單操作中，能使select, checkbox, radio相應的選項被選中，如：
$("single").val("select 1");
$("multiple").val("select 1", "select 2");
$(":checkbox").val("check2", "check3");
$(":radio").val("radio2");

11.遍歷節點

each();  對 jQuery 對象進行迭代，爲每個匹配元素執行函數
     $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 
     $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
     $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})      //爲索引分別爲0，1，2的p元素分別設定不同的字體顏色。
     $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})//實現表格的隔行換色效果

過濾：
first();       將匹配元素集合縮減爲集合中的第一個元素 $('li').first()
last();        將匹配元素集合縮減爲集合中的最後一個元素 $('li').last()
has(expr);     將匹配元素集合縮減爲包含特定元素的後代的集合。$('li').has('ul').css('background-color', 'red');給含有ul的li加上背景色
hasClass(class); 檢查當前的元素是否含有某個特定的類，如果有，則返回true。  if ( $("div").hasClass("protected") ){....}
is(expr);        根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。$("input[type='checkbox']").parent().is("form")
eq(index);       將匹配元素集合縮減爲位於指定索引的新元素  $("p").eq(1)獲取匹配的第二個元素
not(expr);       從匹配元素集合中刪除元素  $("p").not("#selected").css('background-color', 'red');
slice(start [,end]);    將匹配元素集合縮減爲指定範圍的子集,start從0開始  $("p").slice(0, 2).wrapInner("<b></b>"); //第1，2個p元素裏面內容將被包裹 
map(callback);	        把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象
           $("p").append( $("input").map(function(){return $(this).val();}).get().join(",")); //<p>John, password, http://ejohn.org/</p> 
filter(expr | fn);      將匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素
           $("div").css("background", "#c8ebcc")
           .filter(".middle")
           .css("border-color", "red"); 改變所有 div 的顏色，然後向類名爲 "middle" 的類添加邊框

查找：
children([expr]); 取得匹配元素的子元素集合，children方法只考慮子元素而不考慮任何後代元素$("div").children() || $("div").children(".selected")
closest([expr]);  從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素
    $(document).bind("click", function(){
      $(e.target).closest("li").css("color", "red"); //給點擊的目標元素的最近的li元素添加顏色
    });
find([expr]);     獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選
   $("p").find("span").css('color','red'); 搜索所有段落中的後代 span 元素，並將其顏色設置爲紅色
next([expr]);     取得匹配元素後面緊鄰的同輩元素 $("p").next() || $("p").next(".selected")
nextAll([expr]);  取得匹配元素後面所有的同輩元素 $("div:first").nextAll().addClass("after");
nextUntil([expr]);獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素爲止 $('#term-2').nextUntil('dt').css('background-color', 'red');給#term-2後面直到dt前的元素加上紅色背景
prev([expr]);     取得匹配元素前面緊鄰的同輩元素
prevAll([expr]);  取得匹配元素前面所有的同輩元素 
prevUntil([expr]);獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素爲止
siblings([expr]); 取得匹配元素前後所有的同輩元素 $("div").siblings() || $("div").siblings(".selected")

offsetParent([expr]); 搜索DOM樹中元素的祖先，並構造一個由最近的定位祖先元素包圍的jQuery對象,返回父元素中第一個其position設爲relative或者absolute的元素
parent([expr]);       獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）$("p").parent() || $("p").parent(".selected")
parents([expr]);      獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選） $("span").parents()找到每個span元素的所有祖先元素。
parentsUntil([expr]); 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素爲止 $('li.item-a').parentsUntil('.level-1').css('background-color', 'red');


串聯
contents(); 查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容
            $("p").contents().not("[nodeType=1]").wrap("<b/>"); 查找所有文本節點並加粗
            $("iframe").contents().find("body").append("I'm in an iframe!"); 往一個空框架中加些內容
end();      回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變爲前一次的狀態。
            $("p").find("span").end() 選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素
add(expr [,context]);   將元素添加到匹配元素的集合中 $("p").add("span")添加一個新元素到一組匹配的元素中，並且這個新元素能匹配給定的表達式。
andSelf();  $("div").find("p").andSelf().addClass("border"); //div自己和p元素都被添加了邊框，包括選擇器自己

12.CSS-DOM操作

$("p").css("color");
$("p").css("color", "red");
$("p").css({"fontSize":"30px", "backgroundColor":"#888888"}); //如果屬性中帶有"-"符號，可以寫成"font-size"或"fontSize", 也可以直接寫成fontSize，建議帶引號
offset(); //獲取元素在當前視窗的相對偏移，其中返回的對象包含兩個屬性，top和left，只對可見元素有效
          var p = $("p:last");
          var offset = p.offset();
          p.html( "left: " + offset.left + ", top: " + offset.top );
position(); //獲取元素相對於最近的一個position樣式屬性設置爲relative或者absolute的祖父節點的相對偏移，其中返回的對象包含兩個屬性，top和left
         var p = $("p:first");
         var position = p.position();
         $("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop(); //獲取元素的滾動條距頂端的距離
scrollLeft();//獲取元素的滾動條距左側的距離