jQuery學習之旅 Item4 細說DOM操作 · 你不知道的jQuery

# jQuery—–DOM操作(文檔處理) Dom是Document Object Model的縮寫，意思是文檔對象模型。DOM是一種與瀏覽器、平臺、語言無關的接口，使用該接口可以輕松訪問頁面中所有的標準組件。DOM操作可以分為三個方面即DOM Core(核心)、HTM-DOM和CSS-DOM。每一個網頁都可以用DOM表示出來，每個DOM都可以看作是一棵DOM樹。下面的html頁面結構可以構建出一棵DOM樹，代碼：　　 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" <title>DOM Demo</title> </head> <body> <p title="選擇你最喜歡的水果.">你最喜歡的水果是？</p> <ul> <li title="蘋果">蘋果</li> <li title="橘子">橘子</li> <li title="菠蘿">菠蘿</li> </ul> </body> </html> ~~~ 構建出的DOM樹如下： ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a0961dd1.jpg "") JQuery中的DOM操作主要對包括：建【新建】、增【添加】、刪【刪除】、改【修改】、查【查找】【像數據庫操作】。下面的DOM操作將圍繞上面的DOM樹進行學習JQueryDOM操作。 ### 一、查–查找DOM節點查找節點非常容易，使用選擇器就能輕松完成各種查找工作。例：查找元素節點p返回p內的文本內容 ~~~ $("p").text(); ~~~ 例：查找元素節點p的屬性返回屬性名稱對應的屬性值 ~~~ $("p").attr("title"),返回p的屬性title的值。 ~~~ ### 二、建–新建DOM節點 **1、創建元素節點** 創建元素節點并且把節點作為`<ul>`元素的子節點添加到DOM節點樹上。先創建元素點，創建元素節點使用Jquery的工廠函數`$()`來完成，格式如下：`$(html)`,該方法會根據傳入的html字符串返回一個DOM對象，并將DOM對象包裝成一個JQuery對象后返回。創建一個元素節點JQuery代碼如下： ~~~ $li1=$("<li></li>") ~~~ 代碼返回`$li1`就是一個由DOM對象包裝成的JQuery對象。把新建節點添加到DOM樹中JQuery代碼如下： ~~~ $("ul").append($li1); ~~~ 添加后頁面中只能看到`<li>`元素默認的”·”,由于沒有為節點添加文本所以只顯示默認符號，下面創建文本節點。 **PS:**append()方法是添加DOM節點方法詳見增–添加DOM節點。 **2、創建文本節點** 使用JQuery的工廠函數`$()`同樣能夠創建文本節點，創建文本節點的JQuery代碼如下： ~~~ $li2=$("<li>蘋果</li>"); ~~~ 代碼返回`$li2`就是一個由DOM對象包裝成JQuery對象，把新建的文本節點添加到DOM樹中JQuery代碼如下： ~~~ $("ul").append($li2); ~~~ 添加后頁面中能看到”·蘋果”，右鍵查看頁面源碼發現新加的文本節點沒有title屬性。下面方法創建帶屬性的節點。 **3、創建屬性節點** 創建屬性節點同元素節點、文本節點一樣使用JQuery的工廠函數完成。創建屬性節點的JQuery代碼如下： ~~~ $li3=$("<li title='榴蓮'>榴蓮</li>");　　　 ~~~ 代碼返回`$li3`也是一個由DOM對象包裝成JQuery對象，把新建的屬性節點添加到DOM樹中JQuery代碼如下： ~~~ $("ul").append($li3); ~~~ 添加后頁面中能看到”·榴蓮”，右鍵查看頁面源碼發現新加的屬性節點有title=’榴蓮’屬性。 ### 三、增–添加DOM節點 **1、插入節點** ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a0976bd4.jpg "") **(1). 節點追加-父子關系** ~~~ $(“ul”).append(“<li>強</li>”); 后置追加 $(“ul”).prepend(“<li>強</li>”); 前置追加 $(“ul”).append(jquery對象); 把指定對象后置追加 (jquery對象如果是頁面上已有的元素節點，那么就被挪動位置到ul里邊) $(“ul”).prepend(jquery對象); 把指定對象前置追加 $(“<li>強</li>”).appendTo(“ul”); 被追加（后置） $(“<li>強</li>”).prependTo(“ul”); 被追加（前置） ~~~ ~~~ <script> function f1(){ //主動：追加字符串、已有節點對象、新節點對象 $("#one").append("<li>其實</li>");//==>被追加到第一個ul的最后一個li $("#one").prepend("<li>good</li>");//==>被追加到第一個ul的第一個li $("#one").append($("#two li:eq(1)"));//==>“家”被移動到第一個ul的最后一個li，原來的li被移除 $("#one").append($("<li>abc</li>")); //documentCreateElement(); //被動：沒有找到的節點直接創建新節點、已有節點則執行移動操作 $("<li>年</li>").appendTo("#one");//==>這里不用$符號$("#one"); $("<li>新</li>").prependTo("#one"); $("#two li:eq(3)").appendTo("#one"); } </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ **(2). 節點追加—兄弟關系** ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a098cd09.jpg "") ~~~ $(“div”).after(“<span>hello</span>”); 后置追加兄弟節點 $(“div”).after(jquery對象); 把一個jquery對象后置追加為兄弟節點 $(“#one”).insertAfter(‘對象標志’); 已有對象被追加為對象標志的兄弟節點 $(“<span></span>”).insertAfter(“#ul”) 一個新的span對象被追加為ul的兄弟節點 ~~~ ~~~ <script> function f1(){ //主動兄弟追加節點 $("#one").after("<span>tomorrow</span>");//第一個ul之后追加了一個span的兄弟節點 $("#one").after($("p"));//p節點被移動到第一個ul之后 //被動兄弟節點追加 $("<span>hello</span>").insertAfter("#one"); //新節點被追加 $("ul:eq(2)").insertAfter("#one"); //已有節點被追加 } </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <p>road</p> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ ### 四、刪–刪除DOM節點操作 **1. 節點刪除** empty() 父節點刪除子節點 remove() 刪除匹配到的節點 ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a09a02ec.jpg "") ~~~ <script> function f1(){ //節點刪除 //$("#one").empty();//第一個ul的所有li被刪除，ul還在，一個空標簽 $("#two li:gt(0)").remove();//刪除匹配到的節點 } </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <p>road</p> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ ### 五、改–修改DOM節點操作 **1. 節點替換** ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a09b4832.jpg "") ~~~ <script> function f1(){ //節點替換(被動) //"四"被"喬"替換,利用已有節點進行替換 $("#one li:eq(0)").replaceWith($("#two li:eq(0)")); //利用新節點替換 $("#one li:eq(0)").replaceWith("<li>五</li>"); $("#one li:eq(0)").replaceWith($("<li>六</li>")); //主動替換 $("<li>七</li>").replaceAll($("#one li:eq(2)")); } </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <p>road</p> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ **2. 節點復制** clone(false) 復制節點本身和子級節點內容 clone(true) 復制節點本身和子級節點內容,同時復制節點的事件 ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a09c9674.jpg "") ~~~ <script> function f1(){ //clone(true)同時復制節點和對應的事件 var qiao = $("#two li:eq(0)").clone(true); $("#one").append(qiao); } $(function(){ $("#two li").each(function(){ //每個li被點擊，就輸出對應的文本內容 $(this).click(function(){ alert($(this).html()); }); }); }); </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <p>road</p> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ **3. 節點包裹 —子父關系** ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a09dd08d.jpg "") ~~~ <script> function f1(){ //每個匹配節點都給找一個父級 $("ul").wrap("<div id='pear'></div>");//三個ul每個都被div包裹 $("#one").wrap($("p")); //已有節點被追加(復制)第一個ul被p包裹 //多個節點共用一個父級 $("ul").wrapAll("<div id='pear'></div>");//三個ul共同被一個div包裹 //把子內容包裹起來 //每個元素的子內容都被包裹 $("ul").wrapInner("<div id='pear'></div>");每個ul的所有li元素被div包裹 } </script> <body> <ul id="one"> <li>四</li> <li>大</li> <li>家</li> <li>族</li> </ul> <ul id="two"> <li>喬</li> <li>家</li> <li>大</li> <li>院</li> </ul> <ul> <li>老大</li> </ul> <p></p> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ ### 六. 遍歷節點操作children()、next()、prev()、siblings()和closest() - children()——方法用于取得匹配元素的子元素集合，只匹配子元素不考慮任何后代元素。方法如下：$(selector).children();例： ~~~ $("$("body").children().length;\\該示例獲得body元素的子元素個數； ~~~ - next()方法——用于匹配元素的下一個兄弟節點，方法如下:$(selector).next();例： ~~~ $("p").next().html();\\該示例獲得p元素的下一個兄弟節點的html內容。 ~~~ - prev()方法——用于匹配元素的上一個兄弟節點，方法如下：$(selector).prev();例： ~~~ 　$("ul").prev().text();\\該示例獲得ul元素的上一個兄弟節點的文本內容。 ~~~ - siblings方法——-用于匹配目標元素的所有兄弟元素，方法如下：$(selector).siblings();例： ~~~ $("p").slibings();\\示例獲得p元素的所有兄弟節點元素。 ~~~ - closest()方法——用來取得最近的匹配元素，首先檢查當前元素是否匹配如果匹配則直接返回，否則繼續向上查找父元素中符合條件的元素返回，如果沒有匹配的元素則返回空JQuery對象。 ps:注意closest()、parent()、parents()方法的區別： ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a0a01870.jpg "")