前端常见问题及常见方法

正则表达式常用方法

匹配以xx开始xx结尾的字符串

以ff开头，空格结尾的字符串 :\bff\S*?\s\b

引号内部字符串匹配

双引号内部的字符匹配： \"([^\"]*)\"

匹配空行

^[ \t]*\n ，注意\t前有空格符

CSS 常见问题

图片父级元素高度多3px/4px

通常会发现图片父级元素的高度会比图片高度多3px/4px,原因在于img是一种类似text的标签元素，在结束的时候，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把父级元素撑高了。

解决办法：

1.消除掉匿名盒子的高度，给a设置line-height:0或font-size:0

2.给两者vertical-align:top，让其top对齐，而不是baseline对齐

3.【推荐】：给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题

JS常见用法

原生JS：点击元素切换class

使用classList.toggle 和点击事件 onclick ，点击添加class，再次点击移除该class。以下例子：

    var add_remove1 = document.getElementById("qr-code1");
    function x1() {
        add_remove1.classList.toggle("on");
    }