一、预解析
1.函数预解析
- 声明式的函数预解析时：整个函数被提升到script标签内的最上面
- 赋值式的函数预解析时：将赋值的变量提升到script标签内的最上面，后面的函数忽略
这也就是为什么赋值式的函数在函数体上面调用会报错而声明式不会：
sayHello()
function sayHello() {
console.log("Hello")
}
eat()
var eat = function() {
console.log("eat")
}效果：
2.变量预解析
变量的预解析：蒋声明的变量提升到script标签的最上面，后面的值没有
console.log(a); //由于变量的预解析此处打印的是undefined
var a = 10;
console.log(a) //由于上面已经赋值所以此处打印10
效果：
二、作用域
-
全局作用域：整个页面，只有页面关闭时，全局作用域才会失效
-
局部作用域：全局作用域中又划分出的小范围作用域，函数内部可以创建局部作用域，到目前为止，也只有函数可以创建局部变量
-
全局变量可以在函数内部进行访问，但是函数内部定义的变量不能在函数外部进行访问
-
变量采取就近原则
实例（全局）：
var a = "张三"
function test_1() {
console.log(a)
}
test_1()效果：
实例2：（局部就近原则）
var a = "张三"
function test_1() {
var a = "李四" //变量采取就近原则
console.log(a)
}
test_1()效果：
实例3：（可以在另一个script中调用）
<script>
var b = 200
</script>
<script>
console.log(b)
</script>效果：
三、DOM
获取DOM中的节点使用document对象
- 获取整个html文档：document.documentElement
-
获取头部：document.head
-
获取主体（body）：document.body
-
获取第一个元素：firstElementChild、firstChild
-
获取最后一个：lastElementChild
-
获取的是相邻兄弟（下一个）：nextElementSibling
-
获取的是相邻兄弟（前一个）：previousElementSibling
-
通过标签的id属性的值来获取到某个标签：getElementById()
-
通过标签的class属性的值来获取一组标签：getElementsByClassName()
-
根据标签的name属性的值来获取一组标签：getElementsByName()
-
根据标签名来获取一组标签：getElementsByTagName()
-
根据选择器名称来获取满足条件的并且是遇到的第一个标签：querySelector()
-
根据选择器名称来获取满足条件全部标签：querySelectorAll()
实例：(添加节点、删除节点和修改节点)
<!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>
<style>
ul {
list-style: none;
}
li {
margin-bottom: 10px;
padding-left: 20px;
width: 400px;
height: 30px;
line-height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<button id="btn" onclick="add()">添加</button>
<button onclick="del()">删除</button>
<button onclick="updd()">修改</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
function add() {
var ul = document.querySelector("ul")
//创建节点
var li = document.createElement("li")
//给新添加的节点文本
li.innerHTML = "这是新添加的"
//添加到ul中 appendChild():添加一个元素
ul.appendChild(li)
}
function del() {
//删除
var ul = document.querySelector("ul")
var li = ul.lastElementChild
//removeChild():删除一个元素
ul.removeChild(li)
}
function updd() {
//修改
var ul = document.querySelector("ul")
var li = ul.lastElementChild
li.innerHTML = "<a href='javascript:;'>我变成了a标签</a>"
}
</script>
</html>效果：
实例2：（密码的隐藏与显示）
<!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>
</head>
<body>
<input type="password" id="paw">
<button id="btn">eye</button>
</body>
<script>
var paw = document.getElementById("paw")
var btn = document.getElementById("btn")
btn.onclick = function() {
if (paw.type == "password") {
paw.type = "text"
} else {
paw.type = "password"
}
}
</script>
</html>效果：
实例3：（点击全选全部选中，一个没有选中全选按钮不会选中）
<!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>
<style>
p {
border-bottom: 1px solid #000;
padding-bottom: 40px;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<p><input type="checkbox" name="" id="selectAll">全选/全不选</p>
<ul class="shop">
<li><input type="checkbox" name="" id="">苹果</li>
<li><input type="checkbox" name="" id="">葡萄</li>
<li><input type="checkbox" name="" id="">梨</li>
<li><input type="checkbox" name="" id="">香蕉</li>
<li><input type="checkbox" name="" id="">西瓜</li>
</ul>
</body>
<script>
var selectAll = document.getElementById("selectAll")
var inputAll = document.querySelectorAll(".shop input")
// console.log(inputAll)
selectAll.onclick = function() {
//循环遍历出每一个input
for (var i = 0; i < inputAll.length; i++) {
// console.log(inputAll[i])
//通过checked属性进行选中
inputAll[i].checked = selectAll.checked
}
}
//给每一个input框一个单击事件
for (var i = 0; i < inputAll.length; i++) {
inputAll[i].onclick = function() {
var cont = 0;
for (var m = 0; m < inputAll.length; m++) {
if (inputAll[m].checked == true) {
cont++
}
}
//如果cont的值与水果的数量相等就全选
if (cont == inputAll.length) {
selectAll.checked = true
} else {
selectAll.checked = false
}
}
}
</script>
</html>效果：
2.样式获取
-
使用style属性获取样式时，只能获取行内样式
-
使用style属性获取样式时，改样式可读可写
-
getComputedStyle():获取标签样式，但只可读，不能写
<!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>
<style>
.div {
font-size: 34px;
}
.div2 {
font-weight: bold;
}
</style>
</head>
<body>
<div class="div div2" id="box" style="width: 200px; height: 200px; background-color: red; color: white;">这是一个div</div>
</body>
<script>
var div = document.getElementById("box")
console.log(div.style.width)
console.log(div.style.backgroundColor)
console.log(div.style.color)
//使用style属性获取样式时，只能获取行内样式
//使用style属性获取样式时，改样式可读可写
div.style.color = "blue";
//获取内部样式、外部样式
console.log(div.className) //可以获取到class的值
// div.className = "div2"
//getComputedStyle():获取标签样式，但只可读，不能写
console.log(getComputedStyle(div).width)
console.log(div.classList.remove("div"))
</script>
</html>效果：
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
