DOM對象與jquery對象有什么不同
		
          
		<html xmlns="<head> 
          <title>1-4</title> 
          <meta http-equiv="Content-Type" content="text/html; charset=gbk-88591" /> 
          <!-- 引入 jQuery --> 
          <script src="jquery-1.3.1.js" type="text/javascript"></script> 
          <script type="text/javascript">
          //等待dom元素加載完畢. 
          $(document).ready(function(){ 
          var domObj = document.getElementsByTagName("h3")[0]; // Dom對象 
          var $jQueryObj = $(domObj); //jQuery對象 
          alert("DOM對象："+domObj.innerHTML); 
          alert("jQuery對象："+$jQueryObj.html()); 
          }); 
          </script> 
          </head> 
          <body> 
          <h3>例子</h3> 
          <p title="等待dom元素加載完畢" >等待dom元素加載完畢?</p> 
          <ul> 
          <li>蘋果</li> 
          <li>橘子</li> 
          <li>菠蘿</li> 
          </ul> 
          </body> 
          </html>



          jQuery對象和DOM對象使用說明，需要的朋友可以參考下。
          1.jQuery對象和DOM對象
          第一次學習jQuery,經常分辨不清哪些是jQuery對象，哪些是 DOM對象，因此需要重點了解jQuery對象和DOM對象以及它們之間的關系.
          DOM對象，即是我們用傳統的方法(javascript)獲得的對象，jQuery對象即是用jQuery類庫的選擇器獲得的對象;
          復制代碼 代碼如下:

          var domObj = document.getElementById("id"); //DOM對象
          var $obj = $("#id"); //jQuery對象;

          jQuery對象就是通過jQuery包裝DOM對象后產生的對象，它是jQuery獨有的。如果一個對象是jQuery對象，那么就可以使用jQuery里的方法，例:
          $("#foo").html(); //獲取id為foo的元素內的html代碼，html()是jQuery特有的方法;
          上面的那段代碼等同于:
          document.getElementById("foo").innerHTML;

          注意：在jQuery對象中無法使用DOM對象的任何方法。
          例如$("#id").innerHTML 和$("#id").checked之類的寫法都是錯誤的，可以用$("#id").html()和$("#id").attr ("checked")之類的 jQuery方法來代替。同樣，DOM對象也不能使用jQuery方法。學習jQuery開始就應當樹立正確的觀念，分清jQuery對象和DOM對象之間的區別，之后學習 jQuery就會輕松很多的。

          2.jQuery對象和DOM對象的互相轉換

          在上面第一點說了，jquery對象和dom對象是不一樣的！比如jquery對象不能使用dom的方法，dom對象不能使用jquery方法，那假如我 jquery沒有封裝我要的方法，那能怎么辦呢？
          這時我們可以將jquer對象轉換成dom對象

          jquery對象轉換成 dom對象
          jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)。可能有人會覺得奇怪，怎么是用下標呢，沒錯，jquery對象就是一個數組對象.
          下面代碼將演示一個jquery對象轉換成dom對象，再使用dom對象的方法
          復制代碼 代碼如下:

          var $cr=$("#cr"); //jquery對象
          var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);
          alert(cr.checked); //檢測這個checkbox是否給選中

          dom對象轉換成jquery對象
          對于一個dom對象，只需要用$()把dom對象包裝起來，就可以獲得一個jquery對象了，方法為$(dom對象);
          復制代碼 代碼如下:

          var cr=document.getElementById("cr"); //dom對象
          var $cr = $(cr); //轉換成jquery對象

          轉換后可以任意使用jquery中的方法了.

          通過以上的方法，可以任意的相互轉換jquery對象和dom對象.
          最后再次強調，dom對象才能使用dom中的方法，jquery對象不可以使用dom中的方法，但 jquery對象提供了一套更加完善的工具用于操作dom,關于jquery的dom操作將在后面的文章進行詳細講解.


          ps: 平時用到的jquery對象都是通過$()函數制造出來的，$()函數就是一個jquery對象的制造工廠.
          建議:如果獲取的對象是 jquery對象，那么在變量前面加上$,這樣方便容易識別出哪些是jquery對象,例如:
          var $variable = jquery對象;
          如果獲取的是dom對象，則定義如下:
          var variable = dom對象
		
          
			posted on 2012-04-26 16:42 youngturk 閱讀(318) 評論(1)  編輯  收藏  所屬分類: JQuery 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: DOM對象與jquery對象有什么不同
					
						2012-04-26 16:48
					
				思寬
			
          
			
          
				1.DOM對象轉成jQuery對象: 

          對于已經是一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。$(DOM對象) 

          如：var v=document.getElementById("v"); //DOM對象 

          var $v=$(v); //jQuery對象 

          轉換后，就可以任意使用jQuery的方法了。 

          

          2.jQuery對象轉成DOM對象: 

          兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index); 

          (1)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。 

          如：var $v =$("#v") ; //jQuery對象 

          var v=$v[0]; //DOM對象 

          alert(v.checked) //檢測這個checkbox是否被選中 

          (2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象 

          如：var $v=$("#v"); //jQuery對象 

          var v=$v.get(0); //DOM對象 

          alert(v.checked) //檢測這個checkbox是否被選中   回復  更多評論
				  
			
          
		

          




          








          

				
				

			
          
			
          
				
					
          
	
          
		
          <2012年4月>
          
	
          日一二三四五六
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345
          

          

					

          導航
          

					

          統計
          
	
					

          公告
          
	
          this year :
          1 jQuery
          2 freemarker
          3 框架結構
          4 口語英語
          

					

          常用鏈接
          


          留言簿(6)
          


		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          文章分類
          
		
				
			
	
		
          文章檔案
          
		
				
			
	
		
          相冊
          
		
				
			
	
		
          EJB學習
          
		
				
			
	
		
          Flex學習
          
		
				
			
	
		
          learn English
          
		
				
			
	
		
          oracle
          
		
				
			
	
		
          spring MVC web service
          
		
				
			
	
		
          SQL
          
		
				
			
	
		
          Struts
          
		
				
			
	
		
          生活保健
          
		
				
			
	
		
          解析文件
          
		
				
			
	



          搜索
          



          最新評論
	
          



          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
			
			
			
			 

	

    







          
        
	




主站蜘蛛池模板：
麻城市|
老河口市|
罗田县|
文化|
方正县|
昭觉县|
容城县|
加查县|
兖州市|
新源县|
绥芬河市|
沙湾县|
襄垣县|
白山市|
肥城市|
云安县|
砚山县|
奉节县|
海口市|
沾化县|
开封县|
依兰县|
吴堡县|
金溪县|
利辛县|
霍林郭勒市|
惠州市|
溧水县|
泽普县|
安仁县|
保亭|
广水市|
文安县|
达孜县|
手机|
内乡县|
连州市|
五指山市|
乳源|
泽州县|
扶余县|