在使用js过程中，会发现在某些方面，原生的js代码相对于jQuery有自己特定的优势，会更加简洁，所以掌握两类对象的相互转化非常重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象和jQuery对象的相互转化</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 () {
// 给第一个按钮绑定事件
var btn01 = document.getElementById("dom2dom");
btn01.onclick = function () {
var divEleDom = document.getElementById("testDiv");
// 将divEleDom的style.color赋值为red
divEleDom.style.color = "red";
}
// 给第二个按钮绑定事件 将DOM对象转换为jQuery对象
// 获取DOM对象
var btn02Dom = document.getElementById("dom2jQuery");
// 转换为jQuery对象
var btn02JQuery = $(btn02Dom);
// 为jQuery对象绑定事件
btn02JQuery.click(function () {
// 使用jQuery对象.css("AttributeName", "NewAttribute");方法来操作jQuery对象的css属性
$("#testDiv").css("color", "red");
});
// 给第三个按钮绑定事件，使用jQuery对象操作jQuery方法
$("#jQuery2jQuery").click(function () {
$("#testDiv").css("height", "300px");
});
// 给第四个按钮绑定事件，使用jQuery对象操作DOM方法
// 获取jQuery对象
var btn4EleJQuery = $("#jQuery2dom");
// 转化为DOM对象
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对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>
首先是DOM对象转换为jQuery对象，直接使用jQuery的核心函数转化即可：
// 获取DOM对象
var domEle = document.getElementById("eleId");
// 使用核心函数将DOM对象转换为jQuery对象
var jQueryEle = $(domEle);
然后就是jQuery对象转化为DOM对象，jQuery对象创建后，是一个DOM对象数组，所以只需要完成数组取值即可：
// 获取jQuery对象
var jQueryEle = &("#eleId");
// 获取DOM对象
var domEle = jQueryEle[0];
网友评论