DOM操作的分類DOM Core 並不專屬於javascript，任何一種支援DOM的程式設計語言都可以使用它。它的用途並非僅限與處理網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔。例如XMLjavascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，這些都是Dom Core的組成部分。使用DOM Core來擷取表單對象的方法 document.getElementByTagName("from");使用DOM Core來擷取某元素的src屬性的方法： element.getAttribute("src");構建DOM元素<body> <p title="選擇你最喜歡的水果">你最喜歡的水果是?</p> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul></body>使用jQeruy在文檔數上尋找節點非常容易，可以通過在第2章介紹的jQuery選取器來完成。 1.尋找元素節點 擷取元素節點並列印出它的常值內容，jQuery代碼如下: var $li = $("ul li:eq(1)"); 擷取<ul>裡第2個<li> 節點 var li_txt=$li.text(); //擷取第2個<li>元素節點的常值內容 alert(li_txt); //列印常值內容，這裡會列印出橘子 以上代碼擷取了<ul>元素裡第2個<li>節點，並將它的常值內容"橘子"列印出來 2.尋找屬性節點 利用jQuery 選取器尋找到需要的元素後，就可以使用attr()方法來擷取它的各種屬性的值.attr()方法得參數可以是一個，也可以是兩個。當參數是一個時，則是要查詢的屬性的名字。 擷取屬性節點並列印出它的常值內容，jQuery代碼如下： var $para = $("p"); //擷取<p>節點 var p_txt=$para.attr("title"); //擷取<p>元素節點屬性title alert(p_txt); //列印title屬性值 建立節點 在dom 操作中，常常需要動態建立HTML內容，是文檔在瀏覽器裡面的呈現效果發生變法，並且達到各種各樣的人機互動的目的。 1. 建立元素節點 例如要建立兩個<li>元素節點，並且要把它們作為<ul>元素節點的子節點添加到DOM節點樹上。 (1)建立兩個<li>新元素。 (2)將這兩個新元素插入文檔中。 第(1)個步驟可以使用jQuery的工廠函數$()來完成。 $(html); $(html)方法會根據傳入的HTML標記字串，建立一個DOM對象，並將這個DOM對象封裝成一個jQuery對象後返回。 首先建立兩個<li>元素,jQuery代碼如下: $("ul").append($li_1); //添加到<ul>節點中，使之能在網頁中顯示 $("ul").append($li_2); //可以採取鏈式寫法:$("ul").append($li_1).append($li_2); 注意事項： (1)動態建立的新元素節點不會被自動添加到文檔中，而是需要使用其他方法將其插入文檔中。 (2)當建立單個元素時，要注意閉合標籤和使用標準的XHTML格式。 例如建立一個<p> 元素，使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大寫的$("<P/>"); 2.建立文檔節點 var $li_1= $("<li>香蕉</li>"); //建立一個<li> 元素，包括元素節點和文本節點，香蕉就是建立的文本節點 var $li_2 =$("<li>雪梨</li>"); //建立一個<li> 元素，包括元素節點和文本節點，雪梨就是建立的文本節點。 $("ul").append($li_1); //添加到<ul>節點中，使之能在網頁中顯示 $("ul").append($li_2); //添加到<ul>節點中，使之能在網頁中顯示 以上代碼所示，建立文本節點就是在建立元素節點時直接把常值內容寫出來，然後使用append()等方法將他們添加到文檔中就可以了。 注意事項： 無論$(html)中的HTML代碼多麼複雜，都要使用相同的方式來建立。 例如$("<li><em>這是</em><b>一個</b><a href='#'>複雜的組合</a></li>"); 3.建立屬性節點 建立屬性及節點與建立文本節點類似，也是直接在建立元素節點時一起建立。 jQuery代碼如下: var $li_1=$("<li title='香蕉'>香蕉</li>");//建立一個<li>元素，包含元素節點，文本節點和屬性節點 其中title='香蕉'就是建立的屬性節點 var $li_2=$("<li title='雪梨'>雪梨</li>");//建立一個<li>元素 包括元素節點，文本節點和屬性節點，其中title=‘雪梨’就是建立的屬性節點 $("ul").append($li_1); $("ul").append($li_2); //添加到<ul> 節點中，使之能在網頁中顯示 插入節點 動態建立HTML元素並沒有世界用處，還需要將新建立的元素插入文檔中，將新建立的節點插入文檔最簡單的辦法是，讓它成為這個文檔的某個節點的子節點。 使用append(),它會在元素內部追加新建立的內容。 jQuery中還有提供了其他幾種插入節點的方法。 方法 描述 樣本 append() 向每個匹配的元素內部追加內容 HTML代碼 <p>我想說:</p> jQuery代碼: $("p").append("<b>你好</b>"); 結果: <p>我想說:<b>你好</b></p> appendTo() 將所有匹配的元素追加到指定的元素中， 實際上，使用該方法是顛倒了常規的$(A).append(B)的操作，即不是將B追加到A中，而是將A追加到B中 HTML 程式碼 <p>我想說:<p> jQuery代碼： $("<b>你好</b>").appendTo("p"); 結果: <p>我想說：<b>你好</b></p> prepend() 向每個匹配的元素內部前置內容 HTML代碼: <p>我想說:</p > jQuery代碼: $("p").prepend("<b>你好</b>");結果<p><b>你好</b>我想說:</p> prependTo() 將所有匹配的元素前置到指定的元素中，實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中。HTML 程式碼 <p>我想說:</p> jQuery代碼: $("<b>你好</b>").prependTo("p"); 結果<p><b>你好</b>我想說<p> after() 在每個匹配的元素之後插入內容 HTML代碼 <p>我想說:<p> jQuery代碼: $("p").after("<b>你好<b>"); 結果: <p>我想說:</p><b>你好</b> insertAfter() 將所有匹配的元素插入到指定元素的後面，與after()顛倒了 HTML代碼<p> 我想說</p> jQuery代碼：$("<b>你好</b>").insertAfter("p"); 結果<p>我想說：</p><b>你好</b> before() 將每個匹配的元素之前插入內容 HTML代碼 <p>我想說:</p> jQuery 代碼：$("p").before("<b>你好</br>"); 結果<b>你好</b>我想說:</p> insertBefore() 將所有匹配的元素插入到指定的元素的前面，實際上，使用該方法是顛倒了常規的before的操作 $("<b> 你好</b>").insertBefore("p"); 結果:<b>你好</b><p>我想說:</p> 刪除節點 如果文檔中某一個元素多餘，那麼應將其刪除，jQuery提供了兩種刪除節點的方法，即remove() 和empty() 1.remove()方法 作用是從DOM中刪除所有匹配的元素，傳入的參數用於根據jQuery運算式類篩選元素。 例如刪除圖3-11中<ul>節點中的第2個<li>元素節點，jQuery代碼如下: $("ul li:eq(1)").remove();//擷取第2個<li>元素節後，將它從網頁中移除 當某個節點用remove()方法刪除後，該節點所包含的所有後代節點將同時被刪除，這個方法得放回值是一個指向已被刪除的節點的引用，因此可以在以後再使用這些元素。 下面的jQuery代碼說明元素用remove()方法刪除後，還是可以繼續使用的。 var $li = $("ul li:eq(1)").remove();//擷取第2個<li>元素節點後，將它從網頁中刪除 $li.appendTo("ul");//把剛刪除的節點又重新添加到<ul>元素裡 可以直接使用appendTo()方法得特性來簡化以上代碼： $("ul li:eq(1)").appendTo("ul"); //appendTo()方法也可以用來移動元素 //移動元素時首先從文檔上刪除此元素，然後將該元素插入得到文檔中的指定節點。 另外remove()方法也可以通過傳遞參數來選擇性地刪除元素 $("ul li").remove("li[title!='菠蘿']"); //將<li>元素屬性title不等於"菠蘿" 的<li>元素刪除。 2.empty()方法 嚴格來講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有後台節點。 $("ul li:eq(1)").empty(); //擷取第2個<li>元素節點後，清空此元素裡的內容，注意是元素裡面。 使用firebud查看橘子節點發生變化 <li title='橘子'/> 3.複製節點 複製節點也是常用的DOM操作之一，例如購入車，使用者不僅可以通過單擊商品下方的選擇按鈕購買相應的產品，也可以通過滑鼠拖動商品 並將其放到購物車中，這個商品拖動功能就是用的複製節點，將使用者選擇的商品所處的節點元素複製一次，並將其跟隨滑鼠移動，從而達到以下購物車的效果 $("ul li").click(function(){ $(this).clone().appendTo("ul");//複製當前單擊的節點，並將它追加到<ul>元素中 }); //在頁面中點擊"菠蘿"後，列表最下方出現新節點"菠蘿"。 $(this).clone(true).appendTo("body");//注意參數true 在clone()方法傳遞了一個參數true，它的含義是複製元素的同時複製元素中所綁定的事件，因此該元素的副本也同樣具備複製功能。 替換節點 如果要替換某個節點，jQuery提供了相應的方法，即replaceWith和 replaceAll() replaceWith()方法得做喲偶那個是將所有匹配的元素都替換成指定的HTML或者DOM元素。 例如要將網頁中<p title="選擇你最喜歡的水果">你最喜歡的水果是?</p> 替換成<strong> 你最不喜歡的水果是?</strong> 可以使用如下jQuery代碼： $("p").replaceWith("<strong>你最不喜歡的水果是?"); 也可以使用jQuery中另一個方法repalceAll()來實現，該方法與replaceWith()方法得作用相同，只是顛倒了replaceWith的操作。 $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p"); 注意： 如果在替換之前，已經為元素繫結了事件，替換後原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。 4. 包裹節點 如果要將某個節點用其他標記包裹起來，jQuery提供了相應的方法，wrap()，該方法對於需要在文檔中插入額外的結構化標記非常有用，而且不會破壞原始文檔的語義。 jQuery代碼如下： $("strong").wrap("<b></b>");//用<b>標籤把<strong> 元素包裹起來 得到的結果如下： <b><strong title="選擇你最喜歡的水果"> 你最喜歡的水果是?</strong></b> 1.wrapAll()方法 該方法將會將所有匹配的元素用一個元素包裹。它不同於wrap()方法，wrap()方法將所有的元素進行單獨的包裹。 $("strong").wrap("<b></b>"); 2.wrapinner()方法 該方法將每一個匹配的元素的子內容(包括文本節點) 用其他結構化的標記包裹起來，例如可以使用它來包裹<strong> 標籤的子內容:jQuery代碼如下： $("strong").wrapInner("<b></b>"); 運行代碼後，發現<strong>標籤內的內容被一對<b>標籤包裹了。 <strong title="選擇你最喜歡的水果"><b>你最喜歡的水果是?</b></strong> 屬性操作 在jQuery 中，用attr() 方法來擷取和設定元素屬性，removeAtt() 方法來刪除元素屬性。 1.擷取屬性和設定屬性 如果要擷取<p>元素的屬性title,那麼只需要給attr()方法傳遞一個參數，即屬性名稱。 var $para=$("p"); //擷取<p>節點 var p_txt=$para.attr("title"); //擷取<p>元素節點屬性title 如果要設定<p>元素的屬性title的值，也可以使用同一個方法，不同的是，需要傳遞兩個參數即屬性名稱和對應的值。 jQuery代碼如下： $("p").attr("title","your title");//設定單個的屬性值 //為同一個元素設定多個屬性值 $("p").attr({"title":"your title","name":"test"});//將一個 "名值" 形式的對象設定為匹配元素的屬性。 jQuery中的很多方法都是同一個函數實現擷取(getter)和設定(setter)的，例如上面的attr()方法，即能設定元素屬性的值，也能擷取元素屬性的值，類似的還有html(),text(),height(),width(),val(),css()等方法。 2.刪除屬性 有時候需要刪除文件項目的特定屬性，可以使用removeAttr()方法 刪除<p>元素的title屬性 $("p").removeAttr("title"); 操作樣式 擷取樣式和設定樣式 HTML代碼如下： <p class="myclass" title="選擇你最喜歡的水果"> 你最喜歡的水果是?</p> class 也是<p>元素的屬性，因此擷取class 和設定class都可以使用attr()方法。 var p_class = $("p").attr("class");//擷取<p>元素的class 可以使用attr()方法來設定<p>元素的class，jquery代碼如下： $("p").attr("class","high");//設定<p>元素的class為high 他是將原來的class替換為class，而不是在原來的基礎上追加新的class 追加樣式 jQuery提供了專門的addClass()方法來追加樣式，為了使例子更為容易理解，首先在<style>標籤裡添加另一組樣式 <style> .high{ font-weight:bold; color:red; } .another{ font-style:italic; color:blue; } //在網頁中追加class類的按鈕. $("input:eq(2)").click(function(){ $("p").addClass("another"); //給<p>元素追加"another"類 }) attr() 和addClass()的區別 用途 追加樣式 設定樣式 對同一個網頁元素操作 <p>test</p> 第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");第1次結果 <p class="high">test</p> 再次使用方法 $("p").addClass("another"); $("p").attr("class","another");結果 <p class="high another"> test</p> <p class="another"> test</p>3移除樣式如果單擊某一個按鈕時，刪除class的某個值，那麼可以使用addClass()方法相反的removeClass()方法來完成，它的作用是從匹配的元素中刪除全部或者指定的class如下jQuery代碼來刪除 $("p").removeClass("high");//移除<p>元素中為"high"的class //如果要把<p>元素的兩個class都刪除，就要使用removeClass() $("p").removeClass("high").removeClass("another"); //jquery提供了更簡單的方法 $("p").removeClass("high another"); 另外，還可以使用removeClass()方法得一個特性來完成同樣的效果，它不帶參數的時候會將 class的值全部刪除. $("p").removeClass(); 轉場樣式 $toggleBtn.toggle(function(){ //3 },function(){ //4 }); toggle()方法此處的作用是交替執行代碼3和4兩個函數，如果元素原來是顯示的，則隱藏它，如果隱藏的，則顯示它，此時，toggle()方法主要是控制行為上的重複切換。 判斷是否含有某個樣式 hasClass可以用來判斷元素中是否有某個class，如果有，則返回true，否則返回false $("p").hasClass("another"); //jQuery內部實際上是調用了is()方法來完成這個功能的，該方法等價於 $("p").is(".another") 1.設定和擷取HTML，文本和值 html()方法 $("P").html();//擷取元素的html代碼 2.text() 方法 $("p").text(); //擷取<p>元素的常值內容 //text()可以對常值內容設定內容 $("p").text("你最喜歡的水果是?"); //設定<p>元素的常值內容 3.val()方法 val()方法取值 通過上面的例子可以發現val()方法不僅能設定元素的值，同時也能擷取元素的值，另外val() 方法還有另外一個用處，就是它能select(下拉式清單方塊)，checkbox(多選框)和radio(單選框) 相應的選項被選中，在表單操作中會經常用到。 //使用val設定選中項 $("#single").val("選擇2號"); //如果要使下拉式清單的第2項和第3項被選中 $("#multiple").val(["選擇2號"，"選擇3號"]); //以數組的形式賦值 使多個文字框被選中 $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); 也可以使用attr()方法來實現同樣的功能 $("#single option:eq(1)").attr("selected",true); //設定屬性selected $("[value=radio2]:radio").attr("checked",true);1 children()方法 該方法用於取得匹配元素的子項目集合 var $body = $("body") .children(); var $p=$("p").children(); var $ul = $("ul").children(); alert($body.length); alert($p.length); alert($ul.length);2.next方法 該方法用於取得匹配元素後面緊鄰的同輩元素。 從dom樹的結構可以知道<p>元素的下一個同輩節點時<ul>，因此可以通過next() 方法來擷取<ul> 元素 var $p1 = $("p").next();//取得緊鄰<p>元素後的同輩元素 <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul> prev()方法 該方法用於取得匹配元素前面緊鄰的同輩元素。 從DOM樹的結構中可以知道<ul>元素的上一個同輩節點時<p>，因此可以通過prev()方法類擷取<p>元素 var $ul = $("ul").prev(); //取得緊鄰<ul>元素前得同輩元素 得到的結果將是: <p title="選擇你最喜歡的水果">你最喜歡的水果是?</p> 4.siblings()方法 該方法用於取得匹配元素前後所有的同輩元素。 在第1章導覽列的例子中有段代碼如下： $(".has_children").click(function() { $(this).addClass("highlight"); //為當前元素增加highlight類 .children("a").show().end() .siblings().removeClass("highlight") .children("a").hide();}) Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
