《javascript高级程序设计》第一版笔记

函数无明确返回值时,返回的值是undefined
undefined表示对象已经声明,没有赋值.null表明对象不存在(null == undefined)
强制转换为boolean类型时,undefined、null、空字符串、0都返回false,其它的返回true;
在进行逻辑运算时,如果运算数不是原始Boolean类型,则返回对象。
== 和 === 区别是 ==在比较前会进行自动类型转换,而===不会进行类型转换
with语句是运行缓慢的代码段,尽量少用
java 与 js 中switch 的区别: js中switch case可以用字符串也可以用不是常是的值
js中可以声明两个函数名一样的函数而不会发生错误,后面的函数会覆盖前面的函数
闭包就是函数的内部函数调用了外部的变量
js原始类型: undefined、null、Number、String、Boolean
js引用类型: String、Number、Boolean、Object (虽然名字和原始类型一样,但引用类型是原始类型的包装类)
encodeURI和encodeURIComponent区别:后者只会转码所有的非标准字符,例如: 空格 --> %20
escape和encodeURI最大区别: escape只能转码ascii字符,所有建议少用
cell 向上取整, floor向下取整 ,round 标准的四舍五入
location.reload(true); 强制刷新,默认是false
obj.attributes.getNamedItem('id').nodeValue 访问节点的属性值
document.all ie返回所有元素 document.getElementsByTagName('*') other browser return
document.getElementsByName ie6仅仅检查input和img标签
document.getElementById('abc') ie6中如果abc是某元素的id值同时也是另一个元素的name值 那么会返回这两个元素
通过dom访问元素的class属性时 要通过className访问,不能通过class访问是因为class是保留字,估计留有其它用的
可以通过NodeIterator和TreeWalker遍历dom
dom事件分类 捕获型事件(DOM)、冒泡型事件(IE),dom型事件是坐documentElement向事件源捕获,然后再冒泡。而ie事件是直接从事件源向documentElement冒泡
addEventListener、removeEventListener ie6-ie8均不支持 只支持attachEvent、detachEvent
常用事件编号 回车:13 空格:32 回删:8
var target=event.srcElement || event.target; //事件源对象
var char=target.keyCode || target.charCode; //事件源对象接收的按键
event.returnValue=false ie阻止事件 event.preventDefault(); dom兼容阻止事件
event.cancelBubble=true ie阻止事件冒泡 event.stopPrapagation() dom兼容阻止事件冒泡   目前高版本的浏览器均支持cancelBubble和stopPropagation
keyDown > keyPress > keyUp 按字符键产生事件顺序
keyDown > keyUp 按非字符键产生的事件顺序
一直按字符键不松,会一直产生keyDown、keyPress事件。一直按非字符键不松只会产生keyDown事件
obj.currentStyle.color ie中的最终样式 getComputedStyle(obj,null).color dom中的最终样式,null可以是伪类时的样式 例如:'hover'
innerHTML、outerHTML、innerText、outerText firefox(16.0.0)不支持*Text,支持*html,chrome都支持
EvalError、ReferenceError、RangeError、synatexError、TypeError、URIError js异常类型
document.domain='qq.com'  设置域,可以跨子域访问。只能设置url中已经存在的值,所有baidu.com就不能设置成功
1160 单个tcp-ip包的大小,所有尽量控制js文件的大小在1160字节

/* 数组连结比'+'性能更高 */
function StringBuffer(){
    this._strings=new Array();
}
StringBuffer.prototype.append=function(str){
    this._strings.push(str);
}
StringBuffer.prototype.toString=function(){
    return this._strings.join('');
}
var d=new Date();
var sb=new StringBuffer();
for(i=0;i<100000;i++){
    sb.append(i);
}
sb.toString();
var d2=new Date();
console.log(d2-d);

/* 混合构造/原型方式*/
function o(a,b,c){
    this.a=a;
    this.b=b;
    this.c=c;
}
o.prototype.m=function(){
    console.log(this.a);
}
var t1=new o(1,2,3);
var t2=new o(4,5,6);
t1.m();
t2.m();

/* call 和 apply */
function classA(a,b){
    console.log(a+','+b);
}
function classB(a,b){
    classA.call(this,a,b); //参数为列表
    classA.apply(this,arguments); //传递为数组
    this.a=a;
    this.b=function(){
        console.log(a);
    }
}
var t1=new classB('1','2');
t1.b();
var t2=new classA('3','4');

/* 批量添加节点 */
var arr=[1,2,3,4,5,6];
var oFragment=document.createDocumentFragment();
for(i in arr){
    var oDiv=document.createElement('span');
    var oText=document.createTextNode(i);
    oDiv.appendChild(oText);
    oFragment.appendChild(oDiv);
}
document.body.appendChild(oFragment);

/* dom 访问节点*/
obj.firstChild 
obj.lastChild
obj.childNodes
obj.nodeName
obj.nodeValue
obj.nodeType
obj.ownerDocument 这个节点所属的文档
obj.previousSibling 上一个兄弟节点
obj.nextSibling 下一个兄弟节点
obj.hasChildNodes 是否包含兄弟节点
obj.attributes 返回节点包含的属性数组
obj.appendChild 
obj.removeChild
obj.replaceChild(newNode,oldNode)
obj.insertBefore(newNode,refNode)

/* dom 创建节点 */
document.createElement
document.createTextNode; 创建文本节点(text)
document.appendChild;
document.createDocumentFragment 文档碎片,把批量的节点添加到fragment后再添加到目标元素,减少界面重绘,提高性能

/* addEventListener*/
function show(){alert('clicked');}
var arr=[1,2,3,4,5,6];
var oFragment=document.createDocumentFragment();
for(i in arr){
    var oDiv=document.createElement('div');
    var oText=document.createTextNode(i);
    oDiv.addEventListener('click',show,false); //false:冒泡时触发 true:捕获时触发
    oDiv.appendChild(oText);
    oFragment.appendChild(oDiv);
}
document.body.appendChild(oFragment);

/* 兼容事件绑定*/
var EventUtil=new Object;
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
    if(oTarget.addEventListener)
            oTarget.addEventListener(sEventType,fnHandler,false); //false 冒泡时触发
    else if(oTarget.attachEvent)
            oTarget.attachEvent('on'+sEventType,fnHandler);
    else
            oTarget['on'+sEventType]=fnHandler;
}
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
    if(oTarget.removeEventListener)
        oTarget.removeEventListener(sEventType,fnHandler,false)
    else if(oTarget.detachEvent)
        oTarget.detachEvent('on'+sEventType,fnHandler);
    else
        oTarget['on'+sEventType]=null;
}

/* 查看css样式表中的样式 */
var oCSSRules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
var css='';
for(i=0;i<oCSSRules.length;i++) //样式表规则的集合
    css+=oCSSRules[i].cssText;
    //oCSSRules[i].style.color; //访问解析后的样式
console.log(css);



/*js 私有、静态、实例属性*/
function Person(age,face){
        var age=age; //私有
        this.face=face; //实例
        Person.gender='man'; //静态属性
}
var p1=new Person(20,'圆脸');
var p2=new Person(22,'尖脸');
Person.gender; //必须在Person构造函数运行后(Person() || new Person())才能调用到值
p1.gener;
p1.age;
p1.face;
posted @ 2012-11-21 18:03  microsoft_kk  阅读(436)  评论(0编辑  收藏  举报