純乾貨！jQuery之DOM操做解析

時間 2019-11-06

標籤乾貨 jquery dom 解析欄目 JQuery 简体版

原文原文鏈接

版權聲明，文章首發於本人慕課網帳號：人生還有多少個二十年，歡迎轉載，轉載請註明出處html

說明：本文涉及的內容多，爲保持總體脈絡的清晰，對個別疑難點將另附連接，並不按期對文章的錯漏之處進行修正...html5

1、建立節點jquery

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");

2、查找節點css3

eg:        //採用上面已經建立的節點，下面進行查找標籤節點、屬性節點和文本節點的操做
        var p1 = $("p:first");//獲取第一個段落節點
        console.log(p1);//打印標籤節點         result: Object[p#p1]
        console.log(p1.attr("title"));//打印屬性節點        result: p1
        console.log(p1.text());//打印文本節點           result: 這是第一個段落

3、插入節點程序員

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

4、替換節點app

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.若是替換以前，已經爲元素綁定事件，替換後原先綁定的事件將會與被替換的元素一塊兒消失，須要在新元素上從新綁定事件

5、複製節點佈局

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");
                });
            });

6、刪除節點this

$(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中的文本節點看作是回收站中的文件，而清空回收站就是把回收站裏的全部文件夾和文件都完全刪除，而且回收站自身並不會被刪除，這就相似於清空節點，該操做把某節點裏的全部後代標籤節點包括文本節點都完全刪除，但該節點自己沒有被刪除。

7、包裹節點spa

wrap()將全部匹配的元素進行單獨的包裹,在原來的元素的外部實施包裹
  wrapAll()將匹配的元素集合當作一個總體來包裹，在元素的外部實施包裹
  wrapInner()經全部匹配的元素進行單獨的包裹，在原來的元素額內部實施包裹

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

8、遍歷節點

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

9、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");

10、jQuery-尺寸

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

盒子模型圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。