JavaScript高级程序设计

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 变量引用函数 不带括号的函数名是访问函数指针 非调用函数 函数名本身就是变量

函数内部属性:argumentscallee属性指向arguments对象的函数(解耦,内部调用 )

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

函数也是对象(两个属性 lengthprototypexx.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.documentElementdocument.body(IE7-) scrollWidth scrollHeight 没有滚动条的 宽、高 scrollLeft scrollTop 滚动条左上间距 设置可定位滚动条


getBoundingClientRect() 元素相对视口的位置 四个属性:lefttoprightbottom


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属性
}

clientXclientY //客户区鼠标位置 pageXpageY //页面坐标 IE9++ screenXscreenY //整个电脑屏

留言

ˆ