<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>haohao</title>
<link rel="stylesheet" href="">
<style>
*{
margin: 0;
padding: 0;
}
div{
width:100px;
height:100px;
border:1px solid #000;
}
</style>
<script src="../js/jQuery-3.3.js"></script>
<script>
window.onload = function (ev){
//1.利用原生的JS查找元素
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementsByClassName("box1")[0];
var div3 = document.getElementById("box2")[0];
// console.log(div1);
// console.log(div2);
// console.log(div3);
//
//2.利用原生的JS修改背景颜色
// div1.style.backgroundColor = "red";
// div2.style.backgroundColor = "blue";
// div3.style.backgroundColor = "yellow";
}
$(function(){
var $div1 = $("div");
var $div2 = $(".box1");
var $div3 = $("#box2");
// console.log($div1);
// console.log($div2);
// console.log($div3);
//
$div1.css({
background:"red",
width:"200px",
height:"200px"
});
$div2.css({
background:"blue"
});
$div3.css({
background:"yellow"
})
})
</script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
<script src="../js/jQuery-3.3.js"></script>
</body>
</html>
同种功能用JQuery跟原生的js实现,从而更清晰的比较优劣!