js基础总结（三）

滚轮事件
包括IE6在内的浏览器是使用onmousewheel，而FireFox浏览器一个人使用DOMMouseScroll

document.body.onmousewheel = function(event) {
    event = event || window.event;
    console.dir(event); 
};

document.body.addEventListener("DOMMouseScroll", function(event) {
    console.dir(event); 
});

滚轮方向

var scrollFunc = function (e) {  
        e = e || window.event;  
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
            if (e.wheelDelta > 0) { //当滑轮向上滚动时  
               //事件
            }  
            if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                //事件 
            }  
        } else if (e.detail) {  //Firefox滑轮事件  
            if (e.detail> 0) { //当滑轮向上滚动时  
               //事件 
            }  
            if (e.detail< 0) { //当滑轮向下滚动时  
                //事件  
            }  
        }  
    }  
    //给页面绑定滑轮滚动事件  
    if (document.addEventListener) {//firefox  
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
    }  
    //滚动滑轮触发scrollFunc方法  //ie 谷歌  
    window.onmousewheel = document.onmousewheel = scrollFunc;

滚动距离

function getScrollTop() {  
        var scrollPos;  
        if (window.pageYOffset) {  
        scrollPos = window.pageYOffset; }  
        else if (document.compatMode && document.compatMode != 'BackCompat')  
        { scrollPos = document.documentElement.scrollTop; }  
        else if (document.body) { scrollPos = document.body.scrollTop; }   
        return scrollPos;   
}

判断浏览器

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
  return "Chrome";
 }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

//以下是调用上面的函数
var mb = myBrowser();
if ("IE" == mb) {
    alert("我是 IE");
}
if ("FF" == mb) {
    alert("我是 Firefox");
}
if ("Chrome" == mb) {
    alert("我是 Chrome");
}
if ("Opera" == mb) {
    alert("我是 Opera");
}
if ("Safari" == mb) {
    alert("我是 Safari");
}

getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

S动态操作form

1.动态创建select

 function createSelect() {
        var mySelect = document.createElement("select");
        mySelect.id = "mySelect";
        document.body.appendChild(mySelect);
 }

2.添加选项option

    function addOption(){
//根据id查找对象， 
        var obj=document.getElementById('mySelect');
//添加一个选项 
        obj.add(new Option("文本","值")); //这个只能在IE中有效 
        obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
    }

3.添加选项option

    function addOption(){
//根据id查找对象， 
        var obj=document.getElementById('mySelect');
//添加一个选项 
        obj.add(new Option("文本","值")); //这个只能在IE中有效 
        obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
    }

4.删除一个选项option

    function removeOne() {
        var obj = document.getElementById('mySelect');
        //index,要删除选项的序号，这里取当前选中选项的序号 
        var index = obj.selectedIndex;
        obj.options.remove(index);
    }

5.获得选项option的值

    var obj = document.getElementById('mySelect');
    var index = obj.selectedIndex; //序号，取当前选中选项的序号 
    var val = obj.options[index].value;

6.获得选项option的文本

    var obj = document.getElementById('mySelect');
    var index = obj.selectedIndex; //序号，取当前选中选项的序号 
    var val = obj.options[index].text;

7.修改选项option

    var obj = document.getElementById('mySelect');
    var index = obj.selectedIndex; //序号，取当前选中选项的序号 
    var val = obj.options[index] = new Option("新文本", "新值");

8.删除select

    function removeSelect() {
        var mySelect = document.getElementById("mySelect");
        mySelect.parentNode.removeChild(mySelect);
    }

闭包
1、变量作用域
要理解闭包，首先要理解javascript的特殊的变量作用域。
变量的作用域无非就两种：全局变量和局部变量。
javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。
注意点：在函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明的是一个全局变量！

2、如何从外部读取函数内部的局部变量？
出于种种原因，我们有时候需要获取到函数内部的局部变量。但是，上面已经说过了，正常情况下，这是办不到的！只有通过变通的方法才能实现。那就是在函数内部，再定义一个函数。

function f1(){

　　　　var n=999;

　　　　function f2(){
　　　　　　alert(n); // 999
　　　　}

　　}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！

3、闭包的概念
上面代码中的f2函数，就是闭包。闭包就是能够读取其他函数内部变量的函数。由于在javascript中，只有函数内部的子函数才能读取局部变量，所以说，闭包可以简单理解成“定义在一个函数内部的函数“。所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

4、闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

5、使用闭包的注意点
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。