Jquery基礎之DOM操作

全部是複製的，後期再弄，加油，加油！　

加上地址Jquery基礎之DOM操作

Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的接口，使用該接口可以輕鬆訪問頁面中所有的標準組件。DOM操作可以分爲三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。

　　每一個網頁都可以用DOM表示出來，每個DOM都可以看作是一棵DOM樹。下面的html頁面結構可以構建出一棵DOM樹，代碼：

View Code
　構建出的DOM樹如下：

　　JQuery中的DOM操作主要對包括：建【新建】、增【添加】、刪【刪除】、改【修改】、查【查找】【像數據庫操作】。下面的DOM操作將圍繞上面的DOM樹進行學習JQueryDOM操作。

　　一、查–查找DOM節點
　　　　查找節點非常容易，使用選擇器就能輕鬆完成各種查找工作。例：查找元素節點p返回p內的文本內容("p").text();例：查找元素節點p的屬性返回屬性名稱對應的屬性值 (“p”).attr(“title”),返回p的屬性title的值。

　　二、建–新建DOM節點
　　　　1、創建元素節點

　　　　　　創建元素節點並且把節點作爲

元素的子節點添加到DOM節點樹上。先創建元素點，創建元素節點使用Jquery的工廠函數()來完成，格式如下： (html),該方法會根據傳入的html字符串返回一個DOM對象，並將DOM對象包裝成一個JQuery對象後返回。創建一個元素節點JQuery代碼如下：

　　　　　　li1= (“

“)

　　　　　　代碼返回$li1就是一個由DOM對象包裝成的JQuery對象。把新建節點添加到DOM樹中JQuery代碼如下：

　　　　　　("ul").append( li1);

　　　　　　添加後頁面中只能看到

元素默認的”·”,由於沒有爲節點添加文本所以只顯示默認符號，下面創建文本節點。

　　　　　　PS:append()方法是添加DOM節點方法詳見增–添加DOM節點。

　　　　2、創建文本節點

　　　　　　使用JQuery的工廠函數$()同樣能夠創建文本節點，創建文本節點的JQuery代碼如下：

　　　　　　li2= (“

蘋果

“);

　　　　　　代碼返回$li2就是一個由DOM對象包裝成JQuery對象，把新建的文本節點添加到DOM樹中JQuery代碼如下：

　　　　　　("ul").append( li2);

　　　　　　添加後頁面中能看到”·蘋果”，右鍵查看頁面源碼發現新加的文本節點沒有title屬性。下面方法創建帶屬性的節點。

　　　　3、創建屬性節點

　　　　　　創建屬性節點同元素節點、文本節點一樣使用JQuery的工廠函數完成。創建屬性節點的JQuery代碼如下：

　　　　　　li3= (“

榴蓮

“);　　　　　　　

　　　　 　代碼返回$li3也是一個由DOM對象包裝成JQuery對象，把新建的屬性節點添加到DOM樹中JQuery代碼如下：

　　　　　　("ul").append( li3);

　　　　　　添加後頁面中能看到”·榴蓮”，右鍵查看頁面源碼發現新加的屬性節點有title=’榴蓮’屬性。

　　　三、增–添加DOM節點
　　　　　　動態新建元素不添加到文檔中沒有實際意義，將新建的節點插入到文檔中有多個方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

　　　　1、append()方法

　　　　　　append()方法向匹配的元素內部追加內容，　方法如下：$(“target”).append(element);例：

　　　　　　$(“ul”).append(“

香蕉

“);

　　　　　　該方法查找ul元素，然後向ul中添加新建的li元素。

　　　　2、appendTo()方法

　　　　　　appendTo()方法將所有匹配的元素追加到指定的元素中，該方法是append()方法的顛倒[操作主題的顛倒並非操作結果]操作。方法如下：$(element).appendTo(target);例：

　　　　　　 $(“

荔枝

”).appendTo(“ul”);

　　　　　　該方法新建元素li，然後把li添加到查找到的ul元素中。

　　　　3、prepend()方法

　　　　　　prepend()方法將每匹配的元素內部前置要添加的元素，方法如下：$(target).prepend(element);例：

　　　　　　$(“ul”).prepend(“

芒果

“)

　　　　　　該方法將查找元素ul然後將新建的li元素作爲ul子節點，且作爲ul的第一個子節點插入到ul中。

　　　　4、prependTo()方法

　　　　　　prependTo()方法將元素添加到每一個匹配的元素內部前置，方法如下：$(element).prependTo();例：

　　　　　　$(“

西瓜

“).prependTo(“ul”);

　　　　　　該方法將新建的元素li插入到查找到的ul元素中作爲ul的第一個子節元素。

　　　　5、after()方法

　　　　　　after()方法向匹配的元素後面添加元素，新添加的元素做爲目標元素後的緊鄰的兄弟元素。方法如下：$(target).after(element);例:

　　　　　　$(“p”).after(“新加段新加段新加段新加段新加段“);

　　　　　　方法將查找節點p，然後把新建的元素添加到span節點後面做爲p的兄弟節點。

　　　　6、insertAfter()方法

　　　　　　insertAfter()方法將新建的元素插入到查找到的目標元素後，做爲目標元素的兄弟節點。方法如下：$(element).insertAfter(target);例:

　　　　　　$(“

insertAfter操作

“).insertAfter(“span”);

　　　　　　方法將新建的p元素添加到查找到目標元素span後面，做爲目標元素後面的第一個兄弟節點。

　　　　7、before()方法

　　　　　　before()方法在每一個匹配的元素之前插入，做爲匹配元素的前一個兄弟節點。方法如下:$(target).before(element);例：

　　　　　　$(“p”).before(“下面是個段落“);

　　　　　　before方法查找每個元素p，將新建的span元素插入到元素p之前做爲p的前一個兄弟節點。

　　　　8、insertBefore()方法

　　　　　　insertBefore()方法將新建元素添加到目標元素前，做爲目標元素的前一個兄弟節點，方法如下:$(element).insertBefore(target);例:

　　　　　　$(“錨“).insertBefore(“ul”);

　　　　　　insertBefore()新建a元素，將新建的a元素添加到元素ul前，做爲ul的前一個兄弟節點。

　　　　　　增加元素的方法前四個是添加到元素內部，後四個是添加到元素外部的操作，有這些方法可以完成任何形式的元素添加。

　 　四、刪–刪除DOM節點操作
　　　　　　如果想要刪除文檔中的某個元素JQuery提供了兩種刪除節點的方法：remove()和empty();

　　　　1、remove()方法

　　　　　　remove()方法刪除所有匹配的元素，傳入的參數用於篩選元素，該方法能刪除元素中的所有子節點，當匹配的節點及後代被刪除後，該方法返回值是指向被刪除節點的引用，因此可以使用該引用，再使用這些被刪除的元素。方法如下：$(element).remove();例:

　　　　　　span= (“span”).remove();

　　　　　　$span.insertAfter(“ul”);

　　　　　　該示例中先刪除所有的span元素，把刪除後的元素使用$span接收，把刪除後的元素添加到ul後面做爲ul的兄弟節點。該操作相當於將所有的span元素以及後代元素移到ul後面。

　　　　2、empty()方法。

　　　　　　empty()方法嚴格來講並不是刪除元素，該方法只是清空節點，它能清空元素中的所有子節點。方法如下:$(element).empty();例：

　　　　　　$(“ul li:eq(0)”).empty();

　　　　　　該示例使用empty方法清空ul中第一個li的文本值。只能下li標籤默認符號”·“。

　　五、改–修改DOM節點操作
　　　　　　　修改文檔中的元素節點可以使用多種方法:複製節點、替換節點、包裹節點。

　　　　1、複製節點$(element).clone()

　　　　　　　複製節點方法能夠複製節點元素，並且能夠根據參數決定是否複製節點元素的行爲。方法如下:$(element).clone(true);例：

　　　　　　　　$(“ul li:eq(0)”).clone(true);

　　　　　　　該方法複製ul的第一個li元素，true參數決定複製元素時也複製元素行爲，當不復制行爲時沒有參數。

　　　　2、替換節點(element).repalcewith()、 (element).repalceAll()

　　　　　　　替換節點方法能夠替換某個節點，有兩種形式形式實現：replaceWith()和replaceAll().使用replaceWith方法使用後面的元素替換前面的元素，replaceAll方法使用前面的元素替換後面的元素，方法如下：(oldelement).replaceWith(newelement); (newelement).repalceAll(oldelement);例：　　　　　　　　　　　　　$(“p”).replaceWith(“我要留下“);該方法使用strong元素替換p元素。

　　　　　　　　$(“

替換strong

“).repalceAll(“strong”);該例使用h3元素替換所有的strong元素。

　　　　3、包裹節點(element).wrap()、 (element).wrapAll()、$(element).wrapInner()

　　　　　　　包裹節點方法使用其他標記包裹目標元素從而改變元素的顯示形式等，並且該操作不會破壞原始文檔的詞義。包裹節點有三種實現形式：wrap();wrapAll();wrapInner();

　　　　　　　wrap()方法如下：$(dstelement).wrap(tag);例：

　　　　　　　　$(“p”).wrap(““);該示例方法使用b標籤包裹所有的p元素每個元素都使用b標籤包裹。

　　　　　　　wrapAll()方法如下：$(dstelement).wrapAll(tag);例：

　　　　　　　　$(“p”).wrapAll(““);訪示例方法使用b標籤包裹所有的p元素，所有的p元素標籤用一個b標籤包裹。

　　　　　　　　wrapInner()方法如下：$(dstelement).wrapInner(tag);例：

　　　　　　　　$(“strong”).wrapInner(““);該示例使用b標籤包裹每個一strong元素的子元素。

　　　　Dom元素的其他操作:屬性操作、樣式操作、設置和獲取HTML,文本和值、遍歷節點操作、Css-Dom操作。

　　　　1、屬性操作attr()和removeAttr()

　　　　　　attr()方法能夠獲取元素屬性，也能能夠設置元素屬性。方法如下，當attr(para1)方法有個參數時候用於獲得當前元素的para1的屬性值，當attr(para1,attrValue)有兩個參數時候設置當前元素的屬性名爲para1的屬性值爲attrValue;例：

　　　　　　 $(“p”).attr(“title”);該示例用於獲得p元素的title屬性值。

　　　　　　 $(“p”).attr(“title”,”你最喜歡的水果”);該示例設置p元素的title屬性值爲”你最喜歡的水果”;

　　　　　　如果一次設置多個屬性值可以使用“名/值”對形式，例：

　　　　　　 $(“p”).attr({“title”:”你最喜歡的水果”,”name”:”水果”})。該示例一次設置兩個屬性值。

　　　　　　removeAttr()方法用於刪除特定的屬性，方法是在參數中指定屬性名。例：

　　　　　　$(“p”).removeAttr(“name”);該方法就是移除p元素的name屬性。

　　　　 2、樣式操作addClass()、removeClass()、toggleClass()和hasClass()

　　　　　　添加樣式addClass()方法，使用該方法對目標元素添加相應的樣式，方法如下：$(element).addClass();例：

　　　　　　 $(“p”).addClass(“ul”);該示例設置元素p的樣式爲ul。

　　　　　　移除樣式removeClass()方法，使用該方法移除目標元素的指定樣式，方法如下：$(element).removeClass();例：

　　　　　　 $(“p”).removeClass(“ul”);該救命去除掉p元素的ul類樣式。

　　　　　　切換樣式toggleClass()方法，使用該方法切換目標元素的樣式，方法如下：$(element).toggleClass();例：

　　　　　　$(“p”).toggleClass(“ul”);該方法來回切換【添加刪除實現切換】元素p的樣式ul.

　　　　　　判斷元素是否使用了樣式(element).hasClass(),方法如下： (element).hasClass(class);例：

　　　　　　alert($(“p”).hasClass(“ul”));打印出p元素是否有ul樣式。

　　　　　　PS:addClass()和attr()方法設置樣式的不同，attr方法把元素的屬性名對應的屬性值設爲方法中的參數值，addClass()則把屬性值

添加到屬性名對應的屬性值中。例：已有元素

元素樣式

,使用attr()和addClass()分別添加新樣式。

　　　　　　$(“p”).attr(“class”,”another”).結果是

元素樣式