[TOC] # 1.控制語句 * * * * * ## 1.1條件判斷 ### A單個條件判斷 ~~~ var age = 20; if (age >= 18) { // 如果age >= 18為true，則執行if語句塊 alert('成年人'); } else { // 否則執行else語句塊 alert('未成年人'); } ~~~ ### B多個條件判斷 > Tip:最大的條件放前面 ~~~ var age = 3; if (age >= 18) { alert('成年人'); } else if (age >= 6) { alert('少年'); } else { alert('小孩'); } ~~~ > ~~~ var x = 1; switch (x) { case 1: console.log('x 等于1'); break; case 2: console.log('x 等于2'); break; default: console.log('x 等于其他值'); } ~~~ ## 1.2 循環 ### while(){} ~~~ //eg: var a=0; while(a<=10){ //只要a<=10為true就一直循環 console.log(a); a++; } ~~~ ### for循環 ~~~ //eg: for(var i=0;i<=10;i++){ console.log(i) } ~~~ ~~~ //獲取數組中最大的值 var arr = [1,4,13,7,22]; var max = arr[0]; for(var i=1;i<arr.length;i++){ if(max<arr[i]){ max=arr[i]; } } console.log(max); ~~~ ### for...in... //獲取對象屬性的值 ~~~ var obj = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in obj) { alert(obj[key]); } ~~~ ## 1.3break和continue * * * * * ### 1.break 達到條件,跳出循環 ~~~ for (var i = 0; i < 10; i++) { if (i == 5) { break; } console.log(i); //0,1,2,3,4 } ~~~ ### 2.continue 結束本次循環,繼續開始下一次 ~~~ for(var i=0;i<5;i++){ if(i==2){continue}; console.log(i); //0,1,3,4 } ~~~ # 2.DOM基礎 * * * * * ## 1.1什么是DOM >W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的[內容、樣式和結構]()。 HTML Dom是關于如何[增,刪,改,查]() HTML 元素的標準。 DOM的支持性:凡是好用的IE9以下都不支持 DOM:document object model HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹：  ## 1.2節點 節點樹就是由一個個節點組成 父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。  ### 1.如何獲取節點 ~~~ getElementById() getElementsByTagName() getElementsByClassName() querySelectorAll() ~~~ 實現以下例子  ~~~ <button id="all">全選</button> <br> <button id="noAll">不選</button> <br> <button id="reverse">反選</button> <br> <input type="checkbox">籃球 <br> <input type="checkbox">足球 <br> <input type="checkbox">高爾夫 <br> <input type="checkbox">橄欖球 <br> <input type="checkbox">乒乓球 <br> <script> var all = document.getElementById("all"); var noAll = document.getElementById("noAll"); var reverse = document.getElementById("reverse"); var checks = document.getElementsByTagName("input"); all.onclick = function () { for (var i = 0; i < checks.length; i++) { checks[i].checked = true; } } noAll.onclick = function () { for (var i = 0; i < checks.length; i++) { checks[i].checked = false; } } reverse.onclick = function () { for (var i = 0; i < checks.length; i++) { checks[i].checked = (checks[i].checked == true) ? false : true; } } </script> ~~~ 實現： 點擊button按鈕,如果div是顯示的則隱藏,如果隱藏則顯示 ~~~ <div id="div" style="display:block"> </div> <button id="btn"> 切換 </button> <script> var div = document.getElementById("div"); var btn = document.getElementById("btn"); btn.onclick = function(){ var value = div.style.display; if(value == "block"){ div.style.display = "none" }else{ div.style.display = "block" } } </script> ~~~ Chrome下獲取外部樣式 ~~~ getComputedStyle(div,null)[attr] //IE下獲取 ele.currentStyle[attr] ~~~ ### 2.修改元素節點的內容,樣式 - 修改元素節點的內容 ~~~ innerHTML ~~~ - 修改樣式 ~~~ object.style.color="pink"; object.style["color"]="pink"; ~~~ >### 隔行變色  ~~~ <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ~~~ ~~~ //css //偶數項 ul>li:nth-child(odd){ color:red; } //奇數項 ul>li:nth-child(even){ color:green; } ~~~ ~~~ //js <script> var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ if(i%2==0){ lis[i].style.backgroundColor = "#ff2d51"; }else{ lis[i].style.backgroundColor = "#44cef6" } } </script> ~~~ - className ~~~ <p>hello world</p> //css .current{ color:red; } //JS var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ if(i%2==0){ lis[i].style.backgroundColor = "#ff2d51"; }else{ lis[i].style.backgroundColor = "#44cef6" } } ~~~ ### 3. textContent,nodeValue(了解) - node.textContent textContent屬性返回當前節點和它的所有后代節點的文本內容。 - Node.nodeValue 只有文本節點（text）和注釋節點（comment）,有文本值，因此這兩類節點的nodeValue可以返回結果，其他類型的節點一律返回null ### 4.節點的分類nodeType ~~~ a.nodeType==1 為元素節點 b.nodeType==2 為屬性節點 c.nodeType==3 位文本節點 ~~~ ~~~ <p class="current" id="test">hello world</p> <script> var eNode = document.getElementById("test"); var aNode = eNode.getAttributeNode("class"); var tNode = eNode.firstChild; alert(tNode.nodeType) </script> ~~~ ### 5.增加獲取節點 #### appendChild(node) ~~~ createElement(); //創建元素節點 createTextNode(); //創建文本節點 var p = document.createElement("p"); var txt = document.createTextNode("hello world"); //創建屬性節點 var attr = document.createAttribute("class"); attr.value = "democlass"; p.setAttributeNode(attr) p.appendChild(txt); document.body.appendChild(p) ~~~ #### parentNode.insertBefore(newNode,targetElementNode) ~~~ <ul id="parent"> <li>hello world</li> </ul> <script> var parent = document.getElementById("parent"); for(let i=0;i<3;i++){ let li = document.createElement("li"); li.innerHTML = "java"+i; parent.insertBefore(li,parent.firstElementChild) } </script> ~~~ #### 6.刪除節點 ~~~ parentNode.removeChild(childNode) ~~~ #### 7.修改節點(替換節點) ~~~ parentNode.replaceChild(newNode,oldNode); ~~~ ~~~ <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script> ~~~ #### 8.克隆節點 ~~~ //語法 node.cloneNode(true) ~~~ ~~~ <p id="test">hello world</p> <script> var test = document.getElementById("test"); var cTest = test.cloneNode(true); console.log(cTest); document.body.appendChild(cTest); </script> ~~~ # 3. DOM事件(event) JavaScript與HTML之間的交互式通過事件實現的 ~~~ onclick onfocus onblur onmouseover //鼠標移到某元素之上 onmouseout //鼠標從某元素移開 onload頁面加載時觸發 onchange域的內容改變時發生 onsubmit//表單中的確認按鈕被點擊時發生 //有事件一定有對應一個處理結果，用函數表示 onresize//瀏覽器的尺寸發生改變 onscroll //窗口滾動 onchange事件支持的標簽input,select,textarea ~~~ ~~~ <input type="text" id="txt"> <script> var txt = document.getElementById("txt"); txt.onchange = function () { this.value = "change" } </script> ~~~ - 鍵盤事件與KeyCode屬性 ~~~ onkeydown:用戶按下一個鍵盤按鍵時發生 onkeypress:在鍵盤按鍵按下并釋放一個鍵時發生 onkeyup:在鍵盤按鍵松開時發生 keyCode:返回onkeypress，onkeydown或onkeyup事件觸發的鍵的值的字符代碼，或鍵的代碼 ~~~ eg: ~~~ document.onkeydown = function(event){ alert(event.keyCode) } ~~~ ~~~ <p>你還可以輸入<em id="section">0</em>/150</p> <textarea cols="30" rows="10" id="txt"></textarea> <script> var section = document.getElementById("section"); var txt = document.getElementById("txt"); txt.onkeyup = function(){ var length = txt.value.length; section.innerHTML = length; } </script> ~~~ # 4. BOM * * * * * ? BOM(browser object model)瀏覽器對象模型 ## 1.window >window是瀏覽器的一個實例,在瀏覽器中,window對象有雙重角色,它既是通過Javascript訪問瀏覽器窗口的一個接口,又是ECMAScript規定的Global對象(全局對象)。 ~~~ var age =15; //聲明一個全局變量 window.name="chengchao"; //相當于var name = "chengchao" ~~~ 所有的全局變量和全局方法都被歸在window上 ### Window對象的方法 語法:window.alert() 語法:window.confirm(“msg”) 功能:顯示一個帶有指定消息和包含確定和取消按鈕的對話框。點擊確定返回true,取消返回false; eg:點擊確定按鈕刪除小米5 技術要點:點擊確定resutl返回true,取消返回false ~~~ <div><span id="mi">小米5</span><button id="btn">刪除</button></div> <script> var mi = document.getElementById("mi"); var btn = document.getElementById("btn"); btn.onclick = function(){ var result = window.confirm("你確定刪除嗎"); if(result){ mi.parentNode.removeChild(mi); } } </script> ~~~ ### 語法:window.prompt(“text,defaultText”) ~~~ 參數說明: text:在對話框中顯示的文本 defaultText:默認輸入文本 返回值:點取消按鈕,返回null 點確定按鈕,返回輸入的文本 eg: var result=window.prompt("請輸入你的星座","獅子座"); console.log(result); ~~~  語法:window.open(pageURL,name,parameters) 功能:打開一個新的窗口或查找一個已命名的窗口 參數說明: pageURL:子窗口的路基 name:子窗口的句柄(name聲明了新窗口的名稱,方便后期通過name對子窗口進行引用) parameters：窗口參數(各參數之間用逗號分隔) window.close() 功能:關閉窗口 * * * * * ### window對象方法——定時器 - #### 1.超時調用-setTimeout() - #### 2.間歇調用-setInterval() JavaScript是單線程語言,所有代碼按順序執行 #### setTimeout(code,millisec) 功能:在指定的毫秒數后調用函數或計算表達式 ~~~ 參數說明: 1.code：要調用的函數或要執行的JavaScript代碼 2.millisec：在執行代碼前需要等待的毫秒數 setTimeout方法返回一個id值，通過它取消超時調用 clearTimeout() ~~~ #### setInterval(code,millisec) ~~~ 功能:每隔一段時間執行一次代碼 clearInterval() ~~~ >eg:num=0,max=10,每過一秒num++,當num>max清除定時器 ~~~ var num=0,max=10; var interval = setInterval(function(){ num++; console.log(num) if(num>max){ clearInterval(interval) } },1000) ~~~ ~~~ //setTimeout的實現 var num =0,max=10; var time; function go(){ num++; console.log(num); time = setTimeout(go,1000) if(num>max){ clearTimeout(time) } } go(); ~~~ ~~~ //一個簡單的異步操作 function show(){ alert("a"); //放棄執行的權利 setTimeout(function(){ alert("c") },3000) alert("b"); } show(); ~~~ ## 2.location對象 location對象提供了與當前窗口中加載的文檔有關信息,還提供了一些導航的功能,他既是window對象的屬性,也是document對象的屬性。 ~~~ location.href與window.location.href等價 語法：location.hash 功能：返回URL中的hash(#號后跟0或多個字符),如果不包含則返回空字符串 語法：location.host 功能:返回服務器名稱和端口號 語法：location.hostname 功能:返回不帶端口號的服務器名稱 語法：location.pathname 功能：返回URL中的目錄和(或)文件名 語法：location.port 功能:返回URL中指定的端口號,如果沒有,返回空字符串 ~~~ ### 3.history對象 * * * * * ~~~ history對象保存了用戶在瀏覽器中訪問頁面的歷史記錄 語法：history.back() 功能:回到歷史記錄的上一步 相當于是用了history.go(-1) //-1表示前一步,-2前兩部 語法：history.go(1) 功能:回到歷史記錄的前一步 相當于history.forward() 語法：history.go(-n) 功能:回到歷史記錄的前n部 語法:history.go(n) 功能:回到歷史記錄的后n步 ~~~ ### 4.screen對象 ~~~ screen對象包含有關客戶端顯示屏幕的信息 screen.availWidth screen.availHeight ~~~ ### 5.navigator對象 ~~~ 1.掌握Navigator對象的userAgent屬性 2.掌握如何判斷瀏覽器的類型 3.掌握如何判斷設備的終端是移動還是PC UserAgent:用來識別瀏覽器名稱，版本，引擎以及操作系統等信息的內容。 //檢測瀏覽器類型 if(/Android|iphone|webOS/i.test(navigator.userAgent)){ location.href="mobile.html" }else if(/ipad/i.test(navigator.userAgent)){ location.href="pad.html" } ~~~ ## this的指向問題 在事件函數中,this指向正在執行事件的對象 eg: ~~~ <p>hello<p> <script> p.onclick = function(){ this.style.color = “red” } </script> ~~~ # 小項目 實現一個tab頁切換 - ## sHover http://www.jq22.com/demo/sHover-master20150718/# ~~~ div id="item1" class="sHoverItem"> <img id="img1" src="images/1.jpg"> <span id="intro1" class="sIntro"> <h2>Flowers</h2> <p> Flowers are so inconsistent! </p> <button>inconsistent</button> </span> </div> <script> var a = new sHover("sHoverItem", "sIntro"); a.set({ slideSpeed: 5, opacityChange: true, opacity: 80 }); </script> ~~~