慕课-tooltip提示框总结

在慕课上学Waynej老师的tooltip浮动提示框，老师每次讲课都会强调搬砖的流程，这点在上了老师的几节课后宝宝终于体会到了：

分析→设计→编码→优化

分析：分析该功能到底是怎样的，其实就是需求分析，具体可通过演示过程来知道；

设计：分析实现以上功能需要的技术点，详细落实html，css和js部分，分析代码结构，形成大致的样子

编码：搬砖

优化：对缩写的代码分析优化（tooltip案例中主要是缩写重复使用的方法；一些经常使用到的元素提前定义好，免得每次用都去获取一次Dom；还有就是冒泡绑定事件（避免多个事件添加到子元素，可将一些相同的方法绑定到父元素然后冒泡处理；其次冒泡允许多个操作被集中处理））

好了现在是具体哒

判断IE浏览器：

var isIE = navigator.useAgent.indexOf('MSIE')>=0;

但是以上方法不能判定是否是IE11，综合能判断包括IE11的代码如下:

var isIEeleven = navigator.useAgent.indexOf('Trident') >= 0 && navigator.useAgent.indexOf('rv:11') >=0;

判断IE8-10的如下：

vavigator.useAgent.indexOf('MSIE') >=0 && vavigator.useAgent.indexOf('Trident') >=0;

判断IE6-7的如下：

vavigator.useAgent.indexOf('MSIE') >=0;

顺手总结一下好了，上代码：

   function browser(){
        var ua=window.navigator.userAgent;
        //*****检测IE*****//
        //检测Trident引擎，IE8+
        if(/Trident/.test(ua)){
            //IE11+
            if(/rv:(\d+)/.test(ua)){
                alert('IE11');
            }
            //IE8-IE10
            if(/MSIE (\d+)/.test(ua)){
                alert('IE8-10');
            }
        }
        //检测IE标识，IE7-
        if(/MSIE (\d+)/.test(ua)){
            alert('IE7-');
        }

        //*****检测chrome*****//
        if(!/OPR/.test(ua)){
            if(/Chrome\/(\S+)/.test(ua)){
                alert('chrome');
            }
        }

        //*****检测Safari*****//
        //需先排除opera
        if(!/OPR/.test(ua)){
            //检测出chrome和safari浏览器
            if(/Safari/.test(ua)){
                //检测出safari
                if(/Version\/(\S+)/.test(ua)){
                    alert('safari');
                }
            }
        }

        //*****检测Firefox*****//
        if(/Firefox\/(\S+)/.test(ua)){
            alert('firefox');
        }

        //*****检测opera*****//
        if(/OPR\/(\S+)/.test(ua)){
            alert('opera');
        }
    }
    browser();

关于识别浏览器内核、版本还有操作系统、移动端设备的，详细可查看：http://www.cnblogs.com/xiaohuochai/p/4822001.html?utm_source=tuicool&utm_medium=referral    在此跪谢作者，嘻嘻~

统一绑定事件的方法：

function addEvent（element ，event ，callbackFunction）{
    if（elemen . addEventListener）{
        element.addEventListener(event , callbackFunction，false);
    }
    //IE
    else if (element . attachEvent){
        element . attachEvent('on' + event , callbackFunction);
    }
}

addEvent(element , 'event' ,function( e ){
    //获取event对象，其他浏览器可通过e这样一个参数来获取，而IE需要window.event
    var event = e || window.event ；
    //获取触发事件的源，IE不支持target
    var target=event.target || evnet.srcElement
    ......
});

关于jQuery中 .bind \ .live\ .delegate 绑定事件：

不过从jQuery1.7开始把这些合并成了on（）方法，unbind\die\undelegate合并成了 off（）；

bind只能对已有元素绑定，而且是直接绑定在元素上，对未来的元素不起作用，而live和delegate是通过冒泡法绑定的且能对后续新增的元素起作用；

live 和delegate的区别，看下面的例子：

$('a').live('click', function() { .... });

$(document).delegate('a', 'click', function() { .... });

实际上后者会快于前者，前者要扫描整个文档查找$('a')元素并将之存储为jQuery对象，而delegate仅需要查找并存在$('delegate')元素；所以一般更倾向于用delegate

还有几个

setTimeout：在指定毫秒数后执行函数或表达式，且只执行一次 ; 若需多次执行，应使用setInterval() 或者让code本身再次调用setTimeout,此时需要停止的话就分别用

clearInterval和clearTimeout ;

setInterval : 按指定周期来执行函数或表达式；而clearInterval（）是用于取消setInterval的，一般这么用：

var timer=setInterval（  function(){

　　　　......

});

clearInterval(timer);

onmouseenter和onmouseover的区别，onmouseover穿过其子元素也会触发事件，而onmouseenter不会；同理onmouseleave和onmouseout；

/*****ok , 理论上整理完毕~madamada danei*****/

话说真的好久好久好久木有撸代码了，从元旦收假后就一直在准备期末考试，十多天得时间，一学期了有的书我都没拆封的 = =。。差点残了。。。。理论上应该还是不会挂的；13号晚上到的家，哦嚯嚯~愉快搬砖