我的不定期总结

一段时间的学习，又遇到些问题呢~所以，我的不定期总结来啦…….

1、设置元素的透明度

(1)兼容所有浏览器(背景和里面的内容都透明)
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
(2)背景透明，内容不透明
background-color:rgba(255, 255, 255, 0.5);

2、父元素相对定位，子元素绝对定位。父元素高度不能自适应的问题。

子元素绝对定位后脱离了文档流，所以不会撑起父元素的高度。可以让子元素相对定位达到相同的效果。如果一定要“父相子绝”，css无法使父元素的高度撑起，可以采用js进行计算。

3、父元素div设置了拖拽，div中包含子元素input，input输入框失效不能输入的问题。

$('#qqList').on('mousedown',function(ev){
    var disX = ev.pageX - $(this).offset().left;
    var disY = ev.pageY - $(this).offset().top;
    $(document).on('mousemove',function(ev){
        if((ev.pageX-disX)<0 || (ev.pageX-disX)>$(window).width()-$('#qqList').width()) return false;
        if((ev.pageY-disY)<0 || (ev.pageY-disY)>$(window).height()-$('#qqList').outerHeight(true)) return false;
        $('#qqList').css('left', ev.pageX-disX);
        $('#qqList').css('top', ev.pageY-disY);
    });
    $(document).on('mouseup',function(){
        $(document).off();
    })
    //return false;
});

return false阻止了浏览器的默认行为。注释拖拽中的return false。

4、使input输入框透明

background-color:transparent;

5、前几天写的一个翻转拼图游戏，在我的github上面有翻转拼图$(‘ul’).html(str);动态生成元素，会对页面重新渲染，导致ul里面的li获取不到。部分代码如下：

var str = '';
for(var i=0;i<num*num;i++){
    str += '<li></li>';
}
$('ul').css('width',90*num);
$('ul').html(str);
$('ul').on('click','li',function(){
//$('li').click(function(){
    var $index = $(this).index();
    var $num = $index%num;
    $(this).toggleClass('discolor');
    //上方变色
    if($index-num > 0) $('li').eq($index-num).toggleClass('discolor');
    //下方变色
    if(($index+num) < num*num) $('li').eq($index+num).toggleClass('discolor');
    //左边变色
    if($num != 0) $('li').eq($index-1).toggleClass('discolor');
    //右边变色
    if($num != num-1) $('li').eq($index+1).toggleClass('discolor');
    //if($num != num-1) $('li:eq('+$index+1+')').toggleClass('discolor');
    //判断是否通关
    if($('li').filter('.discolor').length == num*num ){
        alert('恭喜通关');
        $('input[name=up]').trigger('click.up');
    }
});

解决方法有两种：
(1)用事件代理,把$(‘li’).click(function(){})改成 $(‘ul’).on(‘click’,’li’,function(){});
(2)把li的点击事件封装成一个函数，点击难度升级或降级时，再次绑定事件