JavaScript续集
函数续集
函数的全局变量和局部变量
-
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，局部变量就会被删除。 -
全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。 -
变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。另外函数的作用域关系是在定义阶段就固定死的，与调用位置无关
例1
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
例2
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
例3
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var res = f();
res();
javascript中的变量提升和函数提升
-
所有的声明都会提升到作用域的最顶上去。
-
同一个变量只会声明一次，其他的会被忽略掉。
-
函数声明的优先级高于变量申明的优先级，并且函数声明和函数定义的部分一起被提升。
BOM操作
介绍
BOM：Browser Object Model，浏览器对象模型。
你看不懂的BOM的结构图：
从上图可以看出来：
-
DOM对象也是BOM的一部分
-
window对象是BOM的顶层（核心）对象
需要注意的是
-
在调用window对象的方法和属性时，可以省略window，例如：window.document.location可以简写为document.location
-
全局变量也是windows对象的属性，全局的函数时window对象的方法
对象history、navigator、screen（了解即可）
-
history对象包不包含浏览器的历史
history.back() //后退一页，等同于history.go(-1)
history.forward() //前进一页，等同于history.go(1)
history.go(0) //0是刷新
用的不多。因为浏览器中已经自带了这些功能的按钮： -
navigator对象包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统 -
可以用screen对象得到可用的屏幕宽读和高度
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
练习：上一页下一页
================page11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>第一个页</p>
<a href="page22.html">点我进入下一页</a>
</body>
</html>
================page22.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>第二个页</p>
<a href="page33.html">点我进入下一页</a>
</body>
</html>
================page33.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function back() {
window.history.back()
}
</script>
</head>
<body>
<p>第三个页</p>
<input type="button" value="点我进入上一页" onclick="back()">
</body>
</html>
localtion对象
location.href //获取URL
location.href=“URL” // 跳转到指定页面
location.reload() //重新加载页面
location.href练习1：点击盒子，跳转页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">点我一下</div>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick = function () {
window.location.href = 'https://www.cnblogs.com/linhaifeng';
}
</script>
</body>
</html>
location.href练习2：3s后，自动跳转页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div>
<script>
setTimeout(function () {
location.href = 'https://www.cnblogs.com/linhaifeng';
}, 3000)
</script>
</body>
</html>
location.href练习3：3s后让网页整个刷新
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这天下，本就是大争之世，孤的儿子，不仅要争，而且要争的光芒万丈</div>
<script>
setTimeout(function () {
location.reload();
}, 3000)
</script>
</body>
</html>
弹出系统对话框
alert(1)是window.alert(1)的简写，因为它是window的子方法。
系统对话框有三种：
- alert(“egon警告你：人丑还不读书，是找不到女朋友的”); //不同浏览器中的外观是不一样的
- confirm(“你真的要这么做吗小伙子”); //兼容不好
- prompt(“输入用户名：”); //不推荐使用
示例var x=confirm("你真到要这么做吗") console.log(x) var username=prompt("输入用户名：") console.log(username);
打开关闭窗口
- open(“url地址”,“新窗口的位置_blank或者_self”，“新窗口的特征”)
window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
- close()关闭当前窗口
var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")
x.close()
浏览器窗口内部的高度和宽度
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
定时器
-
setTimeOut()
只在指定时间后执行一次，通常用于延迟执行某方法或功能，单位毫秒//定时器 异步运行 function say(){ alert("hello"); } //使用方法名字执行方法 var t1 = setTimeout(say,1000); var t2 = setTimeout("say()",3000); //使用字符串执行方法 clearTimeout(t2); //去掉定时器 -
setInterval()
在指定时间为周期循环执行，通常用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。//实时刷新时间单位为毫秒 var t3 = setInterval(say,3000); var t4 = setInterval('say()',3000); clearInterval(t3); clearInterval(t4);
DOM操作
介绍
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,DOM标准规定HTML文档中的每个成员都是一个节点(node)，HTML DOM树如下图
查找节点
-
直接查找
document.getElementById ：根据ID获取唯一一个标签
document.getElementsByClassName ： #根据class属性获取一系列标签
document.getElementsByTagName ：#根据标签名获取一系列标签 -
间接查找如下表
childNodes 获取所有的子节点，除了元素还有文本等children 获取所有元素子节点，不包含文本
parentNode 获取父节点
previousSibling 获取上一个兄弟节点，包含文本
previousElementSibling 获取上一个兄弟元素节点，不包含文本
nextSibling 获取下一个兄弟节点，包含文本
nextElementSibling 获取下一个兄弟元素节点，不包含文本
firstChild 获取第一个子节点，包含文本
firstElementChild 获取第一个子节点，不包含文本
lastChild 获取最后一个子节点，包含文本
lastElementChild 获取父元素最后一个元素节点。不包含文本
增加节点
- 创建新节点
var divEle = document.createElement('div');
- 追加一个子节点（放到最后）
somenode.appendChild(新的子节点)；
- 插入一个子节点（插入到某个节点前）
somenode.insertBefore(新的子节点,某个节点);
删除、替换节点
somenode.removeChild(要删除的子节点)；
somenode.replaceChild(新的子节点, 某个子节点);
修改/设置节点属性
- 获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
- 设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
- attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
- 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."