前端面试题(五)

javascript/jquery

浏览数:109

2020-6-12

  • label 有哪些作用, 并举例说明

    • 首先最常用的是 label 与表单的关联

      <label for="hobby">爱好</label>
      <input id="hobby" type="checkbox"  value="0">
    • 方便鼠标点击使用,增强用户操作体验
    • 用来显示文字信息,可以固定也可以从数据库中读出信息绑定。

其实 label 标签有两个属性比较常用 一个是 for 一个是accesskey
for 属性:

表示这个label 是为哪个控件服务的,for 属性绑定的 html 元素的 id 或者 name 属性. 你点击这个标签的时候,所绑定的元素将获取焦点 ,点击label所包裹内容,自动指向for指定的id或name

accesskey 属性:

则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键 )
  • 用 css 创建一个三角形, 并说明其原理

    首先我们先看下实现的代码

        width: 0;
        height: 0;
        margin: 100px auto;
        border-top: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid blue;

    效果如下:

    我们现在来分析一下这个是如何实现的

    这里我们对 border 可能有一下误解. 通常我们常用的就是做个边框
    border: 1px solid 这样类似的.只是给图形一个1px 的边框.我们会误解为border 就是四边边框.

    但是其实并不是.其实元素的 border 是由
    三角形组成的.我们举个例子, 把边框的宽度变大一些

    div {
        width: 50px;
        height: 50px;
        border: 40px solid;
        border-color: orange blue red green;
    }

    效果如下:

    所以当我们把 div 的宽高设为 0 的时候 就完全用 border 撑起来就是如下样子

    这下就很明显了 想要得到四个三角形的哪个 就把其他边设为透明就可以啦

    这样是不是就很明了了!!!!!!!!

  • 写一个去除制表符和换行符的方法

    通常这样的方法最简单的是使用正则表达式来筛选

    \f 匹配换页字符。

    \n 匹配换行字符。

    \r 匹配回车符字符。

    \t 匹配制表字符。

    \v 匹配垂直制表符。

    function fn(str) {
      return str.replace(/[\t\n]/g, '')
    }

    正则表达式的东西还是蛮多的 真正学起来正则可以很深很深.实不相瞒,我对正则就是属于一知半解的状态 每次使用都会去查表 毕竟其实实际用到的很少 都是封装一次到方法库里面了…. 尴尬

面试题摘自 Github

作者:Evil