作用域
全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
{
var number = 1
console.log(number) //1
}
console.log(number) //1
</script>
<script>
console.log(number) //1
</script>
</html>
局部变量
<script>
function f() {
var number = 1
console.log(number)
}
f()
console.log(number)
</script>
隐式全局变量
<script>
function f() {
number = 1
console.log(number)
}
f()
console.log(number)
</script>
预解析
<script>
console.log(number)
var number = 1
</script>
<script>
var number
console.log(number)
number = 1
</script>
<script>
f()
function f() {
console.log("函数执行")
}
</script>
<script>
f()
var num = 10
function f() {
console.log(num)
var num = 20
}
</script>
会被解析成下面这样
<script>
function f() {
var num
console.log(num)
num = 20
}
f()
var num = 10
</script>
日期相关
字符串相关
元素创建的不同方式
方式1：document.write("")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我创建p</button>
</body>
<script>
document.getElementById("btn").onclick = function () {
document.write("<p>123</p>")
}
</script>
</html>
方式2：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv">
</div>
</body>
<script>
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerHTML = "<p>123</p>"
}
</script>
</html>
方式3：document.createElement("tagName")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv">
</div>
</body>
<script>
document.getElementById("btn").onclick = function () {
var pObj = document.createElement("p")
pObj.innerText="this is a p"
document.getElementById("dv").appendChild(pObj)
}
</script>
</html>
事件的冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv1 {
width: 100px;
height: 100px;
border: 1px solid;
}
#dv2 {
width: 80px;
height: 80px;
border: 1px solid;
}
#dv3 {
width: 50px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv1">
<div id="dv2">
<div id="dv3">
</div>
</div>
</div>
</body>
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id)
}
document.getElementById("dv2").onclick = function () {
console.log(this.id)
}
document.getElementById("dv3").onclick = function () {
console.log(this.id)
}
</script>
</html>
阻止事件的冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv1 {
width: 100px;
height: 100px;
border: 1px solid;
}
#dv2 {
width: 80px;
height: 80px;
border: 1px solid;
}
#dv3 {
width: 50px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv1">
<div id="dv2">
<div id="dv3">
</div>
</div>
</div>
</body>
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id)
}
document.getElementById("dv2").onclick = function (event) {
console.log(this.id)
// 谷歌和火狐支持
event.stopPropagation()
}
document.getElementById("dv3").onclick = function () {
console.log(this.id)
// 谷歌和IE支持
window.event.cancelable=true
}
</script>
</html>
页面加载事件
<script>
// 页面加载完毕后会执行这个方法
window.onload=function () {
}
// 页面关闭后执行，ie8支持，谷歌不支持
window.onunload=function () {
}
// 页面关闭前执行，ie8支持，谷歌不支持
window.onbeforeunload=function () {
}
</script>
location对象
<script>
window.onload = function () {
console.log(window.location)
}
</script>
<body>
<button id="btn">点我跳转</button>
</body>
<script>
document.getElementById("btn").onclick = function () {
// 通过这种方式可以点击浏览器的后退按钮回退页面
location.href = "http://www.baidu.com"
}
document.getElementById("btn").onclick = function () {
// 效果同上，只不过他属于方法
location.assign("http://www.baidu.com")
}
document.getElementById("btn").onclick = function () {
// 页面发生跳转后，无法通过浏览器的回退按钮返回原页面
location.replace("http://www.baidu.com")
}
</script>
<script>
location.reload()
</script>
history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<button id="btn1">点我跳转</button>
<button id="btn2">点我前进</button>
</body>
<script>
document.getElementById("btn1").onclick = function () {
location.assign("02.html")
}
document.getElementById("btn2").onclick = function () {
window.history.forward()
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我回退</button>
</body>
<script>
document.getElementById("btn").onclick = function () {
window.history.back()
}
</script>
</html>
navigator对象
window.navigator.userAgent // 浏览器的类型
window.navigator.platform // 系统平台
服务热线 19970861797
