[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> ~~~