DOM操作分為3個方面：DOM Core 任何一種支持DOM Core的語言都可以使用它，比如getElementById就是DOM Core操作HTML-DOM 只能用來處理web文檔CSS-DOM 針對CSS的操作關於jQuery中的DOM操作查找節點可以很輕易通過就jQuery選擇器來找到.....
DOM操作分為3個方面：
- DOM Core 任何一種支持DOM Core的語言都可以使用它，比如getElementById就是DOM Core操作
- HTML-DOM 只能用來處理web文檔
- CSS-DOM 針對CSS的操作
關於jQuery中的DOM操作
查找節點可以很輕易通過就jQuery選擇器來找到，這裡略過。
創建節點
var $myli= $('<li title="troy">troy123</li>');//創建jQuery對象 $("ul").append($myli);//將創建的DOM元素添加到ul中
插入節點
- append() 向每個匹配的元素內部追加內容（上面已有示例）
- appendTo() 將所匹配的元素追加到指定的元素中
$myli.appendTo("ul");//改編自創建節點中的代碼，效果一樣 -
prepend() 向每個匹配的元素內部前置內容（與append相反，append是加在元素裡子元素的後面）
- prependTo() 將所匹配的元素追加到指定的元素中
- after() 在每個匹配的元素之後插入內容，其實就是$("#liId").after($myli)的意思
- insertAfter() 將所匹配的元素追加到指定的元素後面，同理，只不過不知道為什麼沒有寫成afterTo,這樣同一起來其實好理解一點
- before() 在每個匹配的元素之前插入內容，其實就是$("#liId").before($myli)的意思
- insertBefore() 將所匹配的元素追加到指定的元素前面，同理
var $one_li=$("ul li:eq(1)"); var $two_li=$("ul li:eq(2)"); $two_li.insertBefore($one_li);//這樣就實現了兩個節點互換
刪除節點
- remove() 當某個節點調用remove方法後，該節點及其後代節點都會被刪除。該方法的返回值是一個只想該被刪除節點的引用。
var $li= $("ul li:eq(0)").remove(); $li.prependTo("ul");//結果沒變化 $("ul li").remove("li[title=troy]");//選擇性刪除
- detach() 和remove效果一樣。但是用這個刪除再像上面的例子那樣插入的話，你會發現綁定在元素節點上的事件和附加的數據都還在，而remove的就不行。detach翻譯為英文為拆分，似乎可以說明這就是為了先拿出來再插入的。
- empty() 清空節點的所有後代節點
複製節點
clone()方法進行複製節點，如果傳參clone(true)就表示連節點的事件都會複製。
替換節點
我們當然可以先刪後增來達到替換的效果，當然也有更簡單的方法，那就是用replaceWith()和repalceAll();
包裹節點
$("strong").wrap("<b></b>");//每一個被匹配的<strong>元素都將被<b>包裹起來
$("strong").wrapAll("<b></b>");//所有被匹配到的<strong>元素被同一個<b>包裹起來
$("strong").wrapInner("<b></b>");//每一個被匹配到的<strong>元素的所有子元素都被一個<b>包裹起來
關於jQuery中的屬性操作
var $myDiv=$("div"); var text=$myDiv.attr("title");//獲取屬性 $myDiv.attr("title","Troy123");//設置單個屬性 $myDiv.attr({title:"Troy123",name:"Troy"});//設置單個屬性 $myDiv.removeAttr("title");//刪除屬性
關於jQuery中的樣式操作
- attr("class") 樣式的獲取和設置，$myDiv.attr("class")和$myDiv.attr("class","myClass")即可。
- addClass("myClass") 追加樣式。如果在不同的class中設置同一樣式，那麼後者覆蓋前者。也就是說，此函數追加的樣式中某一樣式屬性，如果在前面已經被某樣式決定了，那麼新的這個會覆蓋舊的。
- removeClass("myClass") 僅僅只刪除myClass樣式。而如果不要參數，直接$myDiv.removeClass()，那麼將刪除所有樣式。
- toggleClass("myClass") 當點擊div時增加樣式myclass，當再點擊一次則移除，反覆如此。
- hasClass("myClass") 如果含有則返回true，如果沒有則返回false。實際上在內部是用了$myDiv.is(".myClass")操作來實現。
設置和獲取HTML、文本和值
- html() 設置和獲取某節點的html，玩法和attr()一樣
- text() 設置和獲取某節點的文本內容，玩法同上
- val() 設置和獲取某節點的value屬性，而val方法還能使select，checkbox和radio相應的選項被選中。
$("#mySelect").val("選項2");//選中選項2 $("#mulSelect").val(["選項2","選項3"]);//選中選項2，選項3 $(":checkBox").val(["check2","check3"]);//選中value為check2和check3的多選框 $(":radio").val(["radio1"]);//選中value為radio1的單選框 //下麵用attr方法實現 $("#mySelect option:eq(1)").attr("selected",true); $("[value=radio2]:radio").attr("checked",true);
遍歷節點
- children() 該方法取得匹配元素的子元素集合，只取得子元素，不考慮後代元素
- next() 取得匹配元素後面緊鄰的同輩元素
- prev() 取得匹配元素前面緊鄰的同輩元素
- siblings() 取得匹配元素前後所有的同輩元素
- closest() 取得最近的匹配元素。先檢查該元素是否匹配，不匹配就向上查父元素，有就返回匹配元素，無就返回空的jQuery對象
- parent() 獲取集合中每個匹配元素的父元素
- parents() 獲取集合中每個匹配元素的祖先元素，還可以加匹配參數
$("#mydiv").parent(); $("#mydiv").parents("div"); $("#mydiv").closest("div");
CSS-DOM操作
css()方法無論是color屬性，還是外部CSS導入，還是拼接在HTML的元素里，css方法都可以獲取到屬性style里的其他屬性的值。
$("#mydiv").css("height");//獲取樣式高度值，可能為auto之類的
$("#mydiv").height();//獲取真實高度值，必定為數值px
關於元素定位
- offset() 獲取元素在當前視窗的相對偏移，其中返回的對象有兩個屬性：top和left。它只對可見元素有效。
var myOffset=$("#mydiv").offset(); var left=myOffset.left; var top=myOffset.top;
- position() 獲取元素相對於最近的一個Position樣式屬性設置為relative或者absolute的祖先節點的相對偏移，也返回top和left。用法同上。
- scrollTop()和scrollLeft() 獲取和設置滾動條滑塊距頂端和左側的距離。
$("#myTextArea").scrollTop();//獲取距離 $("#myTextArea").scrollTop(300);//設置距離
