1、事件委托及 this == id 不兼容 IE 的问题：

//事件委托delegate()，就是给checkbox委托点击事件，选中value赋值1，取消赋值0$("#queryCondition").delegate("input[type='checkbox']","click",function(){    if($(this).prop("checked")){        $(this).val(1);    }else{        $(this).val(0);    }});//但是有一个checkbox比较特殊，后面跟着一个text的input，取消的时候我也需要清空input的值，刚开始考虑这样$("#queryCondition").delegate("input[type='checkbox']","click",function(){    if($(this).prop("checked")){        $(this).val(1);    }else{        $(this).val(0);        if(this === noBootAssetTime_check){
    //注意id是不能加引号的            $("#noBootAssetTime").val(0);        }    }});

　　经过测试谷歌和火狐均可以，支持 this === id 的条件，但是在IE下就不支持。所以需要修改，现在正好想到拿出 this 的 id来跟id名称进行比较，即：this.id === "id名称"，这样就可以兼容IE了，代码如下：

$("#queryCondition").delegate("input[type='checkbox']","click",function(){    if($(this).prop("checked")){        $(this).val(1);    }else{        $(this).val(0);        if(this.id === "noBootAssetTime_check"){            $("#noBootAssetTime").val(0);        }    }});

　　delegate() 和 this.id = id 的使用

2、变量赋值与引用传参

　　这里其实对于基本类型来说没有什么需要重点说明的。这里就重点说下引用类型吧。对于赋值

function setName(obj) {  obj.name = "Neal";  console.log(obj);//{name:"Neal"}  obj = new Object();  obj.name = "yang";  console.log(obj);//{name:"yang"}}var person = new Object();setName(person);console.log(person.name);//Neal

　　如上代码，最后console出来的是Neal。

　　这段代码说明两点：

• 引用类型在传参的时候，是按照引用传递的，不然不可能person.name为Neal
• 即使在函数内部修改了参数的值，原始的引用依然不变。实际上，在重写obj的时候，这个变量的引用已经是一个局部变量了。只是在这儿函数运行完，这个对象被销毁了。

　　所以说到这，对于对象的赋值，一句以概之：引用的赋值。

3、关于IIFE的注意事项：

　　IIFE称为立即执行函数，这个立即执行函数有多立即呢？立即执行函数再快也得按照代码执行顺序，逐行执行，如下代码返回1

var a = 1;(function(){    console.log(a);//1})();

　　类似地，函数也是这种情况

function a(){    return 1;}(function(){    console.log(a());//1})();

　　但，如果是函数表达式就不一样了。执行如下代码会报错，提示此时的a是undefined

var a = function(){    return 1;}(function(){    console.log(a());//报错})();

　　函数有一个声明提升的过程，函数表达式其实分为先声明，后赋值这两步。而，如果后面存在着立即执行函数IIFE，这个IIFE会快到函数表达式a执行完第一步骤函数声明之后IIFE就会立即执行，这此时a未被赋值，是undefined，所以执行a()时会报错。

4、关于获取多级iframe里元素的问题：

　　top.$("iframe[name='iframeWindow']")[0].contentWindow.$("#inside_tableElement")，这样才能获取到iframe里的元素，

　　top.$("iframe[name='iframeWindow']").eq(0).$("#inside_tableElement")，是获取不到的

5、JS操作时间问题：

　　主要是2个主要函数：new Date()  和  Date.parse()

（1）new Date()：参数可以是机器时间，参数为空时表示把当前机器时间传入。返回值是标准字符串时间。

new Date()//Wed Nov 15 2017 23:11:43 GMT+0800 (中国标准时间)new Date("2017-11-15 12:12:12")//Wed Nov 15 2017 12:12:12 GMT+0800 (中国标准时间)

new Date(1510758800422)//Wed Nov 15 2017 23:13:20 GMT+0800 (中国标准时间)

（2） Date.parse()：参数为标准字符串时间，返回值是对应的机器时间。

Date.parse("2017-11-15 12:12:12")//1510719132000

　　在JS中操作时间，和在其它语言中操作时间原理上相似，核心就是解决2个问题：（1）把机器时间转成人类时间；（2）把人类时间转成机器时间。

//得到当前机器时间Date.now();    //1510758800422//得到当前人类时间new Date();    //Wed Nov 15 2017 23:11:43 GMT+0800 (中国标准时间)//给出标准字符串时间转成机器时间var stdStrTime = "2004-05-25T00:00:00.000Z";var mTime = Date.parse(stdStrTime);console.log(mTime);//1085443200000//给出机器时间转成标准字符串时间var mTime = 1510758800422;var stdStrTime = new Date(mTime);console.log(stdStrTime);//Wed Nov 15 2017 23:13:20 GMT+0800 (中国标准时间)

 6、css 实现一个元素的hover, focus 状态改变其他元素的样式。

　　只要可以通过selector从 a 到 b 就可以 hover 后面继续跟selector：假设悬浮元素是a，样式改变元素是b，俩个元素之间的关系就是b是a的子元素就可以使用a:hover>b{....}；还有就是b刚好是a的同级元素并且是紧接着的，就可以a:hover+b{....}；还有就是b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{....} 等等

　　比如css实现鼠标放到一个div上显示另一个隐藏的div：.cent:hover .cs（hover后面再跟对应元素更改css属性）

.cent:hover .cs{    display:block;    top:20px;}

7、ajax里面的success等函数体内调用this，this是指的ajax对象，因此如果在回调函数里面需要使用this的话，就要注意this重定向的问题。

8、用css伪类选择器判断输入的邮箱格式是否正确，然后改变另一个元素的样式：input[type="email"]:invalid 和 :valid 的使用；再一个就是元素选择器的传递

input[type="email"]:invalid + .btn{    background: red;}input[type="email"]:valid + .btn{    background: green;}

 9、鼠标拖动div边框改变大小问题：

（1）e.clientX、e.clientY的使用

（2）事件委托，mousemove、mouseup事件绑定在$(document)上性能更好，如果绑定在div元素上，当鼠标拖动过快移除div框外时，拖动停顿，体验不好

$(function () {    //绑定需要拖拽改变大小的元素对象       bindResize(document.getElementById('test'));});function bindResize(el){    //初始化参数    var x = 0,        y = 0;    //鼠标按下绑定事件    $(el).on("mousedown",function(e){        //计算鼠标坐标与对象的相对坐标        x = e.clientX - el.offsetWidth;        y = e.clientY - el.offsetHeight;        //绑定鼠标移动和放开事件        $(document).on("mousemove",mousemove).on("mouseup",mouseup);        //阻止默认事件        e.preventDefault();    });    //移动    function mousemove(e){        el.style.width = e.clientX - x + "px";        el.style.height = e.clientY - y + "px";    }    //放开    function mouseup(e){        //卸载绑定的事件        $(document).off("mousemove",mousemove).off("mouseup",mouseup);    }}

10、清除浮动的8种方法：

（1）给父级元素定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

（2）结尾处加空div标签，然后给样式： clear:both。（要注意空标签添加的位置）

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

（3）父级div定义伪类:after 和 zoom

　　两行CSS代码：

.clearfloat:after{

display:block;clear:both;cotent:"";visibility:hidden;height:0;}

.clearfloat{zoom:1}

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

（4）父级div定义 overflow:hidden

（5）父级div定义 overflow:auto

　　此外：（6）父级一起浮动；（7）父级定义display:table；（8）结尾处加 br标签 clear:both；也都可以清除浮动，但是都会引出新问题，只做了解，不推荐使用。

    
     
        
      
       Left
      
        
      
       Right
      
        
          
     
    
     
      div2