版權聲明，文章首發于本人慕課網賬號：人生還有多少個二十年，歡迎轉載，轉載請注明出處
說明：本文涉及的內容多，為保持整體脈絡的清晰，對個別疑難點將另附鏈接，并不定期對文章的錯漏之處進行修正...
創建節點
eg:
// 用三種方式創建三個段落（包括標簽節點、屬性節點和文本節點）并添加到文檔中去
$("<p></p>").attr({title:"p1",id:"p1"}).html("這是第一個段落").appendTo("body");
$("<p></p>",{title:"p2",id:"p2"}).html("這是第二個段落").appendTo("body");
$("<p title='p3' id='p3'>這是第三個段落</p>").appendTo("body");
查找節點
eg:
// 采用上面已經創建的節點，下面進行查找標簽節點、屬性節點和文本節點的操作
var p1 = $("p:first"); // 獲取第一個段落節點
console.log(p1); // 打印標簽節點 result: Object[p#p1]
console.log(p1.attr("title")); // 打印屬性節點 result: p1
console.log(p1.text()); // 打印文本節點 result: 這是第一個段落
插入節點
1. $(target).append(content)/$(content).appendTo(target) - 在被選元素的內部的結尾插入內容
$(target).prepend(content)/$(content).prependTo(target) - 在被選元素的內部的開頭插入內容
$(target).after(content)/$(content).insertAfter(target) - 在被選元的素外部之后插入內容
$(target).before(content)/$(content).insertBefore(target) - 在被選元素的外部之前插入內容
詳情請看：《一眼看破插入節點的8個方法》 http://www.imooc.com/article/12047
替換節點
1.$(target).replaceWith(content)/$(content).replaceAll(target)-將目標元素替換為內容
eg:
$("<ul><li>html</li><li>css</li></ul>").appendTo("body");
console.log($("ul").html()); //result: <li>html</li><li>css</li>
$("<li>html5</li>").replaceAll($("ul li:eq(0)"));
console.log($("ul").html()); //result: <li>html5</li><li>css</li>
$("ul li:eq(1)").replaceWith("<li>css3</li>");
console.log($("ul").html()); //result: <li>html5</li><li>css3</li>
2.如果替換之前，已經為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件
復制節點
eg: $(this).clone(); //僅復制節點，不復制元素所綁定的事件
$(this).clone(true); //既復制節點，也復制元素所綁定的事件
如果不理解上面的兩句話，自己打一下下面的具體代碼，運行一次，應該就能明白了:
1)html代碼：
<input type="button" value="復制節點">
<input type="button" value="復制節點,同時復制節點的行為">
2）引入jQuery庫（根據自己的情況自行引入）
3）script代碼：
$(function(){
$("input:eq(0)").click(function(){
$(this).clone().appendTo("body");
});
$("input:eq(1)").click(function(){
$(this).clone(true).appendTo("body");
});
});
刪除節點
$(element).remove()返回值是一個指向刪除的節點的引用，因此可以在以后再使用這些元素，但是它綁定的事件、附加的數據無法再次使用了
$(element).detach()使用之后，重新追加該元素，所有綁定的事件、附加的數據都能夠使用
$(element).empty()嚴格來說并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點
eg://下面兩個例子意在解釋empty()
1）$("<div><p><span>人生有多少個二十年</span></p></div>").appendTo("body");
console.log($("div").html()); //result: <p><span>人生有多少個二十年</span></p>
$("p").empty();
console.log($("div").html()); //result: <p></p>
2）$(element).empty()類比：
你可以把element看做電腦的回收站，把$(element).empty()看做是清空回收站的操作，把包含在element中的標簽節點看做回收站中的文件夾，把包含在element中的文本節點看做是回收站中的文件，而清空回收站就是把回收站里的所有文件夾和文件都徹底刪除，并且回收站自身并不會被刪除，這就類似于清空節點，該操作把某節點里的所有后代標簽節點包括文本節點都徹底刪除，但該節點本身沒有被刪除。
包裹節點
wrap()將所有匹配的元素進行單獨的包裹,在原來的元素的外部實施包裹
wrapAll()將匹配的元素集合當做一個整體來包裹，在元素的外部實施包裹
wrapInner()經所有匹配的元素進行單獨的包裹，在原來的元素額內部實施包裹
詳情請看：《一眼看破包裹節點的方法》 http://www.imooc.com/article/12193
遍歷節點
1.往上遍歷
1)parent() 方法返回被選元素的直接祖先元素，即父元素。
2)parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
3)parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
4)closest()方法從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。
2.往下遍歷
1)children() 方法返回被選元素的所有直接后代元素，即子元素。（跟parent（）方向恰好相反，一個是往上找，一個是往下查）
2)find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。（跟parents（）方向恰好相反）
3.同級遍歷
1)siblings() 方法返回被選元素的所有同輩元素。
2)next() 方法返回被選元素的下一個同輩元素。
nextAll() 方法返回被選元素的后面所有的同輩元素。
nextUntil() 方法返回介于兩個給定參數之間的所有的同輩元素。
3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三個方法的原理是一樣的（都是找同輩元素），但是方向恰好相反（next()/ nextAll()/nextUntil() 是往后找，而prev()/ prevAll() / prevUntil() 則是往前找）。
4.過濾（相當于基本過濾選擇器）
1)first() 方法返回被選元素的首個元素。
last() 方法返回被選元素的最后一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
2)filter() 方法允許規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
3)not() 方法返回不匹配標準的所有元素。（not() 方法與 filter() 相反。）
attentions:
1)此小節內容較多，容易混淆，可以結合我寫過的另一篇文章來輔助理解：
《純干貨！一切關于jquery選擇器 》 http://www.imooc.com/article/11319
cssDOM
1).在css()方法中，如果屬性中帶有“-”符號，例如font-size和background-color屬性，如果在設置這些屬性的值的時候不帶引號，那么就要用駝峰命名法，例如：
$("p").css({ fontSize:"30px",backgroundColor:"#888888"});
如果帶上了引號，既可以寫成"font-size",也可以寫成“fontSize"。
總之，帶上引號是一個好習慣。
2).獲取高度值用css()和height()的差別：
css()方法獲取的高度值與樣式的設置有關，可能得到"auto",也可能得到“10px”之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設置無關，并且不帶單位
3).css ()與addClass()設置樣式的區別
1）可維護性：addClass()優于css()
2）靈活性：css()優于addClass()
3）樣式值:css()可以獲取到指定的樣式值，而addClass()無法獲取指定的屬性的值。
4）樣式優先級：css()的樣式優先級高于addClass()。（理由：addClass()方法是通過增加class名的方式，那么這個樣式是在外部文件或者內部樣式中先定義好的，等到需要的時候附加到元素上；css()處理的是內聯樣式，直接通過元素的style屬性附加到元素上）
總結：兩個方法各有利弊，一般是靜態的結果，都確定了布局的規則，可以用addClass的方法，增加統一的類規則；如果是動態的HTML結構，在不確定規則，或者經常變化的情況下，一般多考慮css()方式。
4).總結樣式操作：
js中：
1）通過類名： element.className = theClassName或者element.setAttribute("class",theClassName)
eg: document.getElementById("p1").className = "active";
或document.getElementById("p1").setAttribute("class","active");
2）通過element.style
eg: document.getElementById("p1").style.color="blue";
jquery中：
1）通過類名： $(element).addClass(theClassName)或者$(element).attr("class",theClassName)
eg: $("p1").addClass("active");
或$("p1").attr("class","active");
2）通過css()
eg: $("p1").css("color","blue");
jQuery-尺寸
- width()/height()方法設置或返回元素的寬度/高度（不包括內邊距、邊框或外邊距）。
- innerWidth()/innerHeight()方法返回元素的寬度/高度（包括內邊距）。
- outerWidth()/outerHeight()方法返回元素的寬度/高度（包括內邊距和邊框）。
- outerWidth(true)/outerHeight(true)方法返回元素的寬度/高度（包括內邊距、邊框和外邊距）。
attentions:
根據盒子模型，可知：
- width()/height()獲得的是盒子模型最內層（content)的寬、高
- innerWidth()/innerHeight()獲取的是盒子模型內兩層(content、padding)的寬、高
- outerWidth()/outerHeight()獲取的是盒子模型內三層的(content、padding、border)寬、高
- outerWidth(true)/outerHeight(true)獲取的是盒子模型的整個盒子（content、padding、border、margin）的寬、高
盒子模型圖：
盒子模型
