对象相互转换

介绍jQuery对象与DOM对象之间的相互转换方法，包括jQuery转DOM和DOM转jQuery的具体实现。

jQuery 对象转 DOM 对象

方法 1：使用索引

var $div = $("div");
var div = $div[0];

方法 2：使用 get() 方法

var $div = $("div");
var div = $div.get(0);

方法 3：使用 get() 获取所有 DOM 元素

var $div = $("div");
var divs = $div.get();

DOM 对象转 jQuery 对象

var div = document.getElementById("test");
var $div = $(div);

转换示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象转换示例</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 auto;
  }
  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>对象相互转换</h1>

  <div class="demo-section">
    <h3>转换测试</h3>
    <div class="box" id="testBox">测试盒子</div>
    <button onclick="jqueryToDom()">jQuery 转 DOM</button>
    <button onclick="domToJQuery()">DOM 转 jQuery</button>
    <button onclick="resetBox()">重置</button>
    <div id="result" class="info-box"></div>
  </div>
</div>

<script>
function jqueryToDom() {
  var $box = $("#testBox");
  var box = $box[0];
  
  box.style.backgroundColor = "#e74c3c";
  box.textContent = "DOM 对象";
  
  $("#result").html(`
    <p><strong>jQuery 转 DOM：</strong></p>
    <p>jQuery 对象：${Object.prototype.toString.call($box)}</p>
    <p>DOM 对象：${Object.prototype.toString.call(box)}</p>
    <p>元素 ID：${box.id}</p>
  `);
}

function domToJQuery() {
  var box = document.getElementById("testBox");
  var $box = $(box);
  
  $box.css("background-color", "#2ecc71").text("jQuery 对象");
  
  $("#result").html(`
    <p><strong>DOM 转 jQuery：</strong></p>
    <p>DOM 对象：${Object.prototype.toString.call(box)}</p>
    <p>jQuery 对象：${Object.prototype.toString.call($box)}</p>
    <p>jQuery 版本：${$box.jquery}</p>
  `);
}

function resetBox() {
  var $box = $("#testBox");
  $box.css("background-color", "#3498db").text("测试盒子");
  $("#result").empty();
}
</script>

</body>
</html>

总结

对象转换是 jQuery 开发中的常见操作：

jQuery 转 DOM：使用索引 [0] 或 get(0)
DOM 转 jQuery：使用 $()
转换后使用对应的方法
注意区分两种对象的使用场景

上一章：jQuery 对象与 DOM 对象

下一章：jQuery 选择器