7.流程控制<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>// 小案例var d = new Date()if (d.getDay() == 0){alert('今天是星期天')} else if (d.getDay() == 6){alert('今天是星期六')} else {alert('老老实实工作吧')}var x = 0switch (x) {case 0:console.log('星期天出去浪')breakcase 6:console.log('星期六出去浪')breakdefault:console.log('老老实实工作')break}// for循环for (var i=0;i<=5;i++){console.log(i)}// for循环遍历数组arr = ['Maxs_hu', 'Mcoco', 'xiaoergu']for (var i=0; i<arr.length; i++){console.log(arr[i])}// while循环var count = 0while (count<5){if (count == 5){count += 1console.log(count)continue}console.log(count)count++}</script></body></html>8.函数的使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>function f1(){console.log('无参函数')}function f2(a, b){console.log('有参函数', a+b)}function f3(){// 只能返回一个值,如果想返回多个.必须在数组内return [111, 222, 333]}var f = function (a, b){console.log(a+b)}f(111, 333)// 自执行函数(function (a, b){console.log(a+b)})(1, 2)// argument参数function f4 (a, b){console.log('argument', arguments.length, arguments[0])}f4(111, 222)</script></body></html>9.闭包函数<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>var arr = []for (var i=0;i<5;i++){var xfunction outter(x){// 将数据通过outter传入并储存封锁在函数局部内. localfunction f(){console.log(x);}arr.push(f)return f}outter(i)}arr[0]()arr[1]()</script></body></html>10.变量与函数提升<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>// 实例1: 变量提升console.log(x);// 变量提升. 所以不会报错var x = 11;// 先声明变量存在. 在做赋值变量console.log(x);// 实例二: 函数var y = 111;function f(){console.log("--->", y);// undefined --> 先检索局部变量里面有没有y. 发现有就不会去看全局变量了var y = 333;console.log("===>", y);// 333}// 实例三: if语句var z = 333;if (1) {console.log(z)// 这里if语句内也是全局的var z = 444;console.log(z)}console.log(z)// 实例四: 函数提升console.log(func)func()// 函数提升function func(){console.log(111)}func()</script></body></html>11.let语法补充<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>l = []for (let i=0;i<5;i++){// 可以打到闭包函数的效果. 但是能不使用就不要使用function f(){console.log(i)}l.push(f)}l[0]()l[1]()l[2]()l[3]()l[4]()</script></body></html>12.BOM操作<!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>// window.location = "https://www.baidu.com"// window.location.reload()// window.history.back()// 现在浏览器已经高度整合了这些操作// window.history.forward()// window.history.go(0)// 0: 刷新1: 前进 -1: 后退// window中navigator对象: 包含浏览器相关属性// navigator.appCodeName// navigator.appName// web浏览器全称// navigator.userAgent// 客户端绝大部分信息// navigator.platform// 浏览器运行所在的操作系统// 写一个点div标签的跳转操作: location// document.getElementsByClassName('box')[0].onclick = function (){//window.location.href = "https://www.baidu.com"// }// 浏览器弹窗操作// alert(123)// var res = confirm('what you name')// var username = prompt('请输入用户名')// var password = prompt('请输入密码')// window.open('https://www.baidu.com', "_blank", 'width:500px,height:500px')// 设置定时器// window.setTimeout(function (){// 只执行一次//window.location.href = "https://www.baidu.com"//window.location.reload()//console.log(123)// 只会打印一次// }, 3000)// var count = 1// window.setInterval(function (){// 循环执行//count += 1//console.log(count)// }, 5000)// 清除定时器var s2 = setInterval(function (){alert(234);}, 5000)clearInterval(s2)</script></body></html>13.dom-js查找<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div class="box"></div><div class="box"></div><div name="xxxx"></div><div><span>what are you doing!!!</span><div id="btn">1111<p>1212</p>2222<p>3434</p></div><a href="https://www.baidu.com"></a></div><script>var box = document.getElementsByClassName('box')var btn = document.getElementById('btn')// 通过id去查找标签var res = document.getElementsByTagName('div')// 通过TagName查找标签var res1 = document.getElementsByName('xxxx')// name属性去查找标签console.log(res.length)console.log(res1)var res2 =document.getElementById('btn').childNodes// 寻找所有的儿子节点. 包括文本在内var res3 = document.getElementById('btn').children// 寻找所有的儿子节点. 不包括文本var res4 = document.getElementById('btn').parentNode// 寻找父亲节点var res5 = document.getElementById('btn').nextSibling// 寻找下一个兄弟节点. 包括text节点var res6 = document.getElementById('btn').nextElementSibling// 寻找下一个兄弟节点. 不包括text节点var res7 = document.getElementById('btn').previousElementSibling// 寻扎上一个兄弟节点. 不包括text节点var res8 = document.getElementById('btn').firstElementChild// 寻找第一个儿子节点. 不包括text节点var res9 = document.getElementById('btn').firstChild// 寻找第一个儿子节点. 包括text节点var res10 = document.getElementById('btn').lastElementChild// 寻找最后一个儿子节点. 不包括text节点var res11 = document.getElementById('btn').lastChild// 寻找最后一个儿子节点. 包括text节点console.log(res10)</script></body></html>
推荐阅读
- 云原生时代的DevOps平台设计之道
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
- JavaScript之无题之让人烦躁的模块化
- 云原生强大且灵活的持续集成CI开源框架Tekton实战-上
- 云原生下基于K8S声明式GitOps持续部署工具ArgoCD实战-上
- 云原生虚拟网络 tun/tap & veth-pair
- 原生Redis跨数据中心双向同步优化实践
- 五 JPA - 原生SQL实现增删改查
- Javascript 手写 LRU 算法
- 如何逃离原生家庭的折磨 如何逃离原生家庭的伤害