Jquerry：jquery中的DOM操作<一>

標籤：c   style   a   get   使用   資料   

    之前兩天學習了Jquery強大的選取器，今天學習了一部分Jquery對DOM的操作，下面我將把自己今天的成果分享給大家，那些菜鳥們，你們是否需要鞏固之前所學？

    首先需要知道，DOM操作分為3個方面：DOM Core、HTML-DOM、CSS-DOM。我們很多情況下用到的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的組成部分。而document.forms(擷取表單對象)、element.src(擷取元素的src屬性)是HTML-DOM中的方法，這是我以前沒用過的。element.style.coler="red"這種對擷取style各種屬性的方法則屬於CSS-DOM。

    Jquery中的DOM操作包括以下部分

    1、尋找節點

      尋找元素的節點：這是我們之前介紹過的選取器實現的功能。

      尋找屬性節點：當擷取到元素的節點後，若是想要擷取該元素的相關屬性，可使用Jquery中的attr()方法，這個方法中需要的參數是想要尋找的屬性的名稱，例如title。

    2、建立節點

    插入節點的方法有以下幾種：

    例：<p> world </p>

    append():向匹配元素內部追加內容。$("p").append("<b> hello </b>"),結果是：<p> world <b> hello </b></p>。

    appendTo():將匹配元素追加到指定元素中。$("<b> hello </b>").appendTo("p")，結果是：<p> world <b> hello </b></p>。

    prepend():向每個匹配元素中前置內容。$("p").prepend("<b> hello </b>")，結果是：<p><b> hello </b> world </p>。

    propendTo():將匹配元素前置到指定元素中。$("<b> hello </b>").prepend("p")，結果是：<p><b> hello </b> world </p>。

    after():在每個匹配元素之後插入內容。$("p").after("<b> hello </b>"),結果是：<p> world <b> hello </b></p>。

    insertAfter():將匹配元素插入到指定元素的後面。$("<b> hello </b>").after("p"),結果是：<p> world <b> hello </b></p>。

    before():在每個匹配元素之前插入內容。$("p").before("<b> hello </b>"),結果是：<p><b> hello </b> world </p>。

    insertBefore():將匹配元素插入到指定元素的前面。$("<b> hello </b>").insertBefore("p"),結果是：<p><b> hello </b> world </p>。

    另插入的元素中可以包含文本和屬性：$("p").append("<span title=‘hello‘> hello </span>")。

    3、刪除節點

    刪除節點的方法有三種：remove()、detach()、empty()。

    remove():var delLi = $("ul li:eq(1)").remove()。刪除ul下第二個li節點。使用remove()刪除節點後，被刪除的節點的子節點也會被刪除，這個方法的傳回值是指向被刪除節點的引用，所以可以利用傳回值再添加此節點。

    detach():此方法和remove()用法相同，它們的區別在於detach()刪除節點後，再添加此節點，該節點原有的事件、繫結資料都會保留下來。

    empty():$("ul li:eq(1)").empty(),這個方法嚴格來說不是一個刪除的方法，它是清空節點的方法。它能清空選中節點的所有子節點。

    4、複製節點

    複製節點使用的方法是clone()。$("ul li").clone().appendTo("ul") 註：複製ul中所有li節點，並將複製的節點添加到ul中，這樣，在ul中就有了兩份原有的li節點了！

    哎，今天加班了，一直加到八點半，回家了就九點半了，今天就學習到這了，明天繼續。各位菜鳥，晚安！！！