前端知识总结

在日常工作中常常会碰到一些关于前端的小问题，这篇文章用来记录解决问题的小方法。

1.链接地址文件下载

<a href="包含你下载文件的地址" target="_blank">下载按钮</a>

2.兼容IE8的tab菜单切换

结构部分：

<div id="a">
     <ul class="b">
          <li id="c" class="log_tab_current">普通登录</li>
          <li id="d">CA登录</li>
     </ul>
</div>
<div class="aa" id="aa">
    <ul></ul>
    <ul></ul>
</div>

js部分：

var $=function(a,b){
     var ID = document.getElementById(a);
     var OBJ= (b)?ID.getElementsByTagName(b):ID;
     return OBJ
 }
 var n=0;
 var tab = function(MENU,BODY){
     var l = MENU.length;
     for(var i=0;i<l;i++){
     MENU[i].onmouseover=function(a){
        return function(){
         MENU[n].className=""; //可以为空，但必须写
         BODY[n].style.display = "none";
         MENU[a].className="切换后tab添加的样式";
         BODY[a].style.display = "block";
         n=a;
        }
     }(i);
    }
}
 tab($("a","li"),$("aa","ul"));

另一种tab菜单切换的方法：

$(function () {
      window.onload = function () {
          var $lis = $('tab菜单项');
          var $uls = $('对应菜单项的内容');
          $lis.each(function (i, obj) {
              var $li = $(obj).find('li');
              var $ul = $uls.eq(i).find('ul');
              $li.eq(0).addClass('选中的样式');
              $li.mouseover(function () {
                  var $this = $(this);
                  var $t = $this.index();
                  $li.removeClass();
                  $this.addClass('选中的样式');
                  $ul.css('display', 'none');
                  $ul.eq($t).css('display', 'block');
              });
          })

      }
  });

3.placeholder兼容IE8

.phcolor{color:显示的placeholder的颜色;}

$(function(){      
      supportPlaceholder='placeholder'in document.createElement('input'),
      placeholder=function(input){     
          var text = input.attr('placeholder'),    
              defaultValue = input.defaultValue;     
          if(!defaultValue){       
              input.val(text).addClass("phcolor");    
          }     
          input.focus(function(){       
              if(input.val() == text){           
                  $(this).val("");      
              }    
          });       
          input.blur(function(){       
              if(input.val() == ""){ 
                  $(this).val(text).addClass("phcolor");      
              }    
          });        
          input.keydown(function(){        
              $(this).removeClass("phcolor");    
          });  
      };    
      if(!supportPlaceholder){     
          $('input').each(function(){       
              text = $(this).attr("placeholder");       
              if($(this).attr("type") == "text"){        
                  placeholder($(this));     
              }    
          });  
      } 
  });

4.IE7 bug

1.overflow:auto无效

产生原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:auto属性就会失效。
解决办法：解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul>

ul{overflow:auto; height:500px;} li{position:relative; height:50px; line-height:50px;}

在IE7中，有滚动条出现，但是无法拉动滚动条。解决办法：ul{position:relative;}

2.float:right 换行

给父层加一个相对定位，再给这个右边的元素加一个绝对定位

5.垂直居中

1.使用line-height

样式：

.aaa {line-height:250px;border:#999999 dashed 1px; font-size:0;width: 120px;}
.aaa a{display:inline-block;vertical-align: middle;line-height:1.5em;font-size:12px}

结构：

<p class="aaa">
    <a>这里是高度为150像素的标签内的多行文字，文字大小为20像素。
这里是第二行，用来测试多行的显示效果。</a>
</p>

2.基于绝对定位

main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12em;
  height: 2em;
  margin-top: -1em;  /* 2/1 = 1 */
  margin-left: -6em; /* 12/2 = 6 */
}

或者：

main {
  position: absolute;
  width: 12em;
  height: 2em;
  top: calc(50% - 1em);
  left: calc(50% - 6em);
}

解除对固定尺寸的依赖：

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.基于窗口单位

　- vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。
　- 与 vw 类似，1vh 表示视口高度的 1%。
　- 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
　- 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。

main {
  width: 12em;
  margin: 50vh auto 0;
  transform: translateY(-50%);
}

注意：只适用于在窗口居中的场景

4.基于flexbox

body{
    display: flex;
    min-height: 100vh;
    margin: 0;
}
.main{
    margin: auto;
    background: green;
}

6.几种动态添加option的方法

<select id="select"></select>

1.for循环

var selectValues = {"1":"a","2":"b","3":"c"};
for(key in selectValues){
    if(typeof (selectValues[key]) == 'string'){
        $("#select").append('<option value="'+key+'">'+selectValues[key]+'</option>');
    }
}

2.append

$.each(selectValues.function(key,value){
    $("#select").append($('option',{value:key}).text(value));
})

3.push +join

var output = [];
$.each(selectValues,function(key,value){
    output.push('<option value=" '+ key +'">'+value+'</option>');
});
$("#select").html(output.join(''));

4.把内容作为一个JSON的格式添加

$.each(selectValues,function(key,value){
    $("#select").append($("<option>",{
        value:key,
        text:value
    }));
});

推荐后两种

7.元素高度随浏览器窗口的变化而变化

function autodivheight(id) {
      var winHeight = 0;
      if (window.innerHeight)
          winHeight = window.innerHeight;
      else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
      if (document.documentElement && document.documentElement.clientHeight)
          winHeight = document.documentElement.clientHeight;
      document.getElementById(id).style.height = winHeight + "px";
    }

autodivheight("environ_r");
autodivheight("environ_r");
window.onresize = function () {
     autodivheight("environ_l");
     autodivheight("environ_r");
 };

8.循环替换元素位置

function exchangePos(elem1, elem2){
    if(elem1.length == 0 && elem2.length == 0){
        return;
        }
        var next = elem2.next(),
            parent = elem2.parent();
        elem1.after(elem2);
        if(next.length == 0){
            parent.append(elem1);
        }else{
            next.before(elem1);
        }
    }

<button onclick="exchangePos($('.list').children().eq(1), $('.list').children().eq(3));">替换</button>
     <ul class="list">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
     </ul>

9.遍历对象

var value ={
    "height":{
        name:"高度",
        value:"10"
    },
    "width":{
        name:"宽度",
        value:"20"
    }
}
var data = {
    "height":{
        name:"高度",
        value:"10"
    }
}
for(var key in value){
       for(var p in data){
           if(p==key){
               for(var c in data[p]){
                   if(c == "value"){
                       data[p][c] = value[key]
                   }
               }
           }
       }
   }

10.z-index

设置该属性的元素，需要设置position属性

11.父元素背景透明，子元素不透明

background-color:rgba(255,255,255,0.5);
filter:alpa(opacity=50);
*zoom:1

12.div嵌套引起margin-top失效

<div>
    <div style="margin-top:30px;"></div>
</div>

上述代码的表现为父元素的上边距为30，而不是子元素的上边距为30。因为嵌套div中margin-top出现转移，在部分浏览器中，两个嵌套的div，如果外层父元素div的padding值为0，那么内层div的margin-top，margin-bottom值都会转移到父元素也就是外层div身上。
解决办法：
1)给父元素设置一个padding值
2)给父元素设置一个overflow：hidden；在不加overflow:hidden;的时候，margin-top:这个属性是认不到边的，也就是失效。但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效，所以这是个标准问题，也是个兼容问题。
3)把外边距margin改为padding
4)让父元素生成一个块级格式化范围（BFC）
给子元素加：

  float: left/right
  position: absolute
  display: inline-block/table-cell(或其他 table 类型)
  overflow: hidden/auto

给子元素加：position: absolute;

13.处理IE兼容问题时，使用filter后border-radius失效

在设定filter属性的元素的父元素上设定border-radius和overflow:hidden属性

<div class="parent">
    <div class="child"></div>
</div>
.parent{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow:hidden;
}
.child{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='example.jpg');
}

14. 存储为web所用格式显示的大小和保存后的大小不一样

在使用ps的切片工具存储为web所用格式时，出现切片显示的大小和存储在本地的大小不一致的情况，解决办法为：
这里写图片描述

把“元数据”设为无就行了。

15. font-size:0的作用

inline元素和inline-block元素都会受到空格的影响，设置font-size:0可以将空白去掉。

.box{
  width: 90px;
  height: 60px;
  border: 1px solid #ccc;
}
.box div{
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  width: 30px;
  border: 1px solid ;
}

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

16. 三种css方式实现元素隐藏和显示

（1）label+checkbox法可实现toggle效果且菜单可以在页面任意位置。

结构：

<div>
    <label for="toggle">菜单</label>
</div>
<div>
    <input type="checkbox" id="toggle">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

css:

nav{display:none;}
input:checked ~ nav {
   display: block
}
input {
    display: none;
}

（2）hover法鼠标放置菜单显示，鼠标移除菜单隐藏，菜单与按钮必须有可寻溯的结构关系。

结构：

<div>
    <button id="btn">查看详细</button>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

css样式：

nav {display:none;}
#btn:hover ~ nav{display: block;}

（3）focus法点击按钮菜单显示，点击其它地方菜单隐藏，菜单与按钮必须有可寻溯的结构关系。

结构：

<div>
    <button id="focus">查看详细</button>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

css样式：

nav {display:none;}
#focus:focus ~ nav{display: block;}

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

定义列表

Markdown　Extra　定义列表语法：
项目１
项目２: 定义 A; 定义 B
项目３: 定义 C; 定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 。
块级公式：

x = - b \pm b 2 - 4 a c - - - - - - - \sqrt 2 a

$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

更多LaTex语法请参考这儿.

UML 图:

可以渲染序列图：

或者流程图：

关于 序列图 语法，参考这儿,
关于 流程图 语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

这里是脚注的内容. ↩

前端知识库