jQuery DOM操作總結

·查找元素節點
var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：123


·查找屬性節點
var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
alert(str); //結果：hello


·創建元素節點
var $li1 = $("<span></span>"); //傳入元素標記，自動包裝並創建第一個li元素對象
var $li2 = $("<span></span>"); //第二個,創建時需要遵循XHTML規則（閉合、小寫）
$("#myDiv").append($li1); //往id爲myDiv的元素中添加一個元素
$("#myDiv").append($li2); //結果：<div id="myDiv"><span></span><span></span></div>


$("#myDIv").append($li1).append($li2); //客串：傳說中的鏈式寫法，省一行代碼 ^_^


·創建文本節點
var $li1 = $("<span>first</span>");
var $li2 = $("<span>second</span>");
$("#myDIv").append($li1).append($li2);
//結果：<div id="myDiv"><span>first</span><span>second</span></div>


·創建屬性節點
var $li1 = $("<span title="111">first</span>");
var $li2 = $("<span title="222">second</span>");
$("#myDIv").append($li1).append($li2); 
//結果：<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>


·插入節點
$("#myDiv").append("<span></span>"); //往id爲myDiv的元素插入span元素
$("<span></span>").appendTo("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素


$("#myDiv").prepend("<span></span>"); //往id爲myDiv的元素內最前面插入span元素
$("<span></span>").prependTo("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素內的最前面


$("#myDiv").after("<span></span>"); //往id爲myDiv的元素後面插入span元素（同級，不是子元素）
$("<span></span>").insertAfter("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素後面（同級，不是子元素）


$("#myDiv").before("<span></span>"); //往id爲myDiv的元素前面插入span元素（同級，不是子元素）
$("<span></span>").insertBefore("#myDiv"); //倒過來，將span元素插入到id爲myDiv的元素前面（同級，不是子元素）


·刪除節點
$("#myDiv").remove(); //將id爲myDiv的元素移除


·清空節點
$("#myDiv").remove("span"); //將id爲myDiv的元素內的所有span元素移除


·複製節點
$("#myDiv span").click( function(){ //點擊id爲myDiv的元素內的span元素，觸發click事件
    $(this).clone().appendTo("#myDiv"); //將span元素克隆，然後再添加到id爲myDiv的元素內
    $(this).clone(true).appendTo("#myDiv"); //如果clone傳入true參數，表示同時複製事件
})


·替換節點
$("p").replaceWith("<strong>您好</strong>"); //將所有p元素替換成後者 <p>您好</p> --> <strong>您好</strong>
$("<strong>您好</strong>").replaceAll("p"); //倒過來寫，同上


·包裹節點
$("strong").wrap("<b></b>"); //用b元素把所有strong元素單獨包裹起來 <b><strong>您好</strong></b><b><strong>您好</strong></b>
$("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起來 <b><strong>您好</strong><strong>您好</strong></b>
$("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素內 <strong><b>您好</b></strong>


·屬性操作
var txt = $("#myDiv").arrt("title"); //獲取id爲myDiv的元素的title屬性
$("#myDiv").attr("title","我是標題內容"); //設置id爲myDiv的元素的title屬性的值
$("#myDiv").attr({"title":"我是標題內容", "alt":"我還是標題"); //一次性設置多個屬性的值
$("#myDiv").removeArrt("alt"); //移除id爲myDiv的元素的title屬性


·樣式操作
var txt = $("#myDiv").arrt("class"); //獲取id爲myDiv的元素的樣式
$("#myDiv").attr("class","myClass"); //設置id爲myDiv的元素的樣式
$("#myDiv").addClass("other"); //在id爲myDiv的元素中追加樣式
$("#myDiv").removeClass("other"); //在id爲myDiv的元素中移除other樣式
$("#myDiv").removeClass("myClass other"); //在id爲myDiv的元素中移除myClass和other多個樣式
$("#myDiv").removeClass(); //在id爲myDiv的元素中移除所有樣式
$("#myDiv").toggleClass("other"); //切換樣式，在有other樣式和沒other樣式之間切換
$("#myDiv").hasClass("other"); //判斷是否有other樣式


·設置和獲取HTML、文本和值
alert( $("#myDiv").html() ); //獲取id爲myDiv的元素的HTML代碼（相當於innerHTML）
$("#myDiv").html("<span>hello</span>"); //設置id爲myDiv的元素的HTML代碼


alert( $("#myDiv").text() ); //獲取id爲myDiv的元素的HTML代碼（相當於innerText）
$("#myDiv").text("hello"); //設置id爲myDiv的元素的HTML代碼


alert( $("#myInput").val() ); //獲取id爲myDiv的元素的value值（支持文本框、下拉框、單選框、複選框等）
$("#myInput").val("hello"); //設置id爲myDiv的元素的value值（下拉框、單選框、複選框帶有選中效果）


·遍歷節點
var $cList = $("#myDiv").children(); //獲取id爲myDiv的元素的子元素（只考慮子元素，不考慮後代元素）
var $sNext = $("#myDiv").next(); //獲取id爲myDiv的元素的下一個同輩元素
var $sPrev = $("#myDiv").prev(); //獲取id爲myDiv的元素的上一個同輩元素
var $sSibl = $("#myDiv").siblings(); //獲取id爲myDiv的元素的所有同輩元素
var $pClos = $("#myDiv").closest("span"); //獲取id爲myDiv的元素本身開始，最接近的span元素（向上查找）


·CSS-DOM操作
$("#myDiv").css("color"); //獲取id爲myDiv的元素的color樣式的值
$("#myDiv").css("color", "blue"); //設置id爲myDiv的元素的color樣式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //設置id爲myDiv的元素的color樣式的值（多個）


$("#myDiv").css("opacity", "0.5"); //設置id爲myDiv的元素的透明度（兼容瀏覽器）


$("#myDiv").css("height"); //獲取id爲myDiv的元素的高度（單位：px，兼容瀏覽器）
$("#myDiv").height(); //同上（實際高度）


$("#myDiv").css("width"); //獲取id爲myDiv的元素的寬度（單位：px，兼容瀏覽器）
$("#myDiv").width(); //同上（實際寬度）


var offset = $("#myDiv").offset(); //獲取id爲myDiv的元素在當前窗口的相對偏移量
alert( offset.top + "|" + offset.left );


var offset = $("#myDiv").position(); //獲取id爲myDiv的元素相對於最近一個position設置爲relative或absolute的父元素的相對偏移量
alert( offset.top + "|" + offset.left );


$("#txtArea").scrollTop(); //獲取id爲txtArea的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(); //獲取id爲txtArea的元素滾動條距離左側的距離
$("#txtArea").scrollTop(100); //設置id爲txtArea的元素滾動條距離頂端的距離
$("#txtArea").scrollLeft(100); //設置id爲txtArea的元素滾動條距離左側的距離