这两天更进一步的了解了JS，老师让我们用原生的js编写图片切换和改变点击按钮样式，就是让我们学会怎么去把一个问题拆分，怎么将一个大问题拆分成许多的小问题，再用函数封装起来。比如一个点击按钮，让其点击时背景色发生改变，点击另一个时，上一个按钮要变回原来本有的颜色：这个问题用jquery，一行代码就搞定，但是用原生js就得分三个部分来考虑：
1.添加改变背景的样式。
2.怎么获取到除了当前点击的按钮以外其他的兄弟节点。
3.怎么去除按钮的样式属性。
也讲了事件委托，实现了可以删除新添加的元素的功能。后面我会把代码贴出来。
这两天上课讲得一些笔记：
1.需要注意的两个细节：（1）、不要随意修改别的对象的属性值，比如图片切换这个例子，要获取li的索引时，不能改变节点的index属性。
（2）、实现某个功能时，要封装好业务逻辑，做到改变dom节点时，不用改变业务逻辑。
2.属性：（1）、dom.parentNode ：dom节点的父元素。
（2）、dom.children : Element的属性，代表元素节点的所有子元素，Element是Node的扩展，也是他多种类型中的一种。
（3）、dom.childNode: Node中的属性，代表节点的所有子元素，而节点又分为元素节点、文本节点、属性节点、注释节点、文档节点等。
e.g：
Node的children属性为undefined.因为Node代表DOM中的节点，而上面也提到了children只是元素节点的属性。
（4）、dom.className : 为节点添加class名。
3.方法 ： （1）、dom.appendChild :appendChild() 方法向节点添加最后一个子节点。
（2）、dom.removeChild: removeChild() 方法指定元素的某个指定的子节点,以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
4. push()方法 : 用法： arr.push(Arr[i]) ,将Arr的第i个元素插入到arr数组中。
5. "==" 和"==="的区别： "=="只会比较值是否相等，比如 1 == "1" 是对的，但会true,而"==="是值和数据类型都会比较，完全相等才返回true,所以1 === "1" 返回false。
6. 关于函数讲了两个重要的点：（1）、函数可以被调用很多次，调用执行后，函数就会被销毁，这是函数的机制。
（2）、闭包是里面的函数若没有调用执行，那么外部的函数不会被销毁。
7. 原生js创建文本节点、元素节点，删除节点，添加文本节点到元素节点：
（1）、var txt = document.createTextNode("text"); //创建文本节点的方法。
（2）、var elem = document.createElement("li"); //创建元素节点 "li"。
（3）、elem.appendChild(txt); //添加文本节点到元素节点的最后子节点上。
（4）、ul.appendChild(elem) ; //在ul里添加li元素节点。
（5）、ul.removeChild(elem); //删除ul中的elem元素节点。
下面是用这些方法实现的添加水果和删除水果的功能的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dom节点添加删除</title> 6 <style> 7 span{ 8 cursor: pointer; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" id="foods"> 14 <input type="button" id="add" value="添加"> 15 <ul id="ul"> 16 <li>苹果 <span class="del">删除</span> </li> 17 <li>香蕉 <span class="del">删除</span> </li> 18 <li>橙子 <span class="del">删除</span> </li> 19 <li>桑葚 <span class="del">删除</span> </li> 20 </ul> 21 <script> 22 var foods = document.getElementById("foods"); 23 var add = document.getElementById("add"); 24 var ul = document.getElementById("ul"); 25 var li = ul.getElementsByTagName("li") 26 add.onclick = function(){ 27 var elemLi = document.createElement("li"); 28 var foodsVal = foods.value; 29 var txt = document.createTextNode(foodsVal); 30 elemLi.appendChild(txt); 31 ul.appendChild(elemLi); 32 var elemSpan = document.createElement("span"); 33 elemSpan.className = "del"; 34 var txtDelete = document.createTextNode(" 删除"); 35 elemSpan.appendChild(txtDelete); 36 elemLi.appendChild(elemSpan); 37 } 38 //下面的删除节点用的是事件委托，可以删除新添加上li。 39 ul.onclick = function(event){ 40 if(event.target.className == "del"){ //event.target就代表在ul的所有子元素下当前点击的元素。 41 ul.removeChild(event.target.parentNode); 42 } 43 }
8. 事件冒泡和时间捕获的问题：
这里就要提到addEventListener()方法，addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包 含这两种方 法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处 理程序；如果是false， 表示在冒泡阶段调用事件处理程序。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
下面是需要注意的事项：
（1）其中element是要绑定函数的对象。
（2）type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
（3）listener当然就是绑定的函数了，记住不要跟括号。
（4）最后一个参数是个布尔值，表示该事件的响应顺序。
下面是关于addEventListener的一个小例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件冒泡</title> 6 <style> 7 #outer,#inner,#con{ 8 margin: 0 auto; 9 padding: 50px 0; 10 } 11 #outer{ 12 height: 250px; 13 300px; 14 background-color: #999; 15 } 16 #con{ 17 height: 150px; 18 200px; 19 background-color: #ccc; 20 } 21 #inner{ 22 height: 50px; 23 100px; 24 background-color: #eee; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="outer"> 30 <div id="con"> 31 <div id="inner"></div> 32 </div> 33 </div> 34 <script> 35 var outer = document.getElementById("outer"); 36 var inner = document.getElementById("inner"); 37 var con = document.getElementById("con"); 38 inner.addEventListener("click",function(){ 39 console.log("inner"); 40 },true) 41 42 outer.addEventListener("click",function(){ 43 console.log("outer"); 44 },true) 45 con.addEventListener("click",function(){ 46 console.log("con"); 47 },true) 48 49
上面这个例子中，如果你点击id为inner的盒子，控制台会输出 outer con inner 以事件捕获的顺序调用程序。如果不用这个方法，只用单纯的点击事件，那么他会按冒泡 顺序调用执行程序。
9.回调函数
定义：将一个函数作为参数传给另一个函数或者方法，常见的setInterval(function(),1000) 就是将function函数传到了setInterval方法中。上面的 addEventListener方法也是回调函数。
下面有个例子
1 function fun(Fun){ //函数名fun 形参是Fun 2 Fun(); //这里调用名为Fun的函数，因为程序走到这里并没有执行，因为在后面调用是才执行。 3 console.log("xixi~"); 4 } 5 fun(function(){ //调用函数fun ，实参为一个函数，这里这个函数就是作为参数传给了fun函数，这时候fun函数执行，Fun()调用函数就可以执行被当作参数的函数了，即控制台会输出haha~。 6 console.log("haha~"); 7 })
下面是用原生JS编写的图片切换按钮背景颜色改变的例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>banner_roll_change</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 div{ 13 margin: 0 auto; 14 30%; 15 height: 300px; 16 position: relative; 17 } 18 div img{ 19 100%; 20 } 21 ul{ 22 position: absolute; 23 left: 50%; 24 margin-left: -60px; 25 } 26 ul li{ 27 float: left; 28 10px; 29 height: 10px; 30 background-color: #999; 31 border-radius: 50%; 32 margin-right: 20px; 33 } 34 /* ul li a{ 35 display: block; 36 }*/ 37 .active{ 38 background-color: red; 39 } 40 </style> 41 </head> 42 <body> 43 <div> 44 <img src="images/5.jpg" alt="" id="pic"> 45 </div> 46 <ul> 47 <li class="list"><a href="#"></a></li> 48 <li class="list"><a href="#"></a></li> 49 <li class="list"><a href="#"></a></li> 50 <li class="list"><a href="#"></a></li> 51 </ul> 52 // <script src="jquery-1.11.1.js"></script> 53 <script> 54 55 //用jquery编写点击背景色改变 56 // $("a").click(function(){ 57 // $(this).addClass("active").parent().siblings().find("a").removeClass("active"); 58 // }) 59 60 61 //用原声js 62 63 var lis = document.getElementsByClassName("list"); 64 var pic = document.getElementById("pic"); 65 var picArr = ["images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"]; 66 for(var i = 0;i<lis.length;i++){ 67 lis[i].onclick = function(ind){ 68 return function(){ 69 pic.src = picArr[ind]; 70 addClass(this,"active"); 71 var sib = siblings(this); 72 for(var j = 0;j<sib.length;j++){ 73 removeClass(sib[j],"active"); 74 } 75 } 76 }(i) 77 } 78 function addClass(obj,name){ //添加样式函数 79 obj.className = obj.className + " " + name; 80 } 81 function siblings(obj){ //获取到除当前按钮以外其他按钮 82 var sibArr = obj.parentNode.children; 83 var sibNewArr = []; 84 for(var i = 0;i<sibArr.length;i++){ 85 if(sibArr[i] != obj){ 86 sibNewArr.push(sibArr[i]); 87 } 88 } 89 return sibNewArr; 90 } 91 function removeClass(obj,name){ //删除样式函数 92 var classStr = obj.className; 93 var classArr = classStr.split(" "); 94 var classNewArr = []; 95 for(var i = 0;i<classArr.length;i++){ 96 if(classArr[i] != name){ 97 classNewArr.push(classArr[i]); 98 } 99 } 100 obj.className = classNewArr.join(" "); 101 } 102 </script> 103 </body> 104 </html>