jQueryDom操作全解

說到底，jQuery是一個JavaScript庫，離不開對Dom的操作。今天就總結一下jQuery中的Dom操作

Dom插入幷包裹現有內容

wrap(wrappingElement)

描述：在每一個匹配的元素外層包上一個HTML元素

<div></div>
<script>
    $(function(){
        $("div").wrap("<div class="wrapper"></div>")
    })
</script>

上面代碼表示在選中的div外層在包裹一層div

unwrap()

描述：將匹配的元素父級刪除，保留自身和兄弟元素（如果存在）在原來的位置。不接受任何參數

<div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("p").unwrap();
    })
</script>

上述代碼的意思是把匹配到的元素的父級元素刪除，保留自身和兄弟元素還在原來的位置。此時上述代碼div元素刪除掉了，p元素和span元素仍然存在原來的位置。

wrapAll(wrappingElement)

描述：在所有匹配的元素碗麪包裹一層HTML元素

<p></p>
<script>
    $(function(){
        $("p").wrapAll("<div></div>")
    })
</script>

wrapInner(wrappingElement)

描述：在匹配元素裏的內容外包裹一層HTML結構

<p>innerHTML</p>
<script>
    $(function(){
        $("p").wrapInner("<div></div>")    //<p><div>inner</div></p>
    })
</script>

Dom插入現有元素內

append()

描述：在每個匹配元素的末尾處插入參數內容，相當於原生的appendChild()方法

<div></div>
<script>
    $(function(){
        var str = "<p>123</p>";
        $("div").append(str);
    })
</script>

當然也可以在頁面中選中已有的元素加入當另一個元素內，相當於剪切效果。

appendTo()

描述：將匹配的元素插入到目標元素的最後面（內部插入）。

這個和上面是相同的效果，只是匹配參數不同。上面是把目標元素插入到匹配的元素的最後面。這個是把匹配的元素插入到目標元素的最後面

<div></div>
<script>
    $(function(){
        $("<p></p>").appendTo($("div"))
    })
</script>

html()

描述：獲取匹配集合中的第一個匹配元素的HTML內容，或者設置每一個匹配元素的HTML內容

相當於原生JS的innerHTML

<div>123</div>
<script>
    $(function(){
        $("div").html();    //123
        $("div").html("456")
    })
</script>

prepend()

描述：將目標元素插入到匹配元素內的最前面（內部插入）

<div></div>
<script>
    $(function(){
        $("div").prepend("<p></p>")
    })
</script>

同樣的這個也是插入，與append()不同的是，append()是在匹配元素的最後一個子元素處插入，這個方法是在第一個子元素處插入。

prependTo()

描述：將目標元素插入到匹配元素內的最前面

<div></div>
<script>
    $(function(){
        $("<p></p>").prependTo($("div"))
    })
</script>

text()

描述：得到匹配元素集合中每個元素的合併文本，包括他們的後代，設置匹配元素的中的每個元素的文本內容爲指定內容。

<div>123</div>
<script>
    $(function(){
        $("div").text();
    })
</script>

Dom移除

detach()

描述：從Dom中去除掉所有匹配的元素，使用這個方法的時候會遍歷Dom文檔

當沒有參數的時候是把匹配的元素全部刪除，當有參數的時候，刪除匹配元素中的指定的元素。

<p></p>
<div>
    <p></p>
</div>
<script>
    $(function(){
        $("p").detach();    //刪除Dom文檔中所有的p元素
        $("p").detach("div p") //刪除div下的p元素
    })
</script>

empty()

描述：從Dom中移除匹配元素的所有子元素，不接受任何參數

<div>
    <p></p>    
</div>
<script>
    $(function(){
        $("div").empty();
    })
</script>

remove()

描述：將匹配集合中的元素從Dom中移除，（同時移除元素上的事件和jQuery數據）

<div></div>
<script>
    $(function(){
        $("div").remove()
    })
</script>

Dom替換

replaceAll()

描述：用匹配的元素替換目標元素

<p></p>
<script>
    $(function(){
        $("<span>替換</span>").replaceAll($("p"))
    })
</script>

replaceWith()

描述：用匹配的內容去替換目標元素。並返回被刪除的目標元素的集合

<p></p>
<script>
    $(function(){
        console.log($("<span></span>").replaceWith($("p")));
    })
</script>

CSS屬性

css()

描述：獲取/設置一個或多個CSS屬性

當參數爲1個的時候表示獲取該屬性的值，當參數爲兩個得時候表示設置屬性和值，當需要設置多個屬性值的時候可以用對象的形式設置。

<div style="width:100px;height:100px"></div>
<script>
    $(function(){
        $("div").css("height");    //獲取height的值
        $("div").css("background-color","red")    //設置背景顏色爲紅色
        $("div").css({
            border: "1px solid red",
            color : "red",        //設置多個屬性的值
        })
    })
</script>

height():(不包括margin、padding、border)

描述：獲取匹配元素集合中每個元素的當前計算高度值，設置每個匹配元素的高度值（參數爲數值）

這個高度不包括margin，padding。border

<div style="width:100px;height:100px;padding:10px;margin:10px"></div>
<script>
    $(function(){
        $("div").height();    //100
        $("div").height(200)    //設置高度值
    })
</script>

width() : (不包括margin、padding、border)

描述：獲取匹配元素集合中每個元素的當前計算寬度值，設置每個匹配元素的寬度值（參數爲數值）

這個高度不包括margin，padding。border

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").width();    //100
        $("div").width(200)    //設置寬度值
    })
</script>

innerHeight

描述：爲匹配元素集合中獲取第一個元素的當前計算高度值，包括padding，但不包括border，不可以接受參數

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").innerHeight();    //120
    })
</script>

innerWidth()

描述：爲匹配元素集合中獲取第一個元素的當前計算寬度值，包括padding，但不包括border，不可以接受參數

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").innerWidth();    //120
    })
</script>

outerHeight()

描述：獲取元素集合中第一個元素的當前計算高度值，包括padding、border和選擇性的margin。

返回一個整數（不包含px）表示值，或如果在一個空集合上調用該方法，則會返回null。

參數爲bool類型，默認值爲false，不包含margin，當爲true時候計算值包括了margin。

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").outHeight();    //122
        $("div").outHeight(true)    //142
    })
</script>

outWidth()

描述：獲取元素集合中第一個元素的當前計算寬度值，包括padding、border和選擇性的margin。

返回一個整數（不包含px）表示值，或如果在一個空集合上調用該方法，則會返回null。

參數爲bool類型，默認值爲false，不包含margin，當爲true時候計算值包括了margin。

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").outWidth();    //122
        $("div").outWidth(true)    //142
    })
</script>

offset()

描述：在匹配的元素集合中，獲取的第一個元素的當前座標，座標相對於文檔、設置匹配的元素集合中每一個元素的座標，座標相對於文檔。

返回值是一個對象，參數也是一個對象

$(function(){
        var div  = $('.box');
        console.log(div.offset());
        div.offset({
             top : 300,
             left : 500,
        })
})

position()

描述：獲取匹配元素中第一個元素的當前座標，相對於距離該元素最近的而且被定位過得祖先元素

<div style="position:absolute">
    <p></p>
</div>
<script>
    $(function(){
        $("p").position()    //div
    })
</script>

scrollLeft()

描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置，設置每個匹配元素的水平滾動條位置

參數爲數值

$(function(){
     $('.content').scrollLeft(300);
     console.log($('.content').scrollLeft());
})

scrollTop()

描述：獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置，設置每個匹配元素的垂直滾動條位置。

參數爲數值

$(function(){
     $('.content').scrollTop(300);
     console.log($('.content').scrollTop());
})

複製元素

clone()

描述：創建一個匹配的元素集合深度拷貝副本，append方法相當於剪切，這個相當於複製

不接受任何參數，結合appendTo和append來使用。

<p></p>
<div></div>
<script>
    $(function(){
        $("p").clone().appendTo("div");
    })
</script>

Dom元素插入現有元素外

after()

描述：在匹配元素集合中的每個元素後面插入參數所指定的內容作爲兄弟節點。

$(function(){
     $('p').after("<div>後面插入</div>");
})

insertAfter()

描述：在目標元素後面插入集合中每個匹配的元素（注：插入的元素作爲目標元素的兄弟元素）。

$(function(){
     $('<div>後面插入</div>').insertAfter($('p'));
})

before()

描述：根據參數設定，在匹配元素的前面插入內容（注：外部插入）

$(function(){
       $('p').before("<div>前面插入</div>");
})

insertBefore()

描述：在目標元素前面插入集合中每個匹配的元素（注：插入的元素作爲目標元素的兄弟元素）。

$(function(){
    $("<div>前面 插入</div>").insertBefore($('p'));
})

主頁傳送門