小知识随手记（六）

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;width:20%;height:200px;background:#DDD}
.right{float:right;width: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>