1. 程式人生 > >jQuery物件和dom物件的區別和相互轉換

jQuery物件和dom物件的區別和相互轉換

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>obj.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	
	<script type="text/javascript" src="../../jquery-2.2.4.js"></script>
	<script type="text/javascript">
		/*
			jQuery物件和dom物件的區別
			dom物件是document.getElement來獲取dom物件,dom物件只能訪問dom中預定義的方法
					value	innerHTML	innerText	style.樣式名=值
			jQuery物件  就是通過$()物件處理返回的物件,該物件是jQuery的陣列,只能呼叫
			jQueryr提供的方法,比如	css		text	html	val()  value
		*/
		$(function(){
			//dom物件	不能呼叫jQuery方法
			var myDiv=document.getElementById("myDiv");
			myDiv.style.color="red";
			var myDiv2=document.getElementById("myDiv2");
			myDiv.innerText=myDiv2.innerText;
			//jQuery物件不能呼叫dom物件的方法
			$("#myDiv").css("color","green");
			$("#myDiv").text($("input")[1].value);
			
			/*
				jQuery物件和dom物件的互相轉換
			*/
			//jQuery物件轉換dom物件
			var oDiv=$("input")[0];
			alert(oDiv);
			
			//dom物件轉換成jQuery物件
			var oDiv2=document.getElementById("myDiv2");
			var jQueryDiv=$(oDiv2);
			jQueryDiv.css("color","skyblue");
		})
	</script>
  </head>
  
  <body>
 
	<div id="myDiv">hello jquery</div>
	
	<div id="myDiv2">hello world</div>
	
	<span>hello</span><br/>
	
	<input id="myInput" type="text" value="888888" />
	
	<input type="text" value="99999" />
	
	<p my="a"></p>
	
	<p my="b"></p>
	
	<div>
		<a href="www.google.com"></a>
	</div>
	
  </body>
</html>