JavaScript捷徑教程筆記

第2章、html、css和javascript1、CSS的特異性——定義的優先順序！important關鍵字強行應用樣本2、原型prototype其他語言中1000個對象要有1000個屬性和方法，js中引入原型屬性，附在原型屬性上的方法被所有對象共用。3、值傳遞和引用傳遞對象作為參數時是引用傳遞var foo =function(){};foo.prototype.value=5;function bar(obj){obj.value=6;}bar(foo);alert(foo.value);//值為6函數作為參數傳遞時，會將函數複製了一份再傳遞進去var foo=function();foo.prototype.value=5;foo.prototype.addvalue=function(){foo.value=6;}function bar(func){func();}bar(foo.addvalue);alert(foo.value);//值為6要讓傳入的參數立刻執行，在傳遞時帶上()bar(foo());4、javascript與DOM檢查html文檔節點類型：元素節點=1，文本節點=3this關鍵字this表示當前引用的對象image.onmouseover=function(){this.src='newimage.gif';}5、事件監聽器：element.addEventListener(event,listener,false)event——事件類型click、focus、blurlistener——事件觸發時執行的函數false——是否啟用事件捕捉6、事件捕捉與事件冒泡事件從上到下捕捉，從下到上冒泡IE不支援事件捕捉IE中追加事件element.attachEvent('onclick',func);參數：帶on首碼的事件名稱、要調用的函數相容瀏覽器的事件監聽器函數：function addListener(element,event,listener){if(element.addEventListener){element.addEventListener(event,listener,false);}else if(element.attachEvent){element,attachEvent('on'+event,listener);}}7、檢查上下文執行函數時，this指向擁有這個函數的對象。預設時函數屬性window對象function myfunc(){alert(this);//this指向window對象}el.methodname=function(){alert(this);//this指向el對象}對象el的方法el.methodname作為函數傳遞給另一個函數myfunc時，傳遞的僅是對象的方法el.methodname的引用，此時this指向myfunc的擁有者window要讓函數func在另一個對象el上下文中執行，即讓func內部的this指向el，使用call:function myfunc(func){func.call(el);//func內部的this指向el}8、IE6之前不會把事件對象作為參數傳遞，而將事件對象作為window的一個屬性相容得到事件對象eventfunction openwin(event){event=event||window.event;}事件委託冒泡機制使事件發生元素上層的元素也能接收到事件。要綁定的元素比較多時，可以為每個元素添加事件處理器，也可以使用事件委託。function evtHandler(evt){event=event||window.event;var currentElement=event.target || event.srcElement;var eventElement=this;while(currentElement && currentElement!=eventElement){if(currentElement.className=='theone'){alert('get it');break;}}}var el=document.getElementById('test');el.onclick=evtHandler;第6章、視覺效果1、讓類的參數既可以是元素引用，又可以是ID字串：function aa(element){var el=element;if(typeof el =='string')el=document.getElementById(element);if(!el) return false;}傳入多個參數時，可以把參數改成字面量：function aa(options){var el=options.element;if(typeof el=='string')el=document.getElementById(options.element);if(!el) return false;}var options = {element:document.getElementById('elementID'),property:'left',from:0,to:200}new aa(options);2、定時函數：var intervalID = setInterval(aa,1000);var timeoutID = setTimeout(aa,1000);取消動畫：clearInterval(intervalID);clearTimeout(timeoutID);3、動畫架構：function Animation(options){var el=options.element;if(typeof el=='string')el=document.getElementById(options.element);if(!el) return false;var fps=30;function animate(){}var intervalID=setInterval(animate,1000/fps);}4、完善動畫架構——提供啟動、停止、重設方法；提供公用API，讓執行個體化的結果作為對象返回：function Animation(options){var el=options.element;if(typeof el=='string')el=document.getElementById(options.element);if(!el) return false;var fps=30;var step=0;//正在執行的步數var numsteps = options.duration/1000*fps;//總步數var interval = (options.from - options.to)/numsteps;//步之間的間隔var intervalID; //定時函數傳回值，用於控制停止function animate(){var newval = options.from - (step * interval);if(step++< numsteps){el.style[options.property] = Math.cell(newval)+'px';}else{el.style[options.property] = options.to + 'px'；publicMethods.stop();}}var publicMethods = {start:function(){intervalID=setInterval(animate,1000/fps);},stop:function(){clearInterval(intervalID);},gotoStart:function(){step=0;el.style[options.property] = options.from + 'px';},gotoend:function(){step=numsteps;el.style[options.property] = options.to +'px';}}return publicMethods;}擴充API，回調function animate(){var newval=option.from-(step*interval);if(option.onstart && step == 0) option.onstart();if(option.onstep) options.onstep;//...}options需要增加屬性：var options = {element:document.getElementById('elementID'),property:'height',from:0,to:200,onstart:function(){ console.log('started')},onstep:function(){ console.log('stepped')},onend:function(){ console.log('ended')}};