<!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($); //jQuery另一种写法
console.log($ === jQuery);
// $不仅是一个对象,也是一个函数对象,$()相当于执行$函数
// 重点在传参,传不同的参,$()整体发挥的作用不同
// $对象上的ready方法作用执行回调函数
$(document).ready(function(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
})
// ready方法多种写法
$().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");
// 此时获取不到dom元素,因为js代码写在html代码之前,此时dom树还没完全形成。
console.log(wrapper);
}
obtainDom()
// window.onload() 方法用于当 HTML 文档加载渲染完毕后,形成完整dom树,立刻执行某个回调函数。
window.onload = function newObtainDom(){
var wrapper = document.getElementById("wrapper");
console.log(wrapper);
}
</script>
<script>
// window.onload必须等待网页全部加载完毕(包括图片资源请求回来了),才执行
// ready只需要等待dom结构加载完毕就可以执行
// DOMContentLoaded只需要等待dom结构加载完毕就可以执行,但是因为ready方法dom结构加载完毕后,
// 又干了一些其他的事,所以就比DOMContentLoaded慢
$(document).ready(function(){
console.log("ready完成了");
})
window.onload = function(){
console.log("onload完成了")
}
document.addEventListener("DOMContentLoaded",function(){
console.log("dom内容加载完毕")
})
// onload执行次数,只能执行一次,执行第二次时覆盖第一次
// ready可以多次执行,不会覆盖
$(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>
// var btn = document.getElementById("btn");
// var wrapper = document.getElementById("wrapper")
// btn.onclick = function(){
// var oDiv = document.createElement("div");
// oDiv.style.width = "100px";
// oDiv.style.height = "100px";
// oDiv.style.backgroundColor = "red";
// document.body.appendChild(oDiv);
// }
// click(fn) === .onclick = function(){}
// $("div") === 创建div
// 属性值 === 引用加单位
// background 不用写成backgroundColor
// var newBtn = $("#btn");
// newBtn.onclick = function(){
// const oDiv = $("<div></div>").css({
// width:100,
// height:100,
// backgroundColor:red,
// }).appendTo(document.body);
// }
$("#btn").click(function(){
$("<div />").css({
width:"100px",
height:"100px",
background:"red",
}).appendTo(document.body)
})
</script>
</body>
</html>