WEB前端面试题汇总（持续更新）

时间 2019-11-09

标签 web 端面试题汇总持续更新栏目 HTML 繁體版

原文原文链接

HTML

CSS

一、CSS3有哪些新特性？
请参考博文：CSS3新特性javascript

二、一个DIV宽高100，点击变大，当他的宽高等于400px开始缩小，当宽高缩小至100px时，开始放大；再次点击暂停缩小或放大，再再次点击，DIV继续当大或缩小css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画暂停animation-play-state</title>
    <script src="jquery.min.js"></script>
    <style>
        .mydiv{width: 100px;height: 100px;background-color: pink;animation:mymove 2s infinite alternate linear;}
        @keyframes mymove
        {
            from {width: 100px;height: 100px;}
            to {width: 400px;height: 400px;}
        }
    </style>
</head>
<body>
    <div class="mydiv" id="mydiv"></div>
    <script>
    var flag = true;//true表示动画状态，false表示中止状态
    $("#mydiv").click(function(){
        flag = !flag;
        if (flag) {
            $("#mydiv").css('animation-play-state','running');
        } else {
            $("#mydiv").css('animation-play-state','paused');
        }
    });
    </script>
</body>
</html>

三、BFC是什么？IE的hasLayout有是什么？
请参考博文：BFC和IE的hasLayouthtml

JAVASCRIPT

一、怎样添加、移除、移动、复制、建立和查找节点（原生JS）
请参考博文：原生JS DOM增上改查操做java

二、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不一样？
请参考博文：jquery $(document).ready()与window.onload的区别jquery

三、想实现一个对页面某个节点的拖拽？若是作？（使用原生JS）浏览器

给须要拖拽的节点绑定mousedown, mousemove, mouseup事件性能
mousedown事件触发后，开始拖拽动画
mousemove时，须要经过event.clientX和clientY获取拖拽位置，并实时更新位置.net
mouseup时，拖拽结束插件
须要注意浏览器边界的状况

四、JavaScript原型，原型链？
请参考博文：javascript对象继承

JQUERY

一、Jquery与jQuery UI有什么区别？
jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

NODEJS

一、什么是Node.js？
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度很是快，性能很是好。

二、NodeJS优缺点及适用场景讨论
请参考博文：NodeJS优缺点及适用场景讨论