在使用js過程中，會(huì)發(fā)現(xiàn)在某些方面，原生的js代碼相對(duì)于jQuery有自己特定的優(yōu)勢(shì)，會(huì)更加簡潔，所以掌握兩類對(duì)象的相互轉(zhuǎn)化非常重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM對(duì)象和jQuery對(duì)象的相互轉(zhuǎn)化</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" >
$(document).ready(
function () {
// 給第一個(gè)按鈕綁定事件
var btn01 = document.getElementById("dom2dom");
btn01.onclick = function () {
var divEleDom = document.getElementById("testDiv");
// 將divEleDom的style.color賦值為red
divEleDom.style.color = "red";
}
// 給第二個(gè)按鈕綁定事件 將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象
// 獲取DOM對(duì)象
var btn02Dom = document.getElementById("dom2jQuery");
// 轉(zhuǎn)換為jQuery對(duì)象
var btn02JQuery = $(btn02Dom);
// 為jQuery對(duì)象綁定事件
btn02JQuery.click(function () {
// 使用jQuery對(duì)象.css("AttributeName", "NewAttribute");方法來操作jQuery對(duì)象的css屬性
$("#testDiv").css("color", "red");
});
// 給第三個(gè)按鈕綁定事件，使用jQuery對(duì)象操作jQuery方法
$("#jQuery2jQuery").click(function () {
$("#testDiv").css("height", "300px");
});
// 給第四個(gè)按鈕綁定事件，使用jQuery對(duì)象操作DOM方法
// 獲取jQuery對(duì)象
var btn4EleJQuery = $("#jQuery2dom");
// 轉(zhuǎn)化為DOM對(duì)象
var btn04Dom = btn4EleJQuery[0];
// alert(btn04Dom);
// 綁定事件
btn04Dom.onclick = function () {
var divEleDom = document.getElementById("testDiv");
// alert(divEleDom);
// 將divEleDom的style.color賦值為red
divEleDom.style.color = "red";
}
}
);
</script>
</head>
<body>
<div id="testDiv">mTender</div>
<button id="dom2dom">使用DOM對(duì)象調(diào)用DOM方法</button>
<button id="dom2jQuery">使用DOM對(duì)象調(diào)用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery對(duì)象調(diào)用jQuery方法</button>
<button id="jQuery2dom">使用jQuery對(duì)象調(diào)用DOM方法</button>
</body>
</html>
首先是DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象，直接使用jQuery的核心函數(shù)轉(zhuǎn)化即可：
// 獲取DOM對(duì)象
var domEle = document.getElementById("eleId");
// 使用核心函數(shù)將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象
var jQueryEle = $(domEle);
然后就是jQuery對(duì)象轉(zhuǎn)化為DOM對(duì)象，jQuery對(duì)象創(chuàng)建后，是一個(gè)DOM對(duì)象數(shù)組，所以只需要完成數(shù)組取值即可：
// 獲取jQuery對(duì)象
var jQueryEle = &("#eleId");
// 獲取DOM對(duì)象
var domEle = jQueryEle[0];
