《JavaScript高级程序设计》要点记录 NET牛人

JavaScript 【核心[ECMAScript 文档对象模型[DOM] 浏览器模型[BOM] 】

<script>标签默认type="text/javascript"

async="async"异步script无顺序执行 defer="defer"先下载Dom加载执行

XHTML中必带结束标签小写 Cdata标签为了兼容给 CData标签加上注释外部引入无须处理

//<![CDATA[
    //特殊字符不解析 例如：>   
//]]>

<noscript> 不支持(未启用)js 显示内容

函数没有重载 传递参数可通过arguments对象来访问参数

没有块级作用域

if(true){
  var color='red'
} 
alert(color) //"red"

JS引擎垃圾回收（标记清除[新] 引用计数[旧]）引用计数应避免循环引用

var x=1; x=null; //解除引用以便下次垃圾处理运行回收

function({
    id:"1",
    name:"2", //对象最后属性加逗号在IE7-- 、 Opera会出错
});

数组的 length 属性不是只读

var colors=["red","blue"]; 
colors.length=1; 
colors[1] //undefined

获取对象属性

var x={id:1, name:"一", id name:"1一"};
x.id=1;
x.id name;//错误  
x["id name"]//正确

Date.Now();
//doSomething();
Date.Now();
//相减得到调用毫秒数 IE9+

RegExp

var xx = / abc / flags; //RegExp会共享同一实例，（需每次创建新实例）

flags: [g:全局（global）匹配] [i:不区分大小写] [m:多行匹配]

Function 变量引用函数 不带括号的函数名是访问函数指针 非调用函数 函数名本身就是变量

函数内部属性：arguments的callee属性指向arguments对象的函数(解耦，内部调用 )

function xx(n){ 
  if(n<=1) {
    return 1
  }
 else { 
    return n * arguments.callee(n-1)
  }
}

函数也是对象（两个属性 length 和 prototype）xx.length 返回接收参数个数

call(this值,参数1,参数2,...)

apply(this值，参数组)

String类型 chatAt(字符串索引) 返回指定索引的字符串 chatCodeAt(索引) 返回编码后的字符串 String.fromCharCode('编码1','编码2') 与 chatCodeAt()相反 concat('字符串1','字符串2') 字符串拼接 eval('字符串') 解析字符串运行需防注入

Object.defineProperty(xx,"name",{Configurable:false,Value:"值"}) IE8+ (实现不彻底，不建议使用) Configurable:能否删除xx.name属性重新定义默认true （定义为false 不可重定义true 会异常） Writable:能否修改xx.name的值默认true Value:xx.name这个属性的数据值默认undefined

sayHi() //错误 函数不存在
var sayHi=function(){alert("hi")}

函数声明：function xx(){}

函数表达式：var xx=function(){} //也是匿名函数

重新加载

location.reload() //有可能从缓存加载
location.reload(true) //从服务器加载

navigator对象 appName:浏览器名 appVersion:版本 cookieEnabled:cookie是否启用 language:主语言 onLine:是否连接因特网 Platform:系统平台

//IE8-
typeof document.createElement=="object" //com对象 所以是object

typeof document.createElement=="function" DOM方法 返回function

节点操作 appendChild() 向childNodes列表末尾添加节点 insertBefore() 两个参数（参数1：插入节点到参照节点后，参照节点为null则插入末尾） replaceChild() 替换节点 removeChild() 移除节点

HTML标签 id：元素唯一标识符 title：元素附加说明信息 lang：元素的语言代码 dir：语言方向（ltr rtl）

<input type="text" id="txt" value="123" dir="rtl" test1="you" />

getAttribute() 获取特性值包括自定义特性值 setAttribute() 设置特性名和值存在覆盖 removeAttribute() 删除特性

document.getElementById("txt").getAttribute("test1");

document.createElement() //创建新元
document.createTextNode("<b>hello</b>") //文本

querySelector() //css选择器 IE8+
querySelectorAll() //返回NodeList实例

contains()
//判断body是不是html的后代
document.documentElement.contains(document.body) //true

myDiv.style.removeProperty("border") //IE9+ 移除 应用默认值

offsetHeight：元素垂直占用空间大小（包括边框、滚动条） offsetWidth：水平（以像素计） offsetLeft：元素左外边框至左边距 offsetTop：上外边框至上边距

function getLeft(ele){
    var xx=ele.offsetLeft; var current=ele.offsetParent;
    while(current!==null){
        xx+=current.offsetLeft;
        current=current.offsetParent;
    }
}
//而一般是被包含在<div>元素中，div元素的offsetParent又是body  所以跟ele.offsetLeft值相同

clientWidth clientHeight 视口大小 document.documentElement 或 document.body（IE7-） scrollWidth scrollHeight 没有滚动条的宽、高 scrollLeft scrollTop 滚动条左上间距设置可定位滚动条

getBoundingClientRect() 元素相对视口的位置四个属性：left、top、right、bottom

document.createRange() //范围 操作节点、文本
document.body.createTextRange() //ie

事件流（IE9+）
事件冒泡

addEventListener()
removeEventListener() //IE9+
//用于处理指定和删除事件处理程序

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id); //myBtn
},false)
//按钮上为click事件添加处理程序  false:表示冒泡调用处理程序，true：表示捕获时调用

attachEvent()
detachEvent()    //IE8--
btn.attachEvent("onclick",function(){
    alert(this) //this===window
})
//IE8- "onclick",带on 只支持事件冒泡 处理程序添加到冒泡阶段 。不能删除匿名函数

function(event){
    var e = event || window.event; //IE event是window.event属性
    var target = e.target || e.srcElement;
}

clientX、clientY //客户区鼠标位置 pageX、pageY //页面坐标 IE9++ screenX、screenY //整个电脑屏

链接