版權(quán)聲明乌奇，文章首發(fā)于本人慕課網(wǎng)賬號(hào)：人生還有多少個(gè)二十年减响，歡迎轉(zhuǎn)載耽梅，轉(zhuǎn)載請(qǐng)注明出處
說明：本文涉及的內(nèi)容多硕淑，為保持整體脈絡(luò)的清晰彬坏，對(duì)個(gè)別疑難點(diǎn)將另附鏈接，并不定期對(duì)文章的錯(cuò)漏之處進(jìn)行修正...
創(chuàng)建節(jié)點(diǎn)
eg:
// 用三種方式創(chuàng)建三個(gè)段落（包括標(biāo)簽節(jié)點(diǎn)童太、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)）并添加到文檔中去
$("<p></p>").attr({title:"p1",id:"p1"}).html("這是第一個(gè)段落").appendTo("body");
$("<p></p>",{title:"p2",id:"p2"}).html("這是第二個(gè)段落").appendTo("body");
$("<p title='p3' id='p3'>這是第三個(gè)段落</p>").appendTo("body");
查找節(jié)點(diǎn)
eg:
// 采用上面已經(jīng)創(chuàng)建的節(jié)點(diǎn)，下面進(jìn)行查找標(biāo)簽節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)的操作
var p1 = $("p:first"); // 獲取第一個(gè)段落節(jié)點(diǎn)
console.log(p1); // 打印標(biāo)簽節(jié)點(diǎn) result: Object[p#p1]
console.log(p1.attr("title")); // 打印屬性節(jié)點(diǎn) result: p1
console.log(p1.text()); // 打印文本節(jié)點(diǎn) result: 這是第一個(gè)段落
插入節(jié)點(diǎn)
1. $(target).append(content)/$(content).appendTo(target) - 在被選元素的內(nèi)部的結(jié)尾插入內(nèi)容
$(target).prepend(content)/$(content).prependTo(target) - 在被選元素的內(nèi)部的開頭插入內(nèi)容
$(target).after(content)/$(content).insertAfter(target) - 在被選元的素外部之后插入內(nèi)容
$(target).before(content)/$(content).insertBefore(target) - 在被選元素的外部之前插入內(nèi)容
詳情請(qǐng)看：《一眼看破插入節(jié)點(diǎn)的8個(gè)方法》 http://www.imooc.com/article/12047
替換節(jié)點(diǎn)
1.$(target).replaceWith(content)/$(content).replaceAll(target)-將目標(biāo)元素替換為內(nèi)容
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.如果替換之前书释，已經(jīng)為元素綁定事件翘贮，替換后原先綁定的事件將會(huì)與被替換的元素一起消失，需要在新元素上重新綁定事件
復(fù)制節(jié)點(diǎn)
eg: $(this).clone(); //僅復(fù)制節(jié)點(diǎn)爆惧，不復(fù)制元素所綁定的事件
$(this).clone(true); //既復(fù)制節(jié)點(diǎn)狸页，也復(fù)制元素所綁定的事件
如果不理解上面的兩句話，自己打一下下面的具體代碼扯再，運(yùn)行一次芍耘，應(yīng)該就能明白了:
1)html代碼：
<input type="button" value="復(fù)制節(jié)點(diǎn)">
<input type="button" value="復(fù)制節(jié)點(diǎn),同時(shí)復(fù)制節(jié)點(diǎn)的行為">
2）引入jQuery庫（根據(jù)自己的情況自行引入）
3）script代碼：
$(function(){
$("input:eq(0)").click(function(){
$(this).clone().appendTo("body");
});
$("input:eq(1)").click(function(){
$(this).clone(true).appendTo("body");
});
});
刪除節(jié)點(diǎn)
$(element).remove()返回值是一個(gè)指向刪除的節(jié)點(diǎn)的引用，因此可以在以后再使用這些元素熄阻，但是它綁定的事件斋竞、附加的數(shù)據(jù)無法再次使用了
$(element).detach()使用之后，重新追加該元素秃殉，所有綁定的事件坝初、附加的數(shù)據(jù)都能夠使用
$(element).empty()嚴(yán)格來說并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)钾军，它能清空元素中的所有后代節(jié)點(diǎn)
eg://下面兩個(gè)例子意在解釋empty()
1）$("<div><p><span>人生有多少個(gè)二十年</span></p></div>").appendTo("body");
console.log($("div").html()); //result: <p><span>人生有多少個(gè)二十年</span></p>
$("p").empty();
console.log($("div").html()); //result: <p></p>
2）$(element).empty()類比：
你可以把element看做電腦的回收站鳄袍，把$(element).empty()看做是清空回收站的操作，把包含在element中的標(biāo)簽節(jié)點(diǎn)看做回收站中的文件夾吏恭，把包含在element中的文本節(jié)點(diǎn)看做是回收站中的文件拗小，而清空回收站就是把回收站里的所有文件夾和文件都徹底刪除，并且回收站自身并不會(huì)被刪除樱哼，這就類似于清空節(jié)點(diǎn)哀九，該操作把某節(jié)點(diǎn)里的所有后代標(biāo)簽節(jié)點(diǎn)包括文本節(jié)點(diǎn)都徹底刪除，但該節(jié)點(diǎn)本身沒有被刪除唇礁。
包裹節(jié)點(diǎn)
wrap()將所有匹配的元素進(jìn)行單獨(dú)的包裹,在原來的元素的外部實(shí)施包裹
wrapAll()將匹配的元素集合當(dāng)做一個(gè)整體來包裹勾栗，在元素的外部實(shí)施包裹
wrapInner()經(jīng)所有匹配的元素進(jìn)行單獨(dú)的包裹，在原來的元素額內(nèi)部實(shí)施包裹
詳情請(qǐng)看：《一眼看破包裹節(jié)點(diǎn)的方法》 http://www.imooc.com/article/12193
遍歷節(jié)點(diǎn)
1.往上遍歷
1)parent() 方法返回被選元素的直接祖先元素盏筐，即父元素围俘。
2)parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
3)parentsUntil() 方法返回介于兩個(gè)給定元素之間的所有祖先元素琢融。
4)closest()方法從元素本身開始界牡，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素漾抬。
2.往下遍歷
1)children() 方法返回被選元素的所有直接后代元素宿亡，即子元素。（跟parent（）方向恰好相反纳令，一個(gè)是往上找挽荠，一個(gè)是往下查）
2)find() 方法返回被選元素的后代元素克胳，一路向下直到最后一個(gè)后代。（跟parents（）方向恰好相反）
3.同級(jí)遍歷
1)siblings() 方法返回被選元素的所有同輩元素圈匆。
2)next() 方法返回被選元素的下一個(gè)同輩元素漠另。
nextAll() 方法返回被選元素的后面所有的同輩元素。
nextUntil() 方法返回介于兩個(gè)給定參數(shù)之間的所有的同輩元素跃赚。
3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三個(gè)方法的原理是一樣的（都是找同輩元素）笆搓，但是方向恰好相反（next()/ nextAll()/nextUntil() 是往后找，而prev()/ prevAll() / prevUntil() 則是往前找）纬傲。
4.過濾（相當(dāng)于基本過濾選擇器）
1)first() 方法返回被選元素的首個(gè)元素满败。
last() 方法返回被選元素的最后一個(gè)元素。
eq() 方法返回被選元素中帶有指定索引號(hào)的元素叹括。
2)filter() 方法允許規(guī)定一個(gè)標(biāo)準(zhǔn)算墨。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回领猾。
3)not() 方法返回不匹配標(biāo)準(zhǔn)的所有元素米同。（not() 方法與 filter() 相反。）
attentions:
1)此小節(jié)內(nèi)容較多摔竿，容易混淆面粮，可以結(jié)合我寫過的另一篇文章來輔助理解：
《純干貨！一切關(guān)于jquery選擇器 》 http://www.imooc.com/article/11319
cssDOM
1).在css()方法中继低，如果屬性中帶有“-”符號(hào)熬苍，例如font-size和background-color屬性，如果在設(shè)置這些屬性的值的時(shí)候不帶引號(hào)袁翁，那么就要用駝峰命名法柴底，例如：
$("p").css({ fontSize:"30px",backgroundColor:"#888888"});
如果帶上了引號(hào)，既可以寫成"font-size",也可以寫成“fontSize"粱胜。
總之柄驻，帶上引號(hào)是一個(gè)好習(xí)慣。
2).獲取高度值用css()和height()的差別：
css()方法獲取的高度值與樣式的設(shè)置有關(guān)焙压，可能得到"auto",也可能得到“10px”之類的字符串鸿脓；而height()方法獲取的高度值則是元素在頁面中的實(shí)際高度，與樣式的設(shè)置無關(guān)涯曲，并且不帶單位
3).css ()與addClass()設(shè)置樣式的區(qū)別
1）可維護(hù)性：addClass()優(yōu)于css()
2）靈活性：css()優(yōu)于addClass()
3）樣式值:css()可以獲取到指定的樣式值野哭，而addClass()無法獲取指定的屬性的值。
4）樣式優(yōu)先級(jí)：css()的樣式優(yōu)先級(jí)高于addClass()幻件。（理由：addClass()方法是通過增加class名的方式拨黔，那么這個(gè)樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時(shí)候附加到元素上绰沥；css()處理的是內(nèi)聯(lián)樣式篱蝇，直接通過元素的style屬性附加到元素上）
總結(jié)：兩個(gè)方法各有利弊贺待，一般是靜態(tài)的結(jié)果，都確定了布局的規(guī)則态兴，可以用addClass的方法狠持，增加統(tǒng)一的類規(guī)則；如果是動(dòng)態(tài)的HTML結(jié)構(gòu)瞻润，在不確定規(guī)則，或者經(jīng)常變化的情況下甜刻，一般多考慮css()方式绍撞。
4).總結(jié)樣式操作：
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()方法設(shè)置或返回元素的寬度/高度（不包括內(nèi)邊距、邊框或外邊距）得院。
- innerWidth()/innerHeight()方法返回元素的寬度/高度（包括內(nèi)邊距）傻铣。
- outerWidth()/outerHeight()方法返回元素的寬度/高度（包括內(nèi)邊距和邊框）。
- outerWidth(true)/outerHeight(true)方法返回元素的寬度/高度（包括內(nèi)邊距祥绞、邊框和外邊距）非洲。
attentions:
根據(jù)盒子模型，可知：
- width()/height()獲得的是盒子模型最內(nèi)層（content)的寬蜕径、高
- innerWidth()/innerHeight()獲取的是盒子模型內(nèi)兩層(content两踏、padding)的寬、高
- outerWidth()/outerHeight()獲取的是盒子模型內(nèi)三層的(content兜喻、padding梦染、border)寬、高
- outerWidth(true)/outerHeight(true)獲取的是盒子模型的整個(gè)盒子（content朴皆、padding帕识、border、margin）的寬遂铡、高
盒子模型圖：
盒子模型
