介绍jQuery对象与DOM对象的区别，包括两者的特性、方法和使用场景的对比。
jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。
var $div = $("div"); // jQuery 对象
DOM 对象是通过原生 JavaScript 获取的元素对象。
var div = document.getElementsByTagName("div"); // DOM 对象
| 特性 | jQuery 对象 | DOM 对象 |
|---|---|---|
| 获取方式 | $() | 原生方法 |
| 返回值 | jQuery 对象 | DOM 元素 |
| 方法 | jQuery 方法 | 原生方法 |
| 索引访问 | .eq(index) | [index] |
| 长度 | .length | .length |
| 遍历 | .each() | for 循环 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 对象与 DOM 对象</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.box {
width: 150px;
height: 150px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 150px;
border-radius: 8px;
margin: 10px;
display: inline-block;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.info-box {
padding: 15px;
margin-top: 15px;
background-color: white;
border-radius: 5px;
border: 2px solid #3498db;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 对象与 DOM 对象</h1>
<div class="demo-section">
<h3>对象测试</h3>
<div class="box" id="box1">盒子 1</div>
<div class="box" id="box2">盒子 2</div>
<div class="box" id="box3">盒子 3</div>
<div>
<button onclick="testJQueryObject()">jQuery 对象</button>
<button onclick="testDOMObject()">DOM 对象</button>
</div>
<div id="result" class="info-box"></div>
</div>
</div>
<script>
function testJQueryObject() {
var $box = $(".box");
$("#result").html(`
<p><strong>jQuery 对象：</strong></p>
<p>类型：${Object.prototype.toString.call($box)}</p>
<p>长度：${$box.length}</p>
<p>jQuery 版本：${$box.jquery}</p>
<p>使用 jQuery 方法：${$box.css('background-color')}</p>
`);
}
function testDOMObject() {
var box = document.getElementsByClassName("box");
$("#result").html(`
<p><strong>DOM 对象：</strong></p>
<p>类型：${Object.prototype.toString.call(box)}</p>
<p>长度：${box.length}</p>
<p>第一个元素：${box[0].id}</p>
<p>使用 DOM 方法：${box[0].style.backgroundColor}</p>
`);
}
</script>
</body>
</html>
理解 jQuery 对象与 DOM 对象的区别非常重要：