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>