jQuery对象和dom对象的区别和相互转换

最新推荐文章于 2023-07-15 20:08:50 发布

Sesshoumaru华

最新推荐文章于 2023-07-15 20:08:50 发布

阅读量751

点赞数

分类专栏： jQuery 文章标签： jQuery对象和dom对象的区别和相互

本文链接：https://blog.csdn.net/qq_38921377/article/details/73772765

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>