Last class review
Today's content:
1. Scope,
variable promotion and function promotion
2. BOM operation = "control browser
3. DOM operation => control document
4. js exercises
5、jquery
01. Supplement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var arr=[]
// for (var i=0;i<=4;i++) {
// function f() {
// console.log(i)
// }
// arr.push(f)
// }
// 闭包函数
// var arr=[]
// for (var i=0;i<=4;i++) {
// function outter(x){
// function f() {
// console.log(x)
// }
// return f
// }
// var f=outter(i)
// arr.push(f)
// }
// var arr=[]
// for (var i=0;i<=4;i++) {
// function outter(x){
// function f() {
// console.log(x)
// }
// return f
// }
// var f=outter(i)
// arr.push(f)
// }
var arr=[]
for (let i=0;i<=4;i++) {
function f() {
console.log(i)
}
arr.push(f)
}
</script>
</body>
</html>
02. Variable promotion and function promotion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 示例1：变量提升
// var a
// console.log(a)
// var a=111;
// a=111
// console.log(a)
// 示例2:
// var x=111;
// function f() {
// console.log("---->",x)
// var x=222
// console.log("====>",x)
// }
// f()
// 示例3:
// var x=111;
// function f() {
// console.log("---->",x)
// x=222
// console.log("====>",x)
// }
// f()
// var a=111
// if (true) {
// console.log(a) // 111
// var a=222
// console.log(a) // 222
// }
// console.log(a) // 222
console.log(f)
f()
function f() {
console.log("fff")
}
console.log(f)
</script>
</body>
</html>
02.py
# l=[]
# for i in range(5):
# def outter(x):
# def f():
# print(x)
# return f
# f=outter(i)
# l.append(f)
#
# # print(l)
# l[0]()
# l[1]()
# l[2]()
# l[3]()
x=111
def func():
print(x)
x = 222
func()
03.BOM operation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">我是div,点我</div>
<script>
// document.getElementsByClassName("box")[0].οnclick=function () {
// location.href="http://www.baidu.com"
// }
// alert(123)
// var res=confirm("你确定删库吗?")
// console.log(res)
// var username=prompt("请输入用户名: ")
// var password=prompt("请输入密码: ")
// console.log(username,password)
// var win=open("http://www.baidu.com","_blanck","width=200,height=200")
// win.close()
// setTimeout(function () {
// location.href="http://www.baidu.com"
// location.reload()
// console.log(123)
// },3000)
// setInterval(function () {
// location.href="http://www.baidu.com"
// location.reload()
// console.log(123)
// },3000)
// var s1=setTimeout(function () {
// alert(123)
// },3000)
// clearTimeout(s1)
var s2=setInterval(function () {
alert(123)
},2000)
clearInterval(s2)
</script>
</body>
</html>
04.DOM lookup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
</head>
<body>
<div class="box">111</div>
<div class="box">2222</div>
<div id="btn">
aaaa
<p>111</p>
bbb
<p>2222</p>
ccc
</div>
aaaaaaaaaaaaaaa
<div name="xxx"></div>
<input type="text" name="xxx">
<script>
// var box3=document.getElementById("btn")
// var box=document.getElementsByClassName("box")
// var box=document.getElementsByTagName('div')
// var box=document.getElementsByName("xxx")
// console.log(box.length)
// console.log(box[1])
// var res1=document.getElementById("btn").childNodes
// var res2=document.getElementById("btn").children
// var res3=document.getElementById("btn").parentNode
// var res4=document.getElementById("btn").nextSibling
// var res5=document.getElementById("btn").nextElementSibling
// var res6=document.getElementById("btn").previousElementSibling
// var res7=document.getElementById("btn").firstElementChild
// var res7=document.getElementById("btn").firstChild
// var res7=document.getElementById("btn").lastElementChild
// var res7=document.getElementById("btn").lastChild
// console.log(res7)
</script>
</body>
</html>
05. Create, delete, replace
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<p>1111</p>
<p>2222</p>
<p>333</p>
<p>14444</p>
</div>
<script>
// 创建元素
var oDiv=document.createElement("div")
oDiv.style.width="80px"
oDiv.style.height="80px"
oDiv.style.backgroundColor="red"
// 末尾添加子元素
// var box=document.getElementsByClassName("box")[0]
// box.appendChild(oDiv)
// 插入子元素
// box.insertBefore(新节点,某个节点)
// var p3=document.getElementsByTagName("p")[2]
// console.log(p3)
// box.insertBefore(oDiv,p3)
// 删除子元素
// var box=document.getElementsByClassName("box")[0]
// var p3=document.getElementsByTagName("p")[2]
//
// box.removeChild(p3)
// 替换子元素
// box.replaceChild(新节点,某个节点)
var box=document.getElementsByClassName("box")[0]
var p3=document.getElementsByTagName("p")[2]
box.replaceChild(oDiv,p3)
</script>
</body>
</html>
06. Modify elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box" name="123213123" style="background-color: pink">
<div class="box2"></div>
<p>333333</p>
</div>
<img src="http://www.xxx.com/1.png" alt="">
<p id="ppp" name="new attribute">4444444</p>
<!--<input type="text">-->
<script>
var box=document.getElementsByClassName("box")[0]
// box.innerText="哈哈哈"
// box.innerHTML="<p>1111</p>"
// box.innerText="<p>哈哈哈哈啊</p>"
// var res=box.getAttribute("name")
// var res=box.setAttribute("x","11111")
// box.removeAttribute("class")
// console.log(res)
// box.setAttribute("style","background-color: red;width:100px")
// box.style.fontSize="50px"
// box.style.backgroundColor="red"
// var img = document.getElementsByTagName('img')[0]
// console.log( img.getAttribute("src"))
// console.log(img.src)
// var p=document.getElementById("ppp")
// alert(p.innerText)
// var inp = document.getElementsByTagName('input')[0]
// alert(inp.getAttribute("value"))
// alert(inp.value)
// var p=document.getElementById("ppp")
// alert(ppp.name)
</script>
</body>
</html>
07. Class attribute operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
background-color: red;
}
.box3 {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>11111</div>
<hr>
<div>2222</div>
<hr>
<div class="box22222">3333</div>
<script>
// var arr=document.getElementsByTagName('div')
// for (var i=0;i<arr.length;i++){
// arr[i].classList.add("box")
// }
// var oDiv=document.getElementsByClassName("box3")[0]
// oDiv.classList.remove('box3')
// var oDiv=document.getElementsByClassName("box3")[0]
// alert(oDiv.classList.contains("box3"))
// var oDiv=document.getElementsByTagName("div")[2]
// oDiv.classList.toggle("box3")
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
// window.οnlοad=function () {
// document.getElementsByClassName("box")[0].style.backgroundColor="red";
// }
// window.οnlοad=function () {
// document.getElementsByClassName("box")[0].style.fontSize="50px";
// }
jQuery(document).ready(function () {
$(".box").css("background-color","green")
})
$(function () {
})
</script>
</head>
<body>
<div class="box" id="xxx">1111</div>
<div class="box" >1111</div>
<div class="box" >1111</div>
<div class="box" >1111</div>
<script>
$(".box").css("background-color","red");
</script>
</body>
</html>