DOM操作之創建元素：
DOM：
var ele = document.createElement("element")
例子：document.createElement("div")
jQuery:
var $ele = $("element") //返回的是一個jQuery對象
例子：$("<div></div>")
DOM操作之輸入文本：
DOM：
var txt = document.createTextNode("String")
例子：document.createTextNode("test")
jQuery：
可以直接添加文字到標籤中
例子：var $div = $("<div>test</div>")
DOM操作之設置屬性：
DOM：
ele.setAttribute("AttName","AttValue")
jQuery：
可以直接添加屬性到標籤中
例子:var $div = $("<div align='center'></div>")
示例：
//DOM
window.onload = function(){
var txt = document.createTextNode("test");
var div = document.createElement("div");
div.appendChild(txt);
div.setAttribute("align","center");
document.body.appendChild(div);
}
//jQuery
var $div = $("<div align='center'>test</div>")
$("body").append($div)DOM操作之插入內容：
內部插入：
DOM：
appendChild() //在指定節點的內部末尾插入
insertBefore() //在指定節點的內部最前插入
jQuery：
append() //把參數指定的內容插入到指定節點中，返回jQuery對象
appendto() //將匹配的元素出插入到目標元素之後
示例：$("div").append($("h2"))
$("h2").appendto($("div"))
prepend() //將參數指定的內容插入到指定節點中，返回jQuery對象
prependto()
示例：$("div").prepend($("h2"))
$("h2").prependto($("div"))
外部插入：
jQuery：
after() //在每個匹配的元素之後插入內容
before() //在每個匹配的元素之前插入內容
例子：$("div").after("<b>test1</b>") 將在每個div元素後面插入test1文本
insertAfter() //把所有匹配的元素插入到另一個指定的元素集合的後面
insertBefore() //把所有匹配的元素插入到另一個指定的元素集合的前面
例子：$("<b>test<b>").insertAfter("p") 將test文本插入到p元素後
DOM操作之刪除元素：
DOM：
removeChild()
jQuery：
remove() //刪除所有匹配的元素 remove([selector),selector用來過濾元素
例子：$("p").remove(); //刪除所有p元素
$("div").remove(".red"); //刪除所有含有類red的div元素
empty() //刪除元素包含的內容，不刪除元素本身，該方法沒有參數
例子：$("p").empty() //刪除p元素包含的內容
detach() //將匹配的元素從DOM中分離出來
例子： $("p").detach(".red");
注意：remove和detach的區別：
detach()是將元素分離出去，會保留綁定在改元素上的事件、附加的數等；
當重新把該元素加入DOM中，所綁定的事件仍然有效
remove()是刪除元素，不會保留該元素上的事件等信息
DOM操作之克隆內容：
DOM：
cloneNode()方法：
nodeObject.cloneNode(false|true)
//false表示不復制節點的屬性和子節點，true表示要複製
jQuery：
clone()方法：
clone([withDataAndEvent])
clone([withDataAndEvent],[deepWithDataAndEvent])
例子：$("p").clone(true) //克隆p元素，並保留事件
DOM操作之替換內容：
DOM：
replaceChild()方法：
nodeObject.replaceChild(new_node,old_node)
jQuery：
replaceWith()方法：
例子：$("p").replaceWith("<h1>test<h1>");
replaceAll()方法：
例子：$("<h1>test<h1>").replaceAll("p");
DOM操作之包裹內容：
jQuery：
wrap()方法：wrap(element|function)
例子：$("div").wrap("<li></li>") 用li元素包含每一個div元素
wrapInner()方法：
例子：$("div").wrapInner("<li></li>") 給div添加內包含的元素li
wrapAll()方法：
例子：$("h1").wrapAll("<li></li>")
unwrap()方法： 將匹配元素的父級元素刪除
例子：$("p").unwrap()
DOM操作之屬性操作
設置屬性：
DOM：
setAttribute()方法：node.setAttribute(name,value)
例子：div.setAttribute("align","center")
jQuery：
prop()方法：
prop(name,value)
例子：$("div.green").prop({"align","value"})
prop(map)：參數map指：{屬性，值}
例子：$("div.green").prop({"id":"divid","align":"value"})
prop(name,function(index,oldvalue))
attr()方法：
attr(name,value)
attr(map)
attr(name,function(index,oldvalue))
上面兩種方法的差別：prop()添加checked這一類屬性較好。
訪問屬性：
DOM：
getAttribute()方法：node.getAttribute(name)
jQuery：
prop()方法：prop(name)
attr()方法：attr(name)
區別：attr()方法只用來返回默認的屬性值，或者初始值
如：$("input").attr("checked") //當複選框的狀態改變時，返回的值不會變
注：
上述方法只會獲取第一個匹配的元素
可以通過each()方法訪問所有匹配元素的屬性：
如：$("div").each(function(){
console.log($(this).prop("class"))
})
刪除屬性：
DOM：
removeAttribute()方法：node.removeAttribute
jQuery：
removeProp()方法：
例子：$("div.green").removeProp("id")
removeAttr()方法：
例子：$("div.green").removeAttr("id")
DOM操作之類操作：
添加樣式：
jQuery：
addClass()方法：增加類樣式
removeClass()方法：刪除類樣式
toggleClass()方法：切換類樣式
語法：toggleClass(className)
toggleClass(className,switch)
(switch：用來判斷樣式添加還是移除的boolean值）
toggleClass(function(index,class),[switch])
判斷樣式
DOM：
hasAttribute()方法：判斷是否擁有某個屬性，可以用來判斷是否擁有某個類
jQuery：
hasClass()方法
DOM操作之讀寫文本值：
讀寫HTML：
DOM：
innerHTML()方法
jQuery：
html()方法
讀寫文本：
DOM：
innerText()方法
jQuery：
text()方法
讀寫值：（這裏的值是指表單元素中的value屬性的值）
DOM：
通過屬性value獲取
jQuery：
val()方法
DOM操作之樣式表操作：
讀寫CSS樣式：
DOM：
藉助style屬性可以訪問行內樣式的值，
但是他沒有辦法訪問外部css樣式表（文檔內部樣式表和文檔外部樣式表）！！
藉助document對象的styleSheets對象訪問外部樣式表！！
獲取樣式表：document.styleSheets[0]//獲取第一個樣式表
獲取樣式表中的樣式：（考慮兼容性）
非IE瀏覽器：document.styleSheets[0].c***ules[0]
//獲取樣式表中的第一個樣式的
IE瀏覽器： document.styleSheets[0].rules[0]
寫入樣式：（考慮兼容性）
非IE瀏覽器：document.styleSheets[0].insertRule("rule",index)
insertRule("rule",index)：
rule：是一個完整的css樣式字符串
index：必須設置，當值爲0時，將樣式插入到樣式表末尾
IE瀏覽器：document.styleSheets[0].addRule("selector","style",index)
index：可以不設置，默認爲-1，表示樣式表的末尾
document.styleSheets[0].length//獲取樣式表中的樣式數目
jQuery:
css()方法：讀取或設置css樣式
例子： $("div").css("font-size","40px")
$("div").css({"font-size":"20px","color":"red"})
$("div").css("font-size")
絕對定位：
jQuery：
offset()方法：獲取匹配元素在當前視口的相對偏移
語法：offset()：返回一個對象包含top和left兩個屬性
offset(coordinates)：coordinates是一個對象，包含top和left屬性
offset(function(index,coords))：
function函數返回一個包含top和left屬性的對象
index：元素的索引位置
coords：元素的當前座標
例子：
var cood = new Object()
cood.top =120
cood.left = 120
$("div").offset(cood)
console.log($("div").offset())相對定位：
jQuery：
position()方法：獲取匹配元素的相對偏移位置。
設置大小：
jQuery：
width()和height()方法：讀寫元素的大小
語法：width()/height()
width(value)/height(value)
width(function(index,width))/height(function(index,width))
例子：
$("div.blue").width("150px").height("150px")
var w = $("div.green").width();
$("div.green").width(function(index,w){
return w/2;
})
innerHeight()、innerWidth()：返回元素的總寬高（包括寬高、內邊距和邊框高度）
outerHeight()、outerWidth()：返回元素的內容寬高（包括寬高和內邊距）
DOM操作之訪問文檔樹：
DOM：
使用ChildNode、parentNode、nextSibling、previousSibling、firstChild、lastChild屬性
jQuery：
children()：獲取當前元素的所有子元素；
next()：獲取當前元素的下一個相鄰元素；
prev()：獲取當前元素的上一個相鄰元素；
parent()：獲取當前元素的父元素
注意：這些方法返回的是jQuery對象。