JavaScript-DOM續
一.路由的跳轉 <body> <a href="#/course">課程</a> <a href="#/main">首頁</a> <div class="show"></div> <script> //window.inhashchange是一個用來檢測路由是否變化的函數 window.onhashchange=function(){ //location.hash是獲取路由的最後一部分 switch (location.hash) { case '#/course' : document.getElementsByClassName('show')[0].innerHTML='我是課程'; break; case '#/main' : document.getElementsByClassName('show')[0].innerHTML='我是首頁'; break; default: break; } } </script> </body>二.tab欄選項卡 (1) <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } li{ float: left; } ul{ list-style: none; } a{ display: inline-block; height: 50px; width: 100px; line-height: 50px; text-align: center; text-decoration: none; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } p{ height: 200px; width: 300px; background-color: red; line-height: 200px; text-align: center; display: none; } .active{ display: block; } </style> </head> <body> <div> <ul class="clearfix"> <li> <a href="#">首頁</a> </li> <li> <a href="#">新聞</a> </li> <li> <a href="#">圖片</a> </li> <p >首頁內容</p> <p>新聞內容</p> <p>圖片內容</p> </ul> <script> oA=document.getElementsByTagName('a'); //此處的var i=0至關於在最上面的全局變量中var i,此處是i=0 for(var i=0;i<oA.length;i++){ oA[i].index = i;//把i找一個地方存儲起來 oA[i].onclick=function (){ for(var j=0;j<oA.length;j++){ oP=document.getElementsByTagName('p'); oP[j].className=''; oA[j].style.backgroundColor='#a5a6b0'; } oA[this.index].style.backgroundColor='red'; oP[this.index].className='active'; } } </script> </div> </body> //做用域:一個{}表明一個做用域 //變量提高:見上面代碼 (2)用let解決變量提高問題(用let不會產生變量提高的現象) <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } li{ float: left; } ul{ list-style: none; } a{ display: inline-block; height: 50px; width: 100px; background-color: #a5a6b0; line-height: 50px; text-align: center; text-decoration: none; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } p{ height: 200px; width: 300px; background-color: red; line-height: 200px; text-align: center; display: none; } .active{ display: block; } </style> </head> <body> <div> <ul class="clearfix"> <li> <a href="#">首頁</a> </li> <li> <a href="#">新聞</a> </li> <li> <a href="#">圖片</a> </li> <p >首頁內容</p> <p>新聞內容</p> <p>圖片內容</p> </ul> <script> oA=document.getElementsByTagName('a'); for(let i=0;i<oA.length;i++){ oA[i].onclick=function (){ for(let j=0;j<oA.length;j++){ oP=document.getElementsByTagName('p'); oP[j].className=''; oA[j].style.backgroundColor='#a5a6b0'; } oA[i].style.backgroundColor='red'; oP[i].className='active'; } } </script> </div> </body>二.定時器 (1)一次性定時器 能夠作異步 (2)循環週期定時器 能夠作動畫 js的垃圾回收機制不回收定時器對象 1.開一次性定時器 var timer=setTimeout(fn,1000); 清一次性定時器 clearTimeout(timer) 實例: <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="start">開啓定時器</button> <button class="end">關閉定時器</button> <script> var timer; document.getElementsByClassName('start')[0].onclick=function(){ timer=setTimeout(function(){ alert('111') },5000); }; document.getElementsByClassName('end')[0].onclick=function(){ clearTimeout(timer); }; </script> </body> 2.開循環定時器 timer=setInterval(fn,1000); 清循環定時器 clearInterval(timer) 實例: <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ height: 100px; width: 100px; background-color: orangered; } </style> </head> <body> <button class="start">開啓定時器</button> <button class="end">關閉定時器</button> <div class="box"></div> <script> var timer; var count=0; document.getElementsByClassName('start')[0].onclick=function(){ clearInterval(timer); timer=setInterval(function () { count+=10; oBox=document.getElementsByClassName('box')[0]; oBox.style.marginLeft=count+'px'; },500) }; document.getElementsByClassName('end')[0].onclick=function(){ clearTimeout(timer); }; </script> </body>三.JavaScript中的面向對象 1.使用Object或字面量方式建立對象 (1)使用Object內置的構造函數來建立對象 <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //建立student對象 var student=new Object(); //添加屬性 student.name='沈珍珠'; student.age='18'; //添加方法 student.work=function(){ alert('戰鬥') }; student.work(); </script> </body> (2)字面量方式建立 <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //建立一個student對象 var student={ //添加屬性 name:'廣平王', //用逗號隔開 age:'19', //添加方法 work:function(){ alert('皇位'); } }; </script> </body> 2.工廠模式建立對象 <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function factory(){ var student=new Object(); student.name='魏瓔珞'; student.work=function(){ alert('戰鬥'); }; return student; } var s1=factory(); s1.work(); var s2=factory(); </script> </body> 3.自定義的構造函數模式建立對象 <body> <script> //爲了與正常的函數區分,此處的函數名首字母要大寫 function Person(name,age){ //此處的this至關於面向對象中的self this.name=name; this.age=age; this.fav=function(){ alert(this.name); } } function Fruit(name,age){ this.name=name; this.age=age; this.fav=function(){ alert(this.name); } } //實例化時須要加一個new關鍵字 var f1=new Fruit('apple','18'); var p1=new Person('lili','18'); //instance用來檢測前者是不是後者的實例,全部對象都是Object的實例 console.log(p1 instanceof Person); console.log(f1 instanceof Fruit); </script> </body> 4.原型的模式建立對象 <body> <script> function Person(name,age){ this.name=name; this.age=age; } //Person.prototype是Person的父類 //每個實例化對象都繼承prototype Person.prototype.showName=function(){ //誰調用prototype,這裏的this就是誰 console.log(this.name); }; var p1=new Person('mimi',18); p1.showName(); var p2=new Person('麗麗',19); p2.showName() </script> </body>
相關文章
- 1. javascriptDom
- 2. web總結之javaScriptDOM
- 3. javaScriptDOM事件學習
- 4. JavaScriptDOM事件 學習打卡
- 5. 鬆軟科技課堂:JavaScriptDOM - 改變 CSS
- 6. 第8天：javascriptDOM小 案例、onmouseover 、onmouseout
- 7. JavaScriptDOM的節點操做筆記
- 8. 續
- 9. django-模型層續續
- 10. 持續集成持續部署持續交付_持續集成和部署
- 更多相關文章...
- • 構造連續的ICMP數據包 - TCP/IP教程
- • 僞造連續的ICMP數據請求包 - TCP/IP教程
- • RxJava操作符（五）Error Handling
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
