前端面试题

最新推荐文章于 2024-09-26 01:42:12 发布

牵着乌龟旅行

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量1.2k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42146519/article/details/124369182

版权

一、react的优势
①速度快
它并不直接对DOM进行操作，而是引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，使得性能好。
②很好的跨浏览器兼容
虚拟DOM解决了跨浏览器的问题，它为我们提供了标准化的API。
③component
组件化的代码更加模块化，重用代码更容易，可维护性高。
④单向数据流
Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

二、html有哪些标签？语义化标签听过吗？有什么用？
语义化的标签，旨在让标签有自己的含义。优势：
①代码结构清晰，方便阅读，有利于团队合作开发。
②方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
③有利于搜索引擎优化（SEO）。
常见语义化标签有：
<title>：页面主体内容，
<h1-h6>：分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表
<li>：有序列表
<header>：页眉通常包括网站标志、主导航、链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。

三、$().click(fn)和$().on('click','要选择的元素',function(){})的区别
①$().click(fn)：当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
        $('ul>li').click(function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>
</body>

结果如下： 后面动态创建的5和6，没法进行点击事件触发。
在这里插入图片描述
②$().on('click','要选择的元素',function(){})
on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
将上面script代码改成下面的代码：

<script>
    $(function(){
        $('body').on('click','ul>li',function(){
            console.log($(this).html());
        });
        $('ul').append('<li>5</li><li>6</li>');
    })
    </script>

结果如下： 动态添加的元素也能被点击触发函数。
在这里插入图片描述
$().on()的知识点补充：
1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
$().delegate()是更精确的小范围的使用事件代理。
而$().on()结合了这三个方法的优势摒弃了劣势。
2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法：
　A：return false。在事件的处理中，可以阻止默认事件和冒泡事件。
　B：event.preventDefault()。在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
　C：event.stopPropagation()。在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

四、描述一下 cookies，sessionStorage 和 localStorage 的区别

存储形式
1）cookies：是网站为了标示用户信息而存储在用户本地终端上的数据（通常经过加密）,cookies数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器之间来回传递。
2）sessionStorage和localStorage不会自动把数据发给服务器，仅在本地存储。
存储大小
1）cookies数据大小不能超过4k
2）sessionStorage和localStorage虽然也有大小限制，但比cookies大的多，可以达到5M或更大
有效时间
1）localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
2）sessionStorage：数据在当前浏览器窗口关闭后自动删除
3）cookies：设置的cookie过期时间之前一直有效，即使关闭浏览器或窗口

五、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？