摘要：本人的兩篇原創(chuàng)文章純干貨一切關(guān)于選擇器和純干貨之操作解析，發(fā)布不到個月，就被博客園某賬號認(rèn)領(lǐng)為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文章中關(guān)于我的點點滴滴，刪除地干干凈凈，很專業(yè)。

　　本人的兩篇原創(chuàng)文章純干貨！一切關(guān)于jquery選擇器和純干貨！jQuery之DOM操作解析，發(fā)布不到1個月，就被博客園某賬號 認(rèn)領(lǐng) 為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文章中關(guān)于我的點點滴滴，刪除地干干凈凈，很專業(yè)。我不打算貼出他的賬號，只是希望部分程序員能學(xué)會尊重他人的版權(quán)。

版權(quán)聲明，文章首發(fā)于本人慕課網(wǎng)賬號：人生還有多少個二十年，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處

說明：本文涉及的內(nèi)容多，為保持整體脈絡(luò)的清晰，對個別疑難點將另附鏈接，并不定期對文章的錯漏之處進行修正...

一、創(chuàng)建節(jié)點

    eg:   //用三種方式創(chuàng)建三個段落（包括標(biāo)簽節(jié)點、屬性節(jié)點和文本節(jié)點）并添加到文檔中去
        $("
").attr({title:"p1",id:"p1"}).html("這是第一個段落").appendTo("body");
        $("
",{title:"p2",id:"p2"}).html("這是第二個段落").appendTo("body");
        $("
這是第三個段落
").appendTo("body");

二、查找節(jié)點

    eg:        //采用上面已經(jīng)創(chuàng)建的節(jié)點，下面進行查找標(biāo)簽節(jié)點、屬性節(jié)點和文本節(jié)點的操作
        var p1 = $("p:first");//獲取第一個段落節(jié)點
        console.log(p1);//打印標(biāo)簽節(jié)點         result: Object[p#p1]
        console.log(p1.attr("title"));//打印屬性節(jié)點        result: p1
        console.log(p1.text());//打印文本節(jié)點           result: 這是第一個段落

三、插入節(jié)點

    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)容 

        詳情請看：《一眼看破插入節(jié)點的8個方法》    http://www.imooc.com/article/12047

四、替換節(jié)點

    1.$(target).replaceWith(content)/$(content).replaceAll(target)-將目標(biāo)元素替換為內(nèi)容
        eg:    
            $("
html
css
").appendTo("body");
            console.log($("ul").html());        //result:    
html
css
            $("
html5
").replaceAll($("ul li:eq(0)"));
            console.log($("ul").html());        //result: 
html5
css
            $("ul li:eq(1)").replaceWith("
css3
");
            console.log($("ul").html());        //result: 
html5
css3
    
        2.如果替換之前，已經(jīng)為元素綁定事件，替換后原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件
    

五、復(fù)制節(jié)點

eg: $(this).clone();        //僅復(fù)制節(jié)點，不復(fù)制元素所綁定的事件
        $(this).clone(true);    //既復(fù)制節(jié)點，也復(fù)制元素所綁定的事件
    如果不理解上面的兩句話，自己打一下下面的具體代碼，運行一次，應(yīng)該就能明白了:
    1)html代碼：
        
        
    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é)點

$(element).remove()返回值是一個指向刪除的節(jié)點的引用，因此可以在以后再使用這些元素，但是它綁定的事件、附加的數(shù)據(jù)無法再次使用了
$(element).detach()使用之后，重新追加該元素，所有綁定的事件、附加的數(shù)據(jù)都能夠使用
$(element).empty()嚴(yán)格來說并不是刪除節(jié)點，而是清空節(jié)點，它能清空元素中的所有后代節(jié)點
   eg://下面兩個例子意在解釋empty()
      1）$("
人生有多少個二十年
").appendTo("body");
        console.log($("div").html());        //result:    
人生有多少個二十年
        $("p").empty();
        console.log($("div").html());        //result:    

      2）$(element).empty()類比：
          你可以把element看做電腦的回收站，把$(element).empty()看做是清空回收站的操作，把包含在element中的標(biāo)簽節(jié)點看做回收站中的文件夾，把包含在element中的文本節(jié)點看做是回收站中的文件，而清空回收站就是把回收站里的所有文件夾和文件都徹底刪除，并且回收站自身并不會被刪除，這就類似于清空節(jié)點，該操作把某節(jié)點里的所有后代標(biāo)簽節(jié)點包括文本節(jié)點都徹底刪除，但該節(jié)點本身沒有被刪除。

七、包裹節(jié)點

  wrap()將所有匹配的元素進行多帶帶的包裹,在原來的元素的外部實施包裹
  wrapAll()將匹配的元素集合當(dāng)做一個整體來包裹，在元素的外部實施包裹
  wrapInner()經(jīng)所有匹配的元素進行多帶帶的包裹，在原來的元素額內(nèi)部實施包裹

詳情請看：《一眼看破包裹節(jié)點的方法》    http://www.imooc.com/article/12193

八、遍歷節(jié)點

1.往上遍歷
        1)parent() 方法返回被選元素的直接祖先元素，即父元素。
        2)parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()
        3)parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
        4)closest()方法從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。

    2.往下遍歷
        1)children() 方法返回被選元素的所有直接后代元素，即子元素。（跟parent（）方向恰好相反，一個是往上找，一個是往下查）
        2)find() 方法返回被選元素的后代元素，一路向下直到最后一個后代。（跟parents（）方向恰好相反）

    3.同級遍歷
        1)siblings() 方法返回被選元素的所有同輩元素。
        2)next() 方法返回被選元素的下一個同輩元素。
          nextAll() 方法返回被選元素的后面所有的同輩元素。
             nextUntil() 方法返回介于兩個給定參數(shù)之間的所有的同輩元素。
        3)prev(), prevAll() 以及 prevUntil() 方法的跟上面三個方法的原理是一樣的（都是找同輩元素），但是方向恰好相反（next()/ nextAll()/nextUntil() 是往后找，而prev()/ prevAll() / prevUntil() 則是往前找）。

    4.過濾（相當(dāng)于基本過濾選擇器）
        1)first() 方法返回被選元素的首個元素。
          last() 方法返回被選元素的最后一個元素。
          eq() 方法返回被選元素中帶有指定索引號的元素。
        2)filter() 方法允許規(guī)定一個標(biāo)準(zhǔn)。不匹配這個標(biāo)準(zhǔn)的元素會被從集合中刪除，匹配的元素會被返回。
        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()方法中，如果屬性中帶有“-”符號，例如font-size和background-color屬性，如果在設(shè)置這些屬性的值的時候不帶引號，那么就要用駝峰命名法，例如：
        $("p").css({    fontSize:"30px",backgroundColor:"#888888"});
  如果帶上了引號，既可以寫成"font-size",也可以寫成“fontSize"。
  總之，帶上引號是一個好習(xí)慣。

  2).獲取高度值用css()和height()的差別：
    css()方法獲取的高度值與樣式的設(shè)置有關(guān)，可能得到"auto",也可能得到“10px”之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設(shè)置無關(guān)，并且不帶單位

  3).css ()與addClass()設(shè)置樣式的區(qū)別
    1）可維護性：addClass()優(yōu)于css()
    2）靈活性：css()優(yōu)于addClass()
    3）樣式值:css()可以獲取到指定的樣式值，而addClass()無法獲取指定的屬性的值。
    4）樣式優(yōu)先級：css()的樣式優(yōu)先級高于addClass()。（理由：addClass()方法是通過增加class名的方式，那么這個樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時候附加到元素上；css()處理的是內(nèi)聯(lián)樣式，直接通過元素的style屬性附加到元素上）
    總結(jié)：兩個方法各有利弊，一般是靜態(tài)的結(jié)果，都確定了布局的規(guī)則，可以用addClass的方法，增加統(tǒng)一的類規(guī)則；如果是動態(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-尺寸

1.    width()/height()                      方法設(shè)置或返回元素的寬度/高度（不包括內(nèi)邊距、邊框或外邊距）。
      innerWidth()/innerHeight()            方法返回元素的寬度/高度（包括內(nèi)邊距）。
      outerWidth()/outerHeight()            方法返回元素的寬度/高度（包括內(nèi)邊距和邊框）。
      outerWidth(true)/outerHeight(true)    方法返回元素的寬度/高度（包括內(nèi)邊距、邊框和外邊距）。
attentions:
    1)根據(jù)盒子模型，可知：
            width()/height()獲得的是盒子模型最內(nèi)層（content)的寬、高
            innerWidth()/innerHeight()獲取的是盒子模型內(nèi)兩層(content、padding)的寬、高
            outerWidth()/outerHeight()獲取的是盒子模型內(nèi)三層的(content、padding、border)寬、高
            outerWidth(true)/outerHeight(true)獲取的是盒子模型的整個盒子（content、padding、border、margin）的寬、高

盒子模型圖：