初级-DOM详解系列

1-初识DOM

DOM: Document Object Model (文档对象模型)
简单来说:document提供了一些API接口,赋予开发者操作页面的能力
document.XXX ——获取元素

几大关系：
父级关系：只有一层上下级关系（从当前往上找）
子级关系：只有一层以下一层关系
兄弟关系：同个父亲

按照节点划分：

属性节点是 E.attributes[0].nodeXXX
比如 id="div" nodeType=2 nodeValue=div nodeName=id

DOM TREE:6中关系
childNodes--获取某个节点下方所有的子节点 (类数组)
比如 node.childNodes[0];
节点树中,除parentNode外，都会受到看不见的空字符干扰！

元素树虽不是标准属性,但所有浏览器都支持!!!

2-节点类型加例子

var ul=document.getElementById("ul");
var lis=ul.childNodes;
document.onclick=function(){
  for(var i=0;i<lis.length;i++){
      if(lis[i].nodeType===1){
         lis[i].style.width="120px";
      }
   }
}

3-父节点和兄弟节点

......此处省略

4-节点例子

......此处省略

5-offsetLeft，offsetParent

offsetParent: 最近的有定位属性的祖先节点 如果祖先节点都没有定位 默认为body
offsetLeft: 左外边框到有定位父级的内边框的距离
offsetTop: 上外边框到定位父级内边框的距离

举个栗子

6-计算绝对位置getBoundingClientRect()

getBoundingClientRect() ----获取某个元素的信息(返回值为一个对象)
eg:left top bottom right height width (不带px)
注意: 获取值会根据滚动条变化

7-元素属性操作

elem.getAttribute("key") -----获取元素行间属性
elem.setAttribute("key","XX") ----设置元素的行间属性
elem.removeAttribute("key") -----删除元素的行间属性

特点：可以操作行间自定义属性 可以获取src，href等的相对地址

扩展:

*** Property vs Attribute
属性 html特性
Property: 内存中对象的属性，通常打.访问
Attribute: 指出现在页面html代码中的属性
标准属性：Property等效于Attribute
比如：a.setAttribute("href","url")——核心DOM
a.href="url"; ——HTML DOM
今后操作标准属性，用HTML DOM的.
因为所有标准属性都被HTMLXXXElement及其父类型预定义好了
特例：txt.setAttribute("class","类名");
txt.className="类名";

H5中自定义属性：只能用setAttribute,不能直接用.
比如：a.age=18;X——只定义在内存中，无法出现在html中
a.setAttribute("age",18);——age会出现在html中
.设置的，不能出现在页面上，就不能被getAttribute
setAttribute设置的，会出现在页面上，但不能用.访问
所以，h5规定：凡是自定义属性都要加data-前缀
获取自定义属性值：a.dataset.属性名
设置自定义属性值：a.dataset.属性名=值

8-元素宽高获取

来个实例===登录框（看知识点）
分析需求:
让一个不确定宽高的元素居中显示
元素的left=(可是区域的宽-元素的宽)/2
元素的top=(可是区域的高-元素的高)/2

可视区域的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight

元素的宽高
elem.offsetWidth / elem.offsetHeight -----计算边框
elem.clientWidth / elem.clientHeight ------不计算边框

9-创建元素+克隆元素

document.createElement("tagName") ----通过标签名的形式创建一个元素
parentNode.appendChild(childNode)----往一个节点里边添加一个子节点,注意是添加在最后
parentNode.insertBefore(childNode1,childNode2) ----往一个子节点的指定子节点前边插入一个节点 如上:childNode1插入到childNode2前边
parentNode.removeChild(childNodes) ----从一个节点中删除指定的子节点
parentNode.replaceChild(node,childNode) ----用node来替换childNodes,两个参数都必须写
node.cloneNode(boolean) ----克隆一个节点
------ true : 克隆元素和元素包含的子孙节点
------ false: 克隆元素但不包含元素的子孙节点(默认是false)
事件是不会被克隆的...
举个栗子：

var li=document.getElementCreate("li");
ul.appendChild(li);

注意: appendChild/inserBefore/repaceChild在操作一个已有元素时,是将已有的元素移动,而不是复制一份进行操作

10-表格

table.tHead ----获取表格头部
table.tFoot -----获取表格底部
table.tBodies --获取表格主体(获取到的是一个集合)
tBodies[n].rows/tHead.rows/tFoot.rows 表格的行 就是tr
table.rows ----获取很多行
rows[n].cells 单元格 就是td

11-表格操作

见实例

JS中级: BOM&EVENT

一. BOM相关方法及属性

1.BOM

打开&关闭窗口:
open(页面的地址url,打开的方式) ----方法 打开一个新的窗口(页面)
如果url为空,则默认打开一个空白页面
如果打开方式为空,默认为新窗口打开方式
返回值: 返回新打开的窗口的window对象
close() ----方法 关闭窗口
Firefox : 默认无法关
chrome : 默认直接关闭
ie : 询问用户

常用属性:
window.navigator.userAgent ----浏览器信息
window.location ----浏览器地址信息
window.location对象下还有其他属性:

2.文档宽高及窗口事件

窗口尺寸与大小

• 可视区宽高
  —— document.documentElement.clientWidth
  —— document.documentElement.clientHeight
• 滚动距离
  —— document.body.scrollTop/scrollLeft
  —— document.documentElement.scrollTop/scrollLeft
  Chrom认为是body 而其他浏览器认为是文档 兼容写法
  var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
• 内容高度
  —— document.body.scrollHeight
  —— 推荐获取内容高用offsetHeight
• 文档高度
  —— document.documentElement.offsetHeight
  —— document.body.offsetHeight

窗口事件
onscroll ----当滚动条滚动的时候触发
onresize ----当窗口大小发生改变的时候触发

二. Event-事件详解1

1.焦点事件

焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,呢么它就可以接收用户的输入.
我们可以通过一些方式给元素设置焦点
1.点击
2.tab
3.js
事件:
——obj.onfocus=function(){}
——obj.onblur=function(){}
方法:
——obj.focus(); 给指定的元素设置焦点
——obj.blur(); 取消指定元素的焦点
——obj.select();选择指定元素文本里的内容

2.event事件对象和clientX,clientY

event : 事件对象 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定地方 -event对象,供我们再需要的调用.
事件对象必须在一个事件调用的函数里面使用才有内容
事件函数: 事件调用的函数,一个函数是不是事件函数,不再定义的时候决定,而是取决于这个调用的时候
兼容问题:
ie/chrome :event是一个内置的全局对象
Firefox:事件对象是通过事件函数的第一个参数传入
如果一个函数是被事件调用的,这个函数定义的第一个参数就是事件对象
var ev=ev||event;

clientX ----- 当一个事件发生的时候,鼠标到页面可视区左边的距离
clientY ----- 当一个事件发生的时候,鼠标到页面可视区顶部的距离
onmousemove -----鼠标移动事件
扩展:触发频率不是像素,而是间隔时间,在一个指定的时间内(很短),如果鼠标的位置和上一次的位置发生了变化就会触发一次

实例:方块跟随鼠标移动

div{border:1px solid red;width:100px;height:100px;position:absolute;left:0;top:0;}

window.onload=function(){
    var oDiv=document.getElementById("div1")
    document.onmousemove=function(e){
        var e= e || event;
        var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
        oDiv.style.left=e.clientX+"px";
        oDiv.style.top=e.clientY+scrollTop+"px";
    }
}

3.事件流,事件冒泡机制

事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window
阻止冒泡 : 当前要阻止冒泡的事件函数中调用
DOM: e.stopPropagation()
IE: event.cancelBubble=true;
兼容代码:
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBublle=true;
}
event.cancelBubble=true; ----阻止当前对象的当前事件的冒泡
事件冒泡---下拉菜单案例:

div{width:100px;height:200px;background:#FF99CC;display:none;}
<button>按钮</button>
<div></div>
<script>
        window.onload=function(){
            var oBtn=document.getElementsByTagName("button")[0];
            var oDiv=document.getElementsByTagName("div")[0];
            oBtn.onclick=function(e){
                var e=e || event;
               e.cancelBubble=true;
                oDiv.style.display="block";
            }
            document.onclick=function(){
                oDiv.style.display="none";

            }
        }
 </script>

利用冒泡----分享到案例:哈哈

#div1{width:100px;height:200px;background:red;position:fixed;left:-100px;top:200px;}
#div2{background:#000;color:#fff;padding:10px 5px;width:20px;text-align:center;font-size:12px;position:absolute;top:60px;left:100px;}
 <div id="div1"><div id="div2">分享到</div></div>
<script>
        var div1=document.getElementById("div1");
        var timer=null;
        var onOff=true;
        div1.onmouseover=function(){
            if(onOff){
                clearInterval(timer);
                onOff=false;
                var n=parseInt(getStyle(div1,"left"));
                timer=setInterval(function(){
                    div1.style.left=n+"px";
                    n++;
                    if(n>0){
                        clearInterval(timer)
                        onOff=true;
                    }
                },10)
            }

        }
        div1.onmouseout=function(){
            if(onOff){
                clearInterval(timer);
                onOff=false;
                var n=parseInt(getStyle(div1,"left"));
                timer=setInterval(function(){
                    div1.style.left=n+"px";
                    n--;
                    if(n<-100){
                        clearInterval(timer)
                        onOff=true;
                    }
                },10)
            }

        }

        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }
       /* 又遇到这种情况啦
        * 心得:如何在一次事件没有执行完毕之前避免当时再次执行该事件 找了两种方法
        * 第一种方法:定义一个开关,让它为true,在true的条件下执行事件 执行过程中开关为false 执行完毕开关再变回true
        * 第二种方法:定义一个遮罩层,再第一次事件执行的时候生成 然后就可以防止再次执行事件穿透 第一次事件执行完毕遮罩层删掉云云
        * 因为子元素肯定要把事情告诉它爹,所以移入移除就直接跟它爹说了---这也是利用了冒泡的特性
        * */
</script>

4.事件绑定的第二种形式

你知道为什么会有事件绑定的第二种形式吗?
给一个对象绑定一个事件处理的第一种形式:
obj.onclick=fn1;
obj.onclick=fn2;
如果要给同一个对象绑定同一个事件的不同函数,像这种赋值的形式绑定,就会把前边的函数覆盖掉!!!

给一个元素绑定事件函数的第二种形式:
ie : obj.attachEvent(事件名,事件函数) ----没有捕获
==== 1.没有捕获
==== 2.事件名称有on
==== 3.事件函数执行的顺序: 标准ie>正序 非标准ie>倒序
==== 4.this指向window
标准: obj.addEventListener(事件名称,事件函数,是否捕获);
==== 1. 有捕获
==== 2. 事件名称没有on
==== 3. 事件执行顺序是正序
==== 4. this触发改事件
是否捕获: 默认是false ---- false:冒泡 ---- true:捕获

call() 函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表
如果call的第一个参数是null , 那么this指向原本该指向的内容
function fn(a,b){alert(this)}
fn.call(1,a,b); //调用函数 fn()==fn.call()
这样便解决IE下addachEvent的this指向window问题

事件绑定兼容的封装:

function bind(obj,evname,fn){
    if(obj.addEventListener){
        obj.addEventListener(evname,fn,false);
    }else{
       obj.attachEvent("on"+evname,function(){fn.call(obj)})
    }
}
bind(document,"click",fn)

三. Event-事件详解2

1.事件捕获

事件的捕获还是冒泡 取决于后边的true和false
冒泡是从里到外 --- 而捕获是从外到里

    <style>
        #div1{width:200px;height:200px;padding:20px;background:#215a9c;}
        #div2{height:160px;background:#FF99CC;padding:20px;}
        #div3{background:#009B00;height:120px;padding:20px;}
    </style>

<div id="div1"><div id="div2"><div id="div3"></div></div></div>
<script>
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var div3=document.getElementById("div3");
    function fn(){
        alert(this.id)
    }
//    div1.onclick=fn;
//    div2.onclick=fn;
//    div3.onclick=fn;
   div1.addEventListener("click",fn,true)
   div2.addEventListener("click",fn,true)
   div3.addEventListener("click",fn,true)
</script>

2.事件的取消

document.onclick=fn;
document.onclick=null; -----就取消啦~~~
ie: obj.dettachEvent(事件名称,事件函数)
标准: obj.removeEventListener(事件名称,事件函数,是否捕获);

3.键盘事件

onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发
event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 返回值是布尔值 -----
——当一个事件发生的时候，如果ctry||shift||alt 是按下的状态,返回true,否则返回false
eg:

document.onkeydown=function(ev){
  var ev=ev || event;
  alert(ev.keyCode);
}

document.onclick=function(ev){
        var ev=ev || event;
        alert(ev.ctrlKey)
 }

来个案例: 不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件 ----- 注意 document身上是可以带焦点的
onkeydown如果按下不抬起,那么会先停顿一下然后连续触发

 #div1{width:60px;height:60px;background:#215a9c;position:absolute;}
 window.onload=function(){
        var oDiv=document.getElementById("div1");
        document.onkeydown=function(ev){
            var ev=ev || event;
            switch (ev.keyCode){
                case 37: oDiv.style.left=oDiv.offsetLeft-10+"px";
                break;
                case 38: oDiv.style.top=oDiv.offsetTop-10+"px";
                break;
                case 39: oDiv.style.left=oDiv.offsetLeft+10+"px";
                break;
                case 40: oDiv.style.top=oDiv.offsetTop+10+"px";
                break;
            }
        }
    }

4.事件默认行为-默认事件

事件默认行为: 当一个事件发生的时候浏览器自己会默认做的事情,怎么阻止?
当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false
oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
自定义右键菜单:

  var oDiv=document.getElementById("div1")
    document.oncontextmenu=function(e){
        var ev=e || evnet;
        oDiv.style.display="block";
        oDiv.style.left=ev.clientX+"px";
        oDiv.style.top=ev.clientY+"px"
        return false;
    }
    document.onclick=function(){
        oDiv.style.display="none";
    }

四. 事件深入应用

1.拖拽的原理

onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
移动元素的事件前边加的是document

2.拖拽的问题及解决办法

拖拽案例的问题及解决:
拖拽的时候,如果有文字被选中,会产生问题:
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器的默认拖拽文字的效果
标准:return false 阻止默认行为
非标准ie:无效 ↓
obj.setCapture()-----设置全局捕获
当我们给一个元素设置全局捕获以后,那么这个元素就会监听后续发生的所有事件,当有事件发生的时候,就会被当前设置的全局元素触发
ie:有,并且有效果
ff:有,但是没效果
chrome: 没有
obj.releaseCapture()-----释放全局捕获

  window.onload=function(){
        var oDiv=document.getElementById("div1");
       oDiv.onmousedown=function(ev){
            var ev = ev || event;
            var disX=ev.clientX-this.offsetLeft;
            var disY=ev.clientY-this.offsetTop;
            if(oDiv.setCaptrue){
                oDiv.setCaptrue();
            }
            document.onmousemove=function(ev){
                var ev=ev || event;
                oDiv.style.left=ev.clientX-disX+"px";
                oDiv.style.top=ev.clientY-disY+"px";
            }
            oDiv.onmouseup=function(){
               document.onmousemove=oDiv.onmouseup=null;
               if(oDiv.releaseCapture){
                   oDiv.releaseCapture();//释放全局捕获
               }
            }
            return false;
       }
    }

解决办法都是同一个:
标准:阻止默认行为
非标准:全局捕获

3.拖拽的封装-限制范围,磁性吸附

一个完整的PC端封装拖拽效果实例:

var oDiv=document.getElementById("div1");
remove(oDiv)
function remove(obj){
    obj.onmousedown=function(ev){
        var ev = ev || event;
        var disX=ev.clientX-this.offsetLeft;
        var disY=ev.clientY-this.offsetTop;
        if(obj.setCapture){
            obj.setCapture();
        }
        document.onmousemove=function(ev){
            var ev=ev || event;
            var L=ev.clientX-disX;
            var T=ev.clientY-disY;
            if(L<0){
                L=0;
            }else if(L>document.documentElement.clientWidth-obj.offsetWidth){
                L=document.documentElement.clientWidth-obj.offsetWidth;
            }
            if(T<0){
                T=0;
            }else if(T>document.documentElement.clientHeight-obj.offsetHeight){
                T=document.documentElement.clientHeight-obj.offsetHeight;
            }
            obj.style.left=L+"px";
            obj.style.top=T+"px";
        }
        obj.onmouseup=function(){
            document.onmousemove=obj.onmouseup=null;
            if( obj.releaseCapture){
                obj.releaseCapture();//释放全局捕获
            }
        }
        return false;
    }
}

关于磁性吸附的效果就不做实例代码了.简单说明一下,如上案例 如果把 if(L<0){L=0;}=====>if(L<100){L=0} 就可以实现啦 当div的left小于100的时候 啪的一下就被吸过去了 就是这个效果 哈哈哈

4.JS中级课程-碰撞检测

所谓的碰撞检测--就是位置重合
计算方法: 九宫格
上个栗子:(*￣︶￣)

<style>
     #div1{width:100px;height:100px;background:Red;position:absolute;}
     #img{width:90px;height:80px;background:#e9546b;position:absolute;left:450px;top:200px;color:#fff;text-align:center;}
 </style>
<div id="img">碰撞物体</div>
<div id="div1"></div>
    var oDiv=document.getElementById("div1");
    var oImg=document.getElementById("img");
    remove(oDiv,oImg)
    function remove(obj,img){
        obj.onmousedown=function(ev){
            var ev = ev || event;
            var disX=ev.clientX-this.offsetLeft;
            var disY=ev.clientY-this.offsetTop;
            if(obj.setCapture){
                obj.setCapture();
            }
            document.onmousemove=function(ev){
                var ev=ev || event;
                var L=ev.clientX-disX;
                var T=ev.clientY-disY;
                var L1=L;
                var T1=T;
                var R1=L+obj.offsetWidth;
                var B1=T+obj.offsetWidth;
                var L2=img.offsetLeft;
                var T2=img.offsetTop;
                var R2=img.offsetLeft+img.offsetWidth;
                var B2=img.offsetTop+img.offsetHeight;
                if(R1<L2 ||L1>R2||B1<T2||T1>B2){
                    img.style.background="#e9546b";
                }else{
                    img.style.background="yellow";
                }
                if(L<0){
                    L=0;
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){
                    L=document.documentElement.clientWidth-obj.offsetWidth;
                }
                if(T<0){
                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetHeight){
                    T=document.documentElement.clientHeight-obj.offsetHeight;
                }
                obj.style.left=L+"px";
                obj.style.top=T+"px";
            }
            obj.onmouseup=function(){
                document.onmousemove=obj.onmouseup=null;
                if( obj.releaseCapture){
                    obj.releaseCapture();//释放全局捕获
                }
            }
            return false;
        }
    }

5.JS中级课程拖拽改变层大小

比如 拖拽一个窗口的丝绸 改变窗口的大小 上案例:

#div1{width:100px;height:100px;position:absolute;left:500px;top:200px;box-sizing:border-box;border:10px solid #1A68A2;}
window.onload=function(){
    var oDiv=document.getElementById("div1");
    oDiv.onmousedown=function(ev){
        var ev=ev||event;
        var disW=this.offsetWidth;
        var disX=ev.clientX;
        var disL=this.offsetLeft;
        var b="";
        if(ev.clientX>this.offsetLeft+this.offsetWidth-10){
            //alert("right");
            b="right"
        }
        if(ev.clientX<this.offsetLeft+10){
           // alert("left");
            b="left";
        }
        document.onmousemove=function(ev){
            var ev=ev || event;
            switch(b){
                case "left":
                    oDiv.style.width=disW-(ev.clientX-disX)+"px";
                    oDiv.style.left=disL+(ev.clientX-disX)+"px";
                    break;
                case "right":
                    oDiv.style.width=disW+(ev.clientX-disX)+"px";
                    break;
            }
        }
        oDiv.onmouseup=function(){
            document.onmousemove=document.onmoseup=null;
        }
        return false;
    }

}

6.滚动条的模拟和扩展应用

公式.jpg

模拟滚动条代码案例:

 <style>
        #div1{width:30px;height:500px;background:black;position:absolute;left:10px;top:10px;}
        #div2{width:30px;height:30px;background:red;position:absolute;left:0;top:0;}
        #div3{width:500px;height:500px;background:#215a9c;position:absolute;left:50px;top:10px;}
    </style>
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
<script>
window.onload=function(){
    var oDiv1=document.getElementById("div1");
    var oDiv2=document.getElementById("div2");
    var oDiv3=document.getElementById("div3");
    var maxTop=oDiv1.offsetHeight-oDiv2.offsetHeight;
    oDiv2.onmousedown=function(ev){
        var ev=ev || event;
        var disY=ev.clientY-this.offsetTop;
        document.onmousemove=function(ev){
            var ev=ev || event;
            var T=ev.clientY-disY;
            if(T<0){
                T=0;
            }else if(T>maxTop){
                T=maxTop;
            }
            oDiv2.style.top=T+"px";
            oDiv3.style.height=500*(T/maxTop)+"px";
        }

        oDiv2.onmouseup=function(){
            document.onmousemove=oDiv2.onmouseup=null;
        }
        return false;


    }
}
</script>

模拟滚动条控制内容代码案例:

 <style>
        #div1{width:30px;height:500px;background:black;position:absolute;left:10px;top:10px;}
        #div2{width:30px;height:30px;background:red;position:absolute;left:0;top:0;}
        #div3{width:500px;height:500px;background:#215a9c;position:absolute;left:50px;top:10px;overflow:hidden;}
        #div4{position:absolute;top:0;left:0;}
    </style>
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3">
    <div id="div4">这里有很多很多的内容...此处省略一万字 看效果</div>
</div>
<script>
    window.onload=function(){
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var oDiv3=document.getElementById("div3");
        var oDiv4=document.getElementById("div4");
        var maxTop=oDiv1.offsetHeight-oDiv2.offsetHeight;
        oDiv2.onmousedown=function(ev){
            var ev=ev || event;
            var disY=ev.clientY-this.offsetTop;
            document.onmousemove=function(ev){
                var ev=ev || event;
                var T=ev.clientY-disY;
                if(T<0){
                    T=0;
                }else if(T>maxTop){
                    T=maxTop;
                }
                oDiv2.style.top=T+"px";
                oDiv4.style.top=(oDiv3.clientHeight-oDiv4.offsetHeight)*T/maxTop+"px";
            }

            oDiv2.onmouseup=function(){
                document.onmousemove=oDiv2.onmouseup=null;
            }
            return false;


        }
    }
</script>

五. 鼠标滚轮和COOKIE

1.鼠标滚轮

ie/chrome : onmousewheel ----- 鼠标滚轮事件
event.wheelDelta ----- 数字类型的值
上:120
下:-120
firefox : DOMMouseScroll --- 支持火狐 必须用addEventListener
event.detail
上:-120
下:120
return false 阻止的是 obj.on时间名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();
兼容：

    window.onload=function(){
        var oDiv=document.getElementById("div1");
        oDiv.onmousewheel=fn;
        if(oDiv.addEventListener){
            oDiv.addEventListener("DOMMouseScroll",fn,false);
        }
        function fn(ev){
            var ev=ev || event;
            var b=true;
            if(ev.wheelDelta){
                b=ev.wheelDelta>0?true:false;
            }else{
                b=ev.detail<0?true:false;
            }

            if(b){
                this.style.height=this.offsetHeight-10+"px";
            }else{
                this.style.height=this.offsetHeight+10+"px";
            }
        }

    }

2.cookie

cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来向访问者电脑上存储数据
1.不同的浏览器存放的cookie位置不一样,也是不能通用的
2.cookie的存储是以域名的形式进行区分的
3.cookie的数据是可以设置名字的 j.name=leo
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样

我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie
他会把所有的cookie通过一个分号+空格的形式串联起来

如果我们想长时间存放一个cookie,需要在设置这个cookie的时候同时给他设置一个过期的时间 cookie默认是临时存储的,当浏览器关闭进程的时候,自动销毁
document.cookie='名称=值;expires='+字符串格式的时间;

encodeURI(n)
decodeURI()

案例:

<input type="text" id="username">
<input type="button" value="登陆" id="login">
<input type="button" value="删除" id="del">

<script>
    window.onload=function(){
        var oUsername=document.getElementById("username");
        var oLogin=document.getElementById("login");
        var oDel=document.getElementById("del");
        if(getCookie("username")){
            oUsername.value=getCookie("username");
        }
        oLogin.onclick=function(){
            alert("登陆成功");
            setCookie("username",oUsername.value,1)

        }
        oDel.onclick=function(){
            removeCookie("username");
            oUsername.value="";
        }
    }
    /*封装cookie*/
    function setCookie(key,value,t){
        var oDate=new Date();
        oDate.setDate(oDate.getDate+t);
        document.cookie=key+"="+value+';expiers='+oDate.toGMTString();
    }
    function getCookie(key){
        var arr1=document.cookie.split(';');
        for(var i=0;i<arr1.length;i++){
            var arr2=arr1[i].split("=");
            if(arr2[0]==key){
                return decodeURI(arr2[1])
            }
        }
    }
    function removeCookie(key){
        setCookie(key,'',-1);
    }
</script>