前端每日知识3+1_第5天

最新推荐文章于 2024-07-19 14:40:55 发布

祭夜醉美

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量164

点赞数

分类专栏：前端求职文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44665456/article/details/127065407

版权

前端求职专栏收录该内容

50 篇文章 0 订阅

订阅专栏

[html] [简述超链接target属性的取值和作用]

 [css] [CSS3新增伪类有哪些并简要描述]

[JS]写一个把字符串大小写切换的方法]

HTML：

a 标签的 target 属性一共有四个值。

_self

默认属性。在当前窗口或者框架中加载目标文档。

_blank

打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel="noopener norefferrer" 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。

_parent

在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。

_top

在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。

CSS：

CSS3 中规定伪类使用一个 : 来表示；伪元素则使用 :: 来表示。

CSS3 中新增的伪元素有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式）
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器，用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

// 方法一

function caseConvert(str) {
  return str.split('').map(s => {
    const code = s.charCodeAt();
    if (code < 65 || code > 122 || code > 90 && code < 97) return s;
    
    if (code <= 90) {
      return String.fromCharCode(code + 32)
    } else {
      return String.fromCharCode(code - 32)
    }
  }).join('')
}

console.log(caseConvert('AbCdE')) // aBcDe 

function caseConvertEasy(str) {
  return str.split('').map(s => {
    if (s.charCodeAt() <= 90) {
      return s.toLowerCase()
    }
    return s.toUpperCase()
  }).join('')
}

console.log(caseConvertEasy('AbCxYz')) // aBcXyZ 

// 方法二：
function caseConvert(str){
    return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>{
	return `${s1.toUpperCase()}${s2.toLowerCase()}`
    })
}
caseConvert('AsA33322A2aa') //aSa33322a2AA