JavaScript捷径教程笔记
第2章、html、css和javascript
1、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，文本节点=3
this关键字
this表示当前引用的对象
image.onmouseover=function()
{
this.src='newimage.gif';
}
5、事件监听器：
element.addEventListener(event,listener,false)
event——事件类型click、focus、blur
listener——事件触发时执行的函数
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的一个属性
兼容得到事件对象event
function 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')}
};
