<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象'&&'jQuery对象对比</title>
<script src="../jQuery库/jquery-3.3.1.js"></script>
<script>
// DOM对象给元素div ID="hello"加一段文字,再将字体改为红色
window.onload = function(){
//获取id为imooc1的元素div
var a = document.getElementById("hello");
//改变div元素中的值
a.innerHTML="这是最佳途径";
//改变样式
a.style.color="red";
}
//用jQuery对象给元素div ID="world"加一段文字,再将字体改为粉色
$(document).ready(function(){
//通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
var $a = $("#world");
//调用该对象的html()方法进行更改内容,调用该对象的css()方法进行更改颜色,字体样式
$a.html("这是好的开始!").css({
color: "pink",
fontSize: "50px"
});
});
</script>
</head>
<body>
<div id="hello"></div>
<div id="world"></div>
</body>
</html>
这段代码会有助于区别两种对象,代码中有详细的解释!!!