jQuery對象與dom對象的轉換，jquery對象dom

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 = $(”  <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() 注意大小寫，我實驗時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代碼  可以500%提高開發效率的前端UI架構！   <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();可以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. <ul>  
2.     <li title=”AAA”>AAA</li>  
3.  </ul>  
4. JQuery代碼  
5.  $(“ul li:eq(0)”).empty();  

 

 

      結果.  可以500%提高開發效率的前端UI架構！  .代碼  

1. <ul>  
2.     <li title=”AAA”></li>  
3.  </ul>  

 

 

記住，只會清空內容，不會請空屬性;
DOM對象轉成jQuery對象:

你這樣寫，意味著v是DOM對象，而$v是jquery對象，以後如果要調用，就使用$v。當然，$號不是必需的，你也可以用其他的變數名，如var jq_obj=$(v)
 
jquery對象轉化為dom對象

jQuery擷取元素 不管一個還是多個都是返回一個數組
即將擷取的元素放在一個數組對象中。( 也可以這麼認為數組中存的就是DOM對象)
既然是數組 能寫0還是1還是n 就取決於擷取了多少個DOM對象
所以當cm[0] 取的就是jquery擷取的第一個DOM對象
cm[1] 取的就是第二個 以此類推。

而你上面的寫的 使用# 即ID選取器 擷取的肯定是一個元素 要麼這個元素不存在就是0
所以 var cm = $("clickMe");能擷取到元素即可以cm[0] 不能肯定報錯。。
可以cm.length 檢測