前端面试题详解：从title与alt到跨域解决方案

"前端面试题详解" 在前端面试中，了解并掌握常见的技术点至关重要。以下是一些关键知识点的详细解析： 1. **标题与alt属性的区别** - `title`属性：当鼠标悬停在元素上时，浏览器会显示`title`属性的内容作为提示信息。它主要用于提供额外的上下文或解释元素的功能。 - `alt`属性：主要用于图像元素`<img>`，当图片无法加载或者用户禁用了图像显示时，浏览器将显示`alt`属性的文本作为替代内容。此外，`alt`属性在SEO（搜索引擎优化）中起到重要作用，帮助搜索引擎理解图片内容。 2. **隐藏元素的方法** - `display:none;`：此样式会使元素完全消失，不占用任何空间。 - `visibility:hidden;`：元素依然占据空间，但其内容不可见。 - `opacity:0;`：元素透明度设为0，使其不可见，但仍然占用空间。 - `position:absolute; left:-10000px;`：通过绝对定位使元素移出可视区域，元素仍然存在并占用空间。 3. **JavaScript数据类型** - JavaScript有七种数据类型：五种原始类型（Undefined、Null、Boolean、Number、String）和两种引用类型（Object，包括Array、Function等）。注意，`null`虽然常被视为特殊值，但它实际上是对象类型。 4. **typeof操作符和NaN的特性** - `typeof null`返回`"object"`，这是一个历史遗留问题。 - `typeof NaN`返回`"number"`，尽管NaN表示“非数字”，它本身仍被分类为Number类型。 - `NaN`不等于任何值，包括自身，因此`NaN == NaN`返回`false`。 5. **jQuery与原生JS获取元素内容** - jQuery：`$("#div1").html()`用于获取或设置元素的HTML内容；`$("#div1").text()`用于获取纯文本内容。 - 原生JS：`document.getElementById("div1").innerHTML`用于获取或设置HTML内容；`document.querySelector("#div1").innerText`用于获取纯文本内容。 6. **原生JS兼容性事件监听** - `addEvent`函数示例展示了如何兼容不同浏览器的事件绑定。`addEventListener`用于现代浏览器，`attachEvent`用于IE浏览器。 7. **跨域的理解与解决** - 跨域是指由于同源策略限制，浏览器阻止了一个域的JavaScript代码访问另一个域的资源。解决跨域的方式有： - JSONP（JSON with Padding）：利用动态插入`<script>`标签的src属性来绕过同源策略。 - CORS（Cross-Origin Resource Sharing）：服务器通过设置`Access-Control-Allow-Origin`响应头，允许特定的跨域请求。 - 代理服务器：通过设置服务器作为中介，转发客户端请求到其他域。 - document.domain（仅限同一二级域名下）：设置相同`document.domain`可以解除子域间的同源限制。 以上是面试中可能遇到的一些前端核心知识点，理解并熟练掌握这些能够帮助你在面试中表现出色。在准备面试时，除了这些基础内容，还需要了解ES6新特性、DOM操作、CSS布局、性能优化、前端框架如React、Vue等以及网络知识等相关领域。