Jquery操作DOM(筆記1)

本文歡迎轉載,但必須在文章顯眼處保留原文位址

http://blog.163.com/[email protected]/blog/static/1218198712010118115844618/

  介紹    DOM是Document Object Modeule的縮寫，一般來說，DOM操作分成3個方面。   1、DOM Core     DOM Core并不專屬于javascript，任何一種支援DOM的程式設計語言都可以使用它，用途也遠不止僅限于網頁，也可以用來處理任何一種使用标記語言編寫出來的文檔，如XML。     例如：document,getElementsByTagName("form");//使用DOM Core來擷取表單對象的方法。    2、HTML-DOM     在使用Javascript和DOM為HTML檔案編寫腳本時，有許多屬于HTML-DOM的屬性，HTML-DOM的出現甚至比DOM Core還要早，他提供了一些更簡明的記号來描述各種HTML元素的屬性。     例如：document.forms //HTML-DOM提供了一個forms對象。   PS:可以看出，擷取對象、屬性即可以用DOM Core來實作民，也可以用HTML-DOM實作。   3、CSS-DOM      CSS-DOM是針對CSS的操作,在javascript中，CSS-DOM主要的作用是擷取和設定style對象的各種屬性，由此達到網頁呈現出各種不同的效果.     例如：element.style.color="red";//設定某元素的字型顔色的方法。

常用方法    1.查找元素節點      var $li = $("ul li:eq(0)");//擷取ul标記下的第一個li,也可以寫成 $("#ulID li:eq(0)");

   2.查找元素屬性 　　　利用jquery的attr()方法來擷取元素的各種屬性的值，attr()方法的參數可以是一個，也可以是兩個。          當參數是一個時，則是要查詢的屬性名稱。          當參數是兩個時，則可以設定屬性的值。       alert($("#id").attr("title")); //輸出元素的title屬性.一個參數       $("#id").attr("title","改變title值"); //改變元素的title屬性值.二個參數

   3.添加元素節點       $(html) 簡單說明一下$(html)方法會根據傳入的html标記字元串建立一個dom對象，并将這個dom對象包裝成一個jquery對象傳回，總之就是把标記所有html代碼都放到$()工廠裡面就行了！       例：           var $htmlLi = $("  <li title='香蕉'>香蕉</li>");  //建立DOM對象          var $ul = $("ul");   //擷取UL對象          $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li清單

      下面列出部分插入節點的方法

方法	描述	示例
Append()	向每個比對的元素内追加内容	HTML代碼 <ul></ul> JQuery代碼 $(“ul”).append(“<li>AA</li>”); 結果 <ul> <li>AA</li> </ul>
appendTo()	該方法和Append()相反，a.Append(b)是将b追加到a中，而appendTo()是将b追求到a中	HTML代碼 <ul></ul> JQuery代碼 $ (“<li>AA</li>”).appendTo (“ul”).; 結果 <ul> <li>AA</li> </ul>
Prepend()	向每個比對的元素内部前置内容	HTML代碼 <p>哈哈</p> JQuery代碼 $(“p”).prepend(“<b>ABC</b>”); 結果 <p><b>ABC</b>哈哈</p>
prependTo()	該方法和Prepend()相反，a. Prepend (b)是将b前置到a中，而prependTo ()是将b前置到a中	HTML代碼 <p>哈哈</p> JQuery代碼 $(“<b>ABC</b>”).prependTo.(“p”); 結果 <p><b>ABC</b>哈哈</p>
After()	在每個比對的元素之後插入内容，是之後	HTML代碼 <p>AAA</p> JQuery代碼 $(“p”).After(“<b>cc</b>”); 結果 <p>AAA</p><b>cc</b>
insertAfter()	和After()相反	HTML代碼 <p>AAA</p> JQuery代碼 $ (“<b>cc</b>”).After(“p”); 結果 <p>AAA</p><b>cc</b>
Before()	在每個比對的元素之前插入内容	HTML代碼 <p>AAA</p> JQuery代碼 $(“p”). Before (“<b>cc</b>”); 結果 <b>cc</b><p>AAA</p>
insertBefore()	和Before()相反	HTML代碼 <p>AAA</p> JQuery代碼 $ (“<b>cc</b>”). insertBefore (“p”); 結果 <b>cc</b><p>AAA</p>

   好了，不要齋看，自己動手試試吧:)

   4.删除元素節點    由于我們需要經常動态去改變DOM元素，是以Jquery提供了兩種删除節點的方法，即remove()和empty();     4.1 remove()方法      $("p").remove();//    我們可以擷取到要删除的元素，然後調用remove()方法      $("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一個li标記，然後再把删除的li标記重新加到ul裡面，remove()方法傳回删除元素的引用，這時你可以繼續使用      $("ul li").remove("li[title!=ABC]");//remove可以接受通過參數來選擇性的删除符合條件的元素;    4.2 empty()方法      嚴格來講，empty()方法并不是删除元素，而是清空      例：       HTML代碼        <ul>           <li title="AAA">AAA</li>        </ul>       JQuery代碼        $("ul li:eq(0)").empty();       結果       <ul>           <li title="AAA"></li>        </ul>       記住，隻會清空内容，不會請空屬性;

   時間不早，先寫到這裡後，待續。

轉載于:https://www.cnblogs.com/Ss_Andy/archive/2010/12/09/1900800.html