目录
1. 简述超链接target属性的取值和作用
值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认值。在当前窗口或者框架中加载目标文档。 |
_parent | 在父框架集中打开被链接文档。当 a 标签本身在顶层时,则与 _self 相同。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
‘任意字符’ | 若该链接不是已打开的页面,则在新窗口中打开,与_blank一致;若该链接已经打开,则跳转到该标签页并刷新页面 |
2. CSS3新增伪类有哪些并简要描述
CSS3伪类 | 作用 |
---|---|
:root | 文档根元素,总是返回html |
:last-child, :only-child, :only-of-type | 文本的最后一个 / 唯一一个 / 指定类型的唯一一个 子元素 |
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), | 第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个 子元素 |
:enabled, :disabled | 启用 / 禁用 |
:checked | 已勾选 |
:default | 默认,例如radio group中默认选中的radio |
:valid, :invalid, :required, :optional, :in-range, :out-of-range | 校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input |
:not() | 括号内条件取反 |
:empty | 没有子元素的元素 |
:target | URL片段标识符指向的元素 |
3. 写一个把字符串大小写切换的方法
写法一:
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()}`
})
}
console.log(caseConvert('AsA33322A2aa')); //aSa33322a2AA
写法三:
let str = 'aBcDeFgH'
let arr = []
for(let item of str) {
if (item === item.toUpperCase()) {
item = item.toLowerCase()
} else {
item = item.toUpperCase()
}
arr.push(item)
}
let newStr = arr.join('')
console.log(newStr)
// AbCdEfGh
4. label都有哪些作用?并举相应的例子说明
label
标签为input
元素定义标注(标记)。
label
元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label
元素内点击文本,就会触发此控件。就是说,当用zhi户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
- 利用
label
"模拟"button
来解决不同浏览器原生button
样式不同的问题
<input type="button" id="btn">
<label for="btn">Button</label>
<style>
input[type='button'] {
display: none;
}
label {
display: inline-block;
padding: 10px 20px;
background: #456;
color: #fff;
cursor: pointer;
box-shadow: 2px 2px 4px 0 rgba(0,0,0,.3);
border-radius: 2px;
}
</style>
- 结合
checkbox
、radio
表单元素实现纯CSS状态切换,这样的实例就太多了。比如控制CSS动画播放和停止。下面是一部分代码。详细实例地址
<input type="checkbox" id="controller">
<label class="icon" for="controller">
<div class="play"></div>
<div class="pause"></div>
</label>
<div class="animation"></div>
<style>
...
#controller:checked ~ .animation {
animation-play-state: paused;
}
...
</style>
还有一个基于 radio
的实例:摩斯密码键盘
input
的focus
事件会触发锚点定位,我们可以利用label
当触发器实现选项卡切换效果。下面代码选自张鑫旭《CSS世界》。实际效果链接
<div class="box">
<div class="list"><input id="one" readonly>1</div>
<div class="list"><input id="two" readonly>2</div>
<div class="list"><input id="three" readonly>3</div>
<div class="list"><input id="four" readonly>4</div>
</div>
<div class="link">
<label class="click" for="one">1</label>
<label class="click" for="two">2</label>
<label class="click" for="three">3</label>
<label class="click" for="four">4</label>
</div>
<style>
.box {
width: 20em;
height: 10em;
border: 1px solid #ddd;
overflow: hidden;
}
.list {
height: 100%;
background: #ddd;
text-align: center;
position: relative;
}
.list > input {
position: absolute; top:0;
height: 100%; width: 1px;
border:0; padding: 0; margin: 0;
clip: rect(0 0 0 0);
}
</style>
5. 用css创建一个三角形,并简述原理
创建一个div,宽高都为0,实现效果如下,发现border的四个边都是一个三角形,要实现三角形只需将其中几个边background
设置为transparent
,即可得到三角形
<div class='rect'></div>
<style>
.rect {
width: 0;
height: 0;
background-color: #fff;
border-right: 100px solid rgb(34, 230, 220);
border-left: 100px solid rgb(202, 146, 25);
border-top: 100px solid rgb(29, 156, 194);
border-bottom: 100px solid rgb(16, 204, 101);
}
</style>
.rect {
width: 0;
height: 0;
background-color: #fff;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 100px solid rgb(29, 156, 194);
border-bottom: 100px solid transparent;
}
6. 写一个去除制表符和换行符的方法
<script>
/**
* \f 匹配换页字符。
* \n 匹配换行字符。
* \r 匹配回车符字符。
* \t 匹配制表字符。
* \v 匹配垂直制表符。
* @param str
* @returns {void | string}
*/
const removeEmpty = (str) => str.replace(/[\t\n\v\r\f]/g, "");
console.log(removeEmpty(`大家好\n早上好\t蛤?`))
</script>