仿作业帮前端教程

一个新手原创: 2017-09-13 10:45:071340浏览

盒模型

这里写图片描述
标准模式下

box = margin+border+padding+content(width/height)

怪异模式下

box = margin+content(border+padding+width/height)

移动设备的自适应

flexbox
rem
之后详细补充

position

relative : 相对于本身在文本流中的位置进行定位，定位后不脱离文本流
absolute : 相对于父元素中非static定位的元素进行定位，定位后脱离文本流
fixed : 相对于浏览器窗口进行定位，定位后脱离文本流
static : 正常文本流渲染

<style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    left:20px;        /*以下两张图分别展示*/
        position:relative;        
        position:absolute;    }
    .p2{        
    width:100px;        
    height:100px;        
    background-color:blue;    }
</style>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>

这里写图片描述

事件代理的优点

原理就是利用事件冒泡

优点
可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件。
对于动态内容部分尤为合适

缺点
事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

数组去重

function f(arr){
    var s = [];    
    for(var i = 0;i<arr.length;i++){
        if(s.indexOf(arr[i]) == -1){
            s.push(arr[i]);
        }
    }    return s;
}

如果不能使用indexOf，且需考虑元素类型

function f(arr){
    var s = {};    
    for(var i = 0;i<arr.length;i++){
        var type = typeof arr[i];
        var con = type+arr[i];
        if(!s[con]){
            s[con] = 1;
        }else{
            arr.splice(i,1);
            i--;
        }
    }    return arr;
}

或者直接利用ES6的Set

function f(arr){
    var s = new Set(arr);    
    return [...s];
}

实现鼠标滑过头像显示简介

要点：
1、事件如何绑定
我想的是通过事件代理

2、如何保证放置显示，快速划过不显示
利用定时器

下面就用简陋的代码来示例一下。。。

<!DOCTYPE html><html><head><style>
    .p1{        
    width:100px;        
    height:100px;        
    background-color:red;        
    border-radius: 50px;    
    }
    .p2{        
    width:100px;        
    height:200px;        
    margin-top: 10px;        
    background-color:black;        
    display: none;    
    }
    </style>
    </head>
    <body>
    <p class=&#39;p1&#39;></p>
    <p class=&#39;p2&#39;></p>
    <script type="text/javascript">
        var d1 = document.getElementsByClassName(&#39;p1&#39;)[0];        
        var d2 = document.getElementsByClassName(&#39;p2&#39;)[0];        
        var timer;
        d1.addEventListener(&#39;mouseenter&#39;,function(){
            timer = window.setTimeout(function(){d2.style.display="block"},300);
        })
        d1.addEventListener(&#39;mouseout&#39;,function(){
            window.clearTimeout(timer);
            d2.style.display="none";
        })    
        </script>
        </body>
        </html>

以上是仿作业帮前端教程的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js实现网页标题滚动下一篇：html的布局方式有哪些

查看更多