jQuery對象與dom對象的轉換

jQuery對象與dom對象的轉換
介紹 DOM是Document Object Modeule的縮寫，一般來說，DOM操作分成3個方面。 1、DOM Core DOM Core並不專屬於javascript，任何一種支援DOM的程式設計語言都可以使用它，用途也遠不止僅限於網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔，如XML。 例如：document,getElementsByTagName(“form”);//使用DOM Core來擷取表單對象的方法。可以500%提高開發效率的前端UI架構！ 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()方法的參數可以是一個，也可以是兩個。可以500%提高開發效率的前端UI架構！ 當參數是一個時，則是要查詢的屬性名稱。 當參數是兩個時，則可以設定屬性的值。 alert($(“#id”).attr(“title”)); //輸出元素的title屬性.一個參數 $(“#id”).attr(“title”,”改變title值”); //改變元素的title屬性值.二個參數 3.添加元素節點 $(html) 簡單說明一下$(html)方法會根據傳入的html標記字串建立一個dom對象，並將這個dom對象封裝成一個jquery對象返回，總之就是把標記所有html代碼都放到$()工廠裡面就行了！ 例： var $htmlLi = $(”

香蕉

”); //建立DOM對象 var $ul = $(“ul”); //擷取UL對象 $ul.append($htmlLi); //將$htmlLi追加到$ul元素的li列表

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

方法	描述	樣本
Append()	向每個匹配的元素內追加內容	HTML代碼 JQuery代碼 $(“ul”).append(“ AA ”); 結果 AA
appendTo() 注意大小寫，我實驗時appendto沒通過。	該方法和Append()相反，a.Append(b)是將b追加到a中，而appendTo()是將b追求到a中	HTML代碼 JQuery代碼 $ (“ AA ”).appendTo (“ul”).; 結果 AA
Prepend()	向每個匹配的元素內部前置內容	HTML代碼 可以500%提高開發效率的前端UI架構！ 哈哈 JQuery代碼 $(“p”).prepend(“ABC”); 結果 ABC哈哈
prependTo()	該方法和Prepend()相反，a. Prepend (b)是將b前置到a中，而prependTo ()是將b前置到a中	HTML代碼 哈哈 JQuery代碼 $(“ABC”).prependTo.(“p”); 結果 ABC哈哈
After()	在每個匹配的元素之後插入內容，是之後	HTML代碼 AAA JQuery代碼 $(“p”).After(“cc”); 結果 AAA cc
insertAfter()	和After()相反	HTML代碼 AAA JQuery代碼 $ (“cc”).After(“p”); 結果 AAA cc
Before()	在每個匹配的元素之前插入內容	HTML代碼 AAA JQuery代碼 $(“p”). Before (“cc”); 結果 cc AAA
insertBefore()	和Before()相反	HTML代碼 AAA JQuery代碼 $ (“cc”). insertBefore (“p”); 結果 cc AAA

4.刪除元素節點 由於我們需要經常動態去改變DOM元素，因此Jquery提供了兩種刪除節點的方法，即remove()和empty();可以500%提高開發效率的前端UI架構！ 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代碼.代碼

1. • AAA
2. JQuery代碼
3. $(“ul li:eq(0)”).empty();
   結果. 可以500%提高開發效率的前端UI架構！ .代碼
   1. 記住，只會清空內容，不會請空屬性;