js 落幕
1.关于路由的跳转
核心是 a 再取出后缀作为参数判断 最后 innerHTML 上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--这里返回的都是一个放在路由的后缀--> 9 <a href="#/love">爱</a> 10 <a href="#/myself">我自己</a> 11 <div id="app"></div> 12 13 <script> 14 <!--这里是通过location.hash来取出后缀做判断--> 15 window.onhashchange = function () { 16 console.log(location.hash); 17 switch (location.hash) { 18 case '#/love': 19 document.getElementById("app").innerHTML = "<h2>我爱你</h2>"; 20 break; 21 case "#/myself": 22 document.getElementById("app").innerHTML = "<h1>你是谁</h1>"; 23 break; 24 default: 25 break 26 } 27 28 } 29 </script> 30 31 </body> 32 </html>
2.变量提升 js 的特殊情况
在js 中 会把 变量提到最前面显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 10 console.log(a); 11 var a = 3; 12 //由于变量提升 会使其变成 var a console.log(a) 13 // a=3 console.log(a) 14 //结果为 undefinded 3 15 console.log(a); 16 17 18 19 console.log(b); 20 { 21 var b = 5; 22 console.log(b); 23 } 24 console.log(b) 25 // 同理 结果为 undefinded 5 5 26 </script> 27 28 </body> 29 </html>
3.tab栏选项卡
这里主要是通过联动 的 方式使页面和tab栏实现同步
但是会产生变量提升 所以以后会用let 代替 var 取消 变量提升
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 #app{ 15 width: 480px; 16 margin: 20px auto; 17 border:1px solid red; 18 } 19 ul{ 20 width: 100%; 21 overflow: hidden; 22 } 23 ul li{ 24 float: left; 25 width: 160px; 26 height: 60px; 27 line-height: 60px; 28 text-align: center; 29 background-color: yellow; 30 } 31 ul li a{ 32 text-decoration : none; 33 color: darkviolet; 34 } 35 li.active{ 36 background-color: red; 37 } 38 p{ 39 display: none; 40 height: 200px; 41 text-align: center; 42 line-height: 200px; 43 background-color: red; 44 } 45 p.active{ 46 display: block; 47 } 48 49 50 51 52 53 54 55 </style> 56 </head> 57 <body> 58 <div id="app"> 59 <ul> 60 <li class="active"> 61 <a href="#">我</a> 62 </li> 63 <li > 64 <a href="#">我</a> 65 </li> 66 <li > 67 <a href="#">我</a> 68 </li> 69 </ul> 70 <p class="active">首页内容</p> 71 <p >新闻内容</p> 72 <p>图片内容</p> 73 </div> 74 <script type="text/javascript"> 75 var olis = document.getElementsByTagName('li'); 76 var ops = document.getElementsByTagName("p"); 77 for ( var i=0;i<olis.length;i++) { 78 //这里用olis[i].index = i 是为了防止产生变量提升 79 olis[i].index = i; 80 olis[i].onclick = function () { 81 for ( var j = 0; j <olis.length;j++){ 82 olis[j].className = ""; 83 ops[j].className = ""; 84 } 85 86 87 this.className = "active"; 88 ops[this.index].className = 'active'; 89 } 90 91 } 92 /* 93 * (2) 94 // * 这里可以使用let 代替 var 不会发生变量提升 95 let olis = document.getElementsByTagName('li'); 96 let oPs = document.getElementsByTagName('p'); 97 98 99 for(let i = 0; i < olis.length; i++){ 100 101 olis[i].onclick = function() { 102 for(let j = 0; j < olis.length; j++){ 103 olis[j].className = ''; 104 oPs[j].className = '' 105 } 106 this.className = 'active'; 107 oPs[i].className = 'active'; 108 } 109 110 }*/ 111 112 113 </script> 114 115 116 117 118 119 120 121 </body> 122 </html>
4.insertBefore 兄弟之间的包含
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 abc{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 display: block; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="box"> 17 <p id="child1">alex</p> 18 </div> 19 <script> 20 21 var oDiv = document.getElementById('box'); 22 var op1 = document.getElementById('child1'); 23 24 // var oP = document.createElement('abc'); 25 //appendChild 是父子之间的包含 26 // oDiv.appendChild(oP); 27 28 var op2 = document.createElement('p'); 29 op2.innerText = 'wusir'; 30 31 //insertBefore 是兄弟之间的包含 32 oDiv.insertBefore(op2, op1); 33 34 35 36 37 38 39 </script> 40 41 </body> 42 </html>
5.时间
<1> 一次性定时器
可以做异步
开启一次性定时器:
var time = setTimeout(fn,1000);定时器函数
清除:
clearTimeout()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 } 12 </style> 13 14 </head> 15 <body> 16 <button id="start">开启</button> 17 <button id="clear">清楚</button> 18 <div id="box"></div> 19 <script> 20 var time =null; 21 document.getElementById("start").onclick = function () { 22 //建立时间的函数 一次性时间 异步 23 time = setTimeout(function () { 24 console.log(111); 25 },2000); 26 console.log(555) 27 }; 28 document.getElementById("clear").onclick = function () { 29 //这里是清除时间 clearTimeout()后面加参数 30 //一定要在时间显示前清楚 要不就没用了 31 clearTimeout(time) 32 33 } 34 </script> 35 36 </body> 37 </html>
<2>循环周期定时器
可以做动画
js 跟 python 一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开启循环定时器
time = setInterval(fn,1000);
清除:
clearInterval()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width: 100px; 9 height: 50px; 10 background-color: red; 11 } 12 </style> 13 14 </head> 15 <body> 16 <button id="start">开启</button> 17 <button id="clear">清楚</button> 18 <div id="box"></div> 19 <script> 20 // var time =null; 21 // document.getElementById("start").onclick = function () { 22 // //建立时间的函数 一次性时间 异步 23 // time = setTimeout(function () { 24 // console.log(111); 25 // },2000); 26 // console.log(555) 27 // }; 28 // document.getElementById("clear").onclick = function () { 29 // //这里是清除时间 clearTimeout()后面加参数 30 // //一定要在时间显示前清楚 要不就没用了 31 // clearTimeout(time) 32 // 33 // } 34 var time = null; 35 var count = 0; 36 document.getElementById("start").onclick = function () { 37 var oDiv = document.getElementById("box"); 38 // clearInterval(time); 39 //这里是开启循环 40 time = setInterval(function () { 41 count+=10; 42 oDiv.style.marginLeft = count+"px"; 43 },50); 44 document.getElementById("clear").onclick = function () { 45 clearInterval(time); 46 } 47 } 48 </script> 49 50 </body> 51 </html>
6js 面向对象
1 3.js面向对象 2 //使用Object()内置的构造函数来创建对象 3 4 5 // new Array() 6 // [] 7 8 /* 9 var person = new Object(); 10 11 person.name = 'alex'; 12 13 person.age = 18; 14 15 person.fav = function() { 16 17 alert(this.name); 18 } 19 person.fav(); 20 */ 21 /* 22 // 1.字面量方式创建对象 23 var person = { 24 name:'玖妖', 25 age:18, 26 fav:function() { 27 alert(this.name) 28 } 29 }; 30 31 person.fav(); 32 */ 33 34 //2.工厂模式创建 35 function createPerson(){ 36 var person = new Object(); 37 person.name = 'alex'; 38 39 person.age = 18; 40 41 person.fav = function() { 42 43 alert(this.name); 44 } 45 return person; 46 } 47 48 49 50 function createFruit(){ 51 var fruit = new Object(); 52 fruit.name = 'alex'; 53 54 fruit.age = 18; 55 56 fruit.fav = function() { 57 58 alert(this.name); 59 } 60 return fruit; 61 } 62 var p1 = createPerson(); 63 var f1 = createFruit(); 64 65 console.log(p1 instanceof Object); 66 console.log(f1 instanceof Object); 67 68 69 //3.自定义构造函数 70 function Person(name,age) { 71 72 this.name = name; 73 this.age = age; 74 this.fav = function() { 75 alert(this.name); 76 } 77 } 78 79 function Fruit(name,age) { 80 81 this.name = name; 82 this.age = age; 83 this.fav = function() { 84 alert(this.name); 85 } 86 } 87 var p1 = new Person('alex',17); 88 var f1 = new Fruit('wusir',19); 89 console.log(p1 instanceof Object); 90 console.log(f1 instanceof Object); 91 console.log(p1 instanceof Person); 92 console.log(f1 instanceof Fruit); 93 94 95 //4.原型对象创建对象 96 function Person(name,age) { 97 this.name = name; 98 this.age = age; 99 } 100 // Person.prototype 它是person的父类 101 102 103 // 原型 prototype 104 Person.prototype.showName = function() { 105 // this指的是person 106 console.log(this.name) 107 } 108 var p1 = new Person('alex',18); 109 console.log(p1); 110 p1.showName();
