仿作业帮前端教程

来源：懂视网责编：小采时间：2020-11-27 20:13:15

仿作业帮前端教程

仿作业帮前端教程:盒模型标准模式下 box = margin+border+padding+content(width/height)怪异模式下 box = margin+content(border+padding+width/height)移动设备的自适应flexbox rem 之后详细补充positionrelative : 相对于本身在文本流中的位

推荐度：

点击下载本文 文档为doc格式

导读仿作业帮前端教程:盒模型标准模式下 box = margin+border+padding+content(width/height)怪异模式下 box = margin+content(border+padding+width/height)移动设备的自适应flexbox rem 之后详细补充positionrelative : 相对于本身在文本流中的位

盒模型

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

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='p1'></p>
 <p class='p2'></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='p1'></p>
 <p class='p2'></p>
 <script type="text/javascript">
 var d1 = document.getElementsByClassName('p1')[0]; 
 var d2 = document.getElementsByClassName('p2')[0]; 
 var timer;
 d1.addEventListener('mouseenter',function(){
  timer = window.setTimeout(function(){d2.style.display="block"},300);
 })
 d1.addEventListener('mouseout',function(){
  window.clearTimeout(timer);
  d2.style.display="none";
 }) 
 </script>
 </body>
 </html>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com