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),这时一定要小心,不要随便改变父函数内部变量的值。

你可能感兴趣的:(js基础总结(三))