<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jq.js"></script>
<script>
console.log(jQuery);
console.log($);
console.log($ === jQuery);
$(document).ready(function(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
})
$().ready(function(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
})
$(function(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
})
</script>
<script>
function obtainDom(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
}
obtainDom()
window.onload = function newObtainDom(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
}
</script>
<script>
$(document).ready(function(){
console.log("ready完成了");
})
window.onload = function(){
console.log("onload完成了")
}
document.addEventListener("DOMContentLoaded",function(){
console.log("dom内容加载完毕")
})
$(document).ready(function(){
console.log("新的ready完成了");
})
window.onload = function(){
console.log("新的onload完成了")
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="wrapper">wrapper</div>
<!-- 这张图片请求不回来的,onload会等待图片加载,等了很久,还没请求回来,才会报错,结束请求执行后续流程
ready不会等待图片加载,所以ready会先执行,onload后执行 -->
<img src="http://www.google.com/1.jpg" alt="">
<script>
$("#btn").click(function(){
$("<div />").css({
width:"100px",
height:"100px",
background:"red",
}).appendTo(document.body)
})
</script>
</body>
</html>