<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象和jQuery对象相互转换</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//使用dom对象调用dom方法
$("#dom2dom").click(function () {
let innerText = document.getElementById("testDiv").innerText;
alert(innerText);
});
//使用jQuery对象调用jQuery方法
$("#jQuer2jQuery").click(function () {
let text=$("#testDiv").text();
alert(text);
});
//使用DOM对象调用jQuery方法
$("#dom2jQuery").click(function () {
let textDivEle = document.getElementById("testDiv");
alert($(textDivEle).text());
});
//使用jQuery对象调用DOM方法
$("#jQuery2dom").click(function () {
var divValue=$("#testDiv");
//将jquery对象转换为dom对象
alert(divValue[0].innerText);
});
});
</script>
</head>
<body>
<div id="testDiv">使用不同方式 alert此内容</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuer2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>
Xpath