一省:HTML
20. html标签的tabindex属性?
- tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。除此之外,大屏项目或者需要用遥控器操控的页面,tabindex都是必不可少的属性。
<style>
ul {
display: flex;
}
li {
width: 100px;
height: 50px;
}
</style>
<ul>
<li tabindex="1">1</li>
<li tabindex="2">2</li>
<li tabindex="6">3</li>
<li tabindex="4">4</li>
<li tabindex="5">5</li>
<li tabindex="6">6</li>
</ul>
二省: CSS
20. css变量和js更改变量?
定义全局变量,用var()方法使用,方便设置修改统一的颜色等。
<style>
:root {
--color: #ffffff;
--bgColor: #000000;
}
ul {
display: flex;
}
li {
width: 100px;
height: 50px;
margin-right: 50px;
list-style: none;
color: var(--color);
background: var(--bgColor);
}
button {
margin-right: 30px;
}
</style>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
<button onclick="changColor()">改变文字颜色</button>
<button onclick="changebgColor()">改变背景颜色</button>
<script>
// 改变root文字颜色
function changColor() {
let root = document.querySelector(":root");
console.log(root.style);
root.style.setProperty("--color", "tomato")
}
// 改变root背景颜色
function changebgColor() {
let root = document.querySelector(":root")
root.style.setProperty("--bgColor", "skyblue")
}
</script>
三省:JavaScript
20. ES6新增特性Map/WeakMap和Set/WeakSet
1. Map: Map对象中保存键值对,任何数据类型(包括对象)都可以作为键/值。
// Map
// 初始化1
let map1 = new Map([["key1", "val1"],["key2", "val2"]])
console.log(map1);//Map(2) {'key1' => 'val1', 'key2' => 'val2'}
// 初始化
let obj = { name: "Jack" }
let map = new Map()
// set() 方法
map.set("str", "hello world")
map.set(obj, "abc")
map.set(1, 123)
console.log(map);//{'str' => 'hello world', {…} => 'abc', 1 => 123}
// has() 方法
console.log(map.has(obj));//true
console.log(map.has(1));//true
console.log(map.has(2));//false
// get() 方法
console.log(map.get(obj));//abc
console.log(map.get(1));//123
console.log(map.get("str"));//hello world
// size 属性
console.log(map.size);//3
// delete() 方法
// map.delete("str")
console.log(map.has("str"));//false
console.log(map.size);//2
// clear() 方法
// map.clear()
console.log(map.has(obj));//false
console.log(map.size);//0
// 遍历
map.forEach((item, key) => {
console.log(item, key);
})
for(const item of map) {
console.log(item[0], item[1]);
}
for(const [key, value] of map) {
console.log(key, value);
}
2. WeakMap: WeakMap是Map的兄弟类型,与Map类型不同的地方是WeakMap只能用对象当做键,值可以是任意类型。还有就是WeakMap对象不可迭代。
// WeakMap
let obj = {name: "Jack"}
let weakmap = new WeakMap()
weakmap.set(obj, "abc");//WeakMap {{…} => 'abc'}
weakmap.set(2, "321");//报错 Uncaught TypeError: Invalid value used as weak map key
console.log(weakmap);
3. Set: Set对象是值的集合且 Set 中的元素只会出现一次,即 Set 中的元素是唯一的,所以Set可以用于数组去重。
// Set
// 初始化1
let set1 = new Set(["val1", "val2", "val3"])
console.log(set1);//Set(3) {'val1', 'val2', 'val3'}
// 初始化
let set = new Set()
// add() 方法
set.add(1);
set.add(2);
set.add(3).add(4);
console.log(set);//Set(4) {1, 2, 3, 4}
// has() 方法
set.has(2);//true
// size 属性
console.log(set.size);//4
// delete() 方法
set.delete(1)
console.log(set);//Set(3) {2, 3, 4}
console.log(set.size);//3
// clear() 方法
set.clear();
console.log(set.has(2));//fasle
console.log(set.size);//0
// 迭代
set.forEach((item) => {
console.log(item);
})
for(const item of set) {
console.log(item);
}
// 去重
let arr = [1,1,2,3,2,3,4,5]
console.log([...new Set(arr)]);//[1, 2, 3, 4, 5]
4. WeakSet: WeakSet是Set的兄弟类型,与Set类型不同的地方是WeakSet中存的值只能是对象。还有就是WeakSet对象不可迭代。
// WeakSet
let weakset = new WeakSet()
let obj = {name: "Jack"}
weakset.add(obj);//WeakSet {name: 'Jack'}
weakset.add(2);//报错 Uncaught TypeError: Invalid value used in weak set
console.log(weakset);