1. 首頁 > 生活百科 > >

原生JavaScript( 二 )

生活百科原生JavaScript

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"http:// 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.http:// }// 瀏覽器彈窗操作// 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.http://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 ></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>

推薦閱讀