01-JQuery学习之DOM对象和JQuery对象

DOM对象，即是我们用传统的方法(javascript)获得的对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02-Dom对象与Juqer包装集对象</title>
	</head>
	<body>
		<div id="mydiv">文本</div>
	</body>
	<!-- 
		DOM对象
			通过js方式获取的元素对象（document）
		JQuery对象
			通过JQuery方法获取的元素对象，返回的是JQuery包装集
	 -->
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// DOM对象
		var divDom = document.getElementById('mydiv');
		console.log(divDom);
		var divsDom = document.getElementsByTagName('div');
		console.log(divsDom);
		// DOM对象 js获取不存在的元素时
		var spanDom =  document.getElementsByTagName('span');
		console.log(spanDom);
		var spanDom2 = document.getElementById('myspan');
		console.log(spanDom2);
		
		
		console.log('====================');
		
		// JQuery对象
		var divDom2 = $('#mydiv');
		console.log(divDom2);
		
		var spanJquery = $('#myspan');
		console.log(spanJquery);
		
		console.log('========DOM转JQuery============');
		// DOM对象转JQuery对象，只需要利用$()方法进行包装即可
		var divDomToJquery = $(divDom);
		console.log(divDomToJquery);
		
		console.log('========JQuery转DOM============');
		// JQuery对象转DOM对象，获取对象中指定下标的元素
		var divJqueryToDom = divDom2[0];
		console.log(divJqueryToDom);
		
	</script>
</html>
posted @ 2021-03-29 20:47  雪漠阳光  阅读(47)  评论(0)  编辑  收藏  举报