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；也都可以清除浮动，但是都会引出新问题，只做了解，不推荐使用。
<style type="text/css">
.div1{background:#000080;border:1px solid red;
/*解决方案1代码：
height:200px;*/
/*解决方案4或5代码
overflow:hidden;
或overflow:auto;*/
}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
/*解决方案2代码：
.clear{clear: both;}*/
/*解决方案3代码：
.clearfloat:after{display:block;clear: both;content: "";visibility: hidden;height: 0;}
.clearfloat{zoom:1;}*/
</style>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
<!-- 解决方案2<div class="clear"></div> -->
</div>
<div class="div2">div2</div>
</body>