在慕课上学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号晚上到的家，哦嚯嚯~愉快搬砖