Imitation homework help front-end tutorial-JS Tutorial-php.cn

Imitation homework help front-end tutorial

一个新手

Release： 2017-09-13 10:45:07

Original

1317 people have browsed it

Box model

Imitation homework help front-end tutorial
In standard mode

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

Copy after login

In weird mode

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

Copy after login

Adaptation of mobile devices

flexbox
rem
More details will be added later

position

relative: Positioning relative to its position in the text flow , does not break away from the text flow after positioning
absolute: Position relative to the non-statically positioned element in the parent element, and break away from the text flow after positioning
fixed: Position relative to the browser window, and break away from the text flow after positioning
static: Normal text flow rendering

<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>

Copy after login

Imitation homework help front-end tutorial

Advantages of event proxy

The principle is to use event bubbling

Advantages
Can save a lot of memory usage and reduce event registration. For example, ul proxies all click events of li.
Particularly suitable for the dynamic content part

Disadvantages
The common applications of event proxies should be limited to the above requirements. If event proxies are used for all events, event errors may occur. Judgment. That is, events that should not be triggered are bound to events.

Array deduplication

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;
}

Copy after login

If you cannot use indexOf, and you need to consider the element type

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;
}

Copy after login

Or directly use ES6's Set

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

Copy after login

to achieve mouse over Introduction to avatar display

Key points:
1. How to bind events
What I want to do is to use the event proxy

2. How to ensure that the placement is displayed and the quick swipe does not display
Using timers

Let’s use simple code to give an example. . .

<!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>

Copy after login

The above is the detailed content of Imitation homework help front-end tutorial. For more information, please follow other related articles on the PHP Chinese website!