<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div id="main">
id=main的div
</div>
<button onclick="getElem()">获取元素</button>
<button onclick="domToJQ()">DOM--jQuery</button>
<button onclick="jqToDom()">jQuery--DOM</button>
</body>
<script type="text/javascript">
//1.获取元素
function getElem(){
console.log($('#main'));
//获取元素的内容
console.log($('#main').html());
//设置元素内容
$('#main').html('动态设置文本');
}
//2..DOM-->jQuery
function domToJQ(){
//1.获取DOM对象
var div = document.getElementsByTagName('div')[0];
//2.转化
var $div = $(div);
$div.html('转化成功');
console.log(div,$div);
}
//3.jQuery-->DOM
function jqToDom(){
var div = $('#main')[0];
var div2 = $('#main').get(0);
div.innerHTML = '转化成功';
console.log(div,div2);
}
</script>
</html>
