本文共 1323 字，大约阅读时间需要 4 分钟。

前端面试题第五天

一、HTML 部分

1.1 target属性的取值与作用

在使用框架内的文档时，a标签的target属性用于指定被引用的URL应在哪个框架中加载。target属性的值有五种取值：

• blank：在一个新窗口中打开链接
• self：在当前页面打开链接
• parent：在父级窗口加载新内容
• top：在浏览器的顶级窗口加载新内容
• new：始终在一个新窗口中打开

这些取值决定了链接的打开方式，在实际应用中可以灵活选择以满足需求。

二、CSS 部分

2.1 CSS3新增伪类

CSS3引入了许多新伪类，扩展了CSS的功能。常用伪类包括：

• 表单伪类：

  • :enabled 选取可用的表单元素
  • :disabled 选取禁用的表单元素

• 布局伪类：

  • :root 选取文档的根元素（等同于html）
  • :empty 选取没有子元素的单元素

• 选择伪类：

  • :target 选取当前活动的目标元素
  • :first-child 和 :last-child 选取索引最前或最后的子元素
  • :nth-child(n) 和 :nth-last-child(n) 根据位置选取子元素

• 筛选伪类：

  • :not(selector) 选取不符合selector的元素
  • :only-child 选取只有一个子元素的父元素

• 文本伪类：

  • :first-line 和 :last-line 选取元素中的第一行或最后一行
  • :first-letter 和 :last-letter 选取元素中的第一个或最后一个字符

这些伪类大大提升了CSS的灵活性和复杂性，是现代CSS功臣。

三、JS 部分

3.1 字符串大小写切换方法

以下是实现字符串大小写切换的一个简单方法：

let str = 'web_chicken form CSDN';
const arr = [];
for (const item of str) {
    item === item.toUpperCase() ? (arr.push(item.toLowerCase()), true) : 
        (arr.push(item.toUpperCase()), false);
}
console.log(arr.join('')); // 输出: 'web_chicken form CSDN'

这个方法通过遍历字符串中的每个字符，判断是否为大写字母，将小写字母转换为大写或反之，并输出结果字符串。尽管方法较为基础，但能满足基本需求。

如需优化，可以改用 split('') 和 map 方法：

let str = 'web_chicken form CSDN';
const arr = str.split('').map(item => item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase());
console.log(arr.join('')); // 输出: 'WEB_CHICKEN FORM CSDN'

优化版本更简洁，减少了代码行数，同时保持功能一致。

以上就是关于前端面试题的整理与解答，希望对你有所帮助！

转载地址：http://mbpuk.baihongyu.com/