js学习20150318(二)

一、

js组成：

1、ECMAScript  翻译 -- 解释器

2、DOM document object model  文档对象模型  document  操作页面元素

3、BOM browser object mode  浏览器对象模型  window  操作浏览器

兼容性

　　ECMAScript  ---  几乎没有兼容性问题

　　DOM  --- 60% -- 70%

　　BOM  --- 基本不兼容

 

二、ECMAScript部分：

标签 == 元素 == 节点

节点：

文本节点  -- 文字

元素节点  -- 标签

父节点： obj.parentNode

孩子节点：obj.children  数组  只包含第一层

首尾节点：

　　firstElementChild(高级浏览器) || firstChild(低级浏览器IE8-)

　　lastElementChild || lastChild

　　可以用children[0]  children[len-1]代替

兄弟节点：

　　previousElementSibling  ||  previousSibling

　　nextElementSibling  || nextSibing

创建元素：只能用document  标签名忽略大小写

　　document.createElement("标签名");

插入元素：

　　父级.appendChild(节点);  往元素的最后一位添加

　　父级.insertBefore(需要插入的节点(可以是新创建的，也可以是DOM中已经有的，如果是DOM中已经有的，那么相当于把这个节点在DOM中的位置给改变了)，往谁前面);    往前插

var oLi = document.createElement("li");
        oLi.innerHTML = "新的li";

oUl.insertBefore(oLi, oUl.children[0]);

oUl.insertBefore(oLi,null);  这样的话默认会添加到最后一个

删除节点：

　　父级.removeChild(节点)

看20140914中上移下移.html

 

三、BOM  window

　　window.alert();

　　window.navgator.userAgent

　　window.console.log();

　　var oNewWin = window.open(url, 打开的方式[,属性]); //返回一个新打开页面的一个引用

　　chrome  拦截   用户体验

　　ff    拦截 

　　ie  打开

　　注意：如果使用自己点击按钮之后打开，浏览器不会阻止

　　oBtn.onclick = function(){
        
        window.open("http://www.baidu.com/","_self");
        //清空原页面  重新写内容
        document.write("xxxxxx");
    
    };

　　window.close()

　　ff　　　　没反应　　安全　　1如果要关闭，需要修改ff的配置文件

　　　　　　　　　　　　　　　　2用户自己打开的页面才能关闭

　　chrome  立刻关闭

　　IE         有提示

20140914里的运行代码1.html和运行代码2.html我有点儿没看明白

chrome:

　　document.body.scrollTop/scrollLeft    滚动的高度 / 左侧滚动的距离

ff，ie：

　　document.documentElement.scrollTop/scrollLeft

当前可视区域的高度   宽度

document.dcoumentElement.clientHeight/clientWidth

location 能获取也能设置

protocol   协议 http/https/ftp/file

host         域名   "www.a.com"

pathname   路径　　"/app/a.html"

search　　数据　　"?a=12"

hash　　锚　　"#1"

 

oDiv && (oDiv.style.background = "red");　

 

获取属性的方式：

　　3种：1　　点

　　　　　2　　[]

　　　　　3　　getAttribute

　　获取：getAttribute(属性名)

　　设置：setAttribute("属性名", 值);

　　特性：setAttribute设置的属性只能通过getAttribute获取

　　getAttribute值能获取setAttribute设置的属性，不能访问  .形式添加的属性

 

offsetLeft/offsetTop

　　offsetLeft ： 元素到定位父级的一个距离

　　offsetParent：定位父级

　　parentNode : 结构父级

document  结构的父级  body=>html=>document

body    　　定位父级   body offsetParent ==> null

onmousedown　　鼠标按下

onmouseup　　鼠标抬起

onclick = onmousedown + onmouseup

var oImg = document.createElement("img");  //var oImg = new Image();
    
    oImg.onload = function(){
        alert("图片加载成功");    
    };
    oImg.onerror = function(){
        alert("图片加载失败");    
    };
    
    oImg.src = "http://img.hb.aicdn.com/ad96ff9bc5930603dbd9420203c491d91fe05da73b7bf-C6Qse3_fw658";
    
    document.body.appendChild(oImg);

　2014-09-21   选中文本.html   选中文本2.html

 

四、

事件冒泡：子元素的事件可以传播到父级元素上

特性：1、跟位置无关，只跟父子层级有关

　　2、元素不加事件，也会冒泡

　　3、冒泡可以取消

　　　　ev.cancelBubble = true;

2014-10-19 日历的例子.html

event.clientX/Y   可视区的一个坐标　　注意：最好把scrollTop/scrollLeft带上

 

五、键盘事件的监听

document.onkeydown = function(ev) {

　　var oEvent = ev || event;

　　//a 65　　z 90

　　//回车 13

　　alert(oEvent.keyCode);

}