知识点回顾
- 后代选择器 可以使用多个选择器每个选择器之间用空格分开。只要是后代就会被选择如
<style>
div a{
color: red;
}
</style>
<div>
<a href="">我是儿子</a>
<p>
<a href="">我是孙子</a>
</p>
</div>
此时两个超链接都会变色
2. 子代选择器 可以使用多个选择器每个选择器之间用 > 分割。只有子代才会被选择
<style>
div>a{
color: red;
}
</style>
<div>
<a href="">我是儿子</a>
<p>
<a href="">我是孙子</a>
</p>
</div>
第一个超链接才会变成红色
3. 如何去除html自带的 li 的样式
li {
list-style:none;
}
- 如果一个div盒子有高度，如何让里面的文字垂直居中
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试input checkbox的label</title>
<style>
div{
height: 40px;
border: 1px solid pink;
line-height: 40px;
}
</style>
</head>
<body>
<div>真的笑不出来了</div>
<script>
</script>
</body>
</html>
使用 line-height 即可。
5. 插入一个节点，使用document.createElement("<tagName>") 使用 append 表示在尾后插入一个子节点，使用prepend 表示在头部插入一个子节点。
after 则是在这个节点后插入一个兄弟节点，before 则是在这个节点前面插入一个兄弟节点。删除节点很爽不需要知道这个节点的父节点是什么直接调用remove()方法即可。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插入删除节点例子</title>
</head>
<body>
<button id="id_btn_add">点击增加节点</button>
<button id="id_btn_delete">点击删除节点(删除年级)</button>
<ul>
<li>一年级
<ul>
<li>小明</li>
<li>小红</li>
</ul>
</li>
<li>二年级
<ul>
<li>老王</li>
<li>杰哥</li>
</ul>
</li>
</ul>
<script>
let btnAdd = document.querySelector("#id_btn_add");
btnAdd.addEventListener("click", e => {
let ulEle = document.querySelector("body>ul");
let liEle = document.createElement("li");
liEle.innerHTML = '三年级<ul><li>翠翠</li><li>兰兰</li></ul>';
ulEle.append(liEle);
let test = document.querySelectorAll("body>ul>li");
let grandLiEle = test[0].querySelectorAll("ul>li")[0];
let newLiEle = document.createElement("li");
newLiEle.innerHTML = "八戒";
grandLiEle.after(newLiEle);
});
let btnDele = document.querySelector("#id_btn_delete");
btnDele.addEventListener("click", e => {
let liNodeList = document.querySelectorAll("body>ul>li");
if(liNodeList.length > 0){
liNodeList[liNodeList.length - 1].remove();
}else{
alert("没有元素可以删除了");
}
});
</script>
</body>
</html>
- 事件的冒泡，冒泡这个特性还是经常用到的，真正产生事件的html元素通过
event.target来获取。获取到对应的html元素后，就可以有很多操作了，如parentNode来获取该元素的父亲元素。nodeName来获取节点名称等等
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的冒泡</title>
<style>
div{
height: 60px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrapper" id="id_box">
<ul>
<li>我是小明</li>
</ul>
</div>
<script>
let divEle = document.querySelector("#id_box");
divEle.addEventListener("click", event => {
console.log(event.target);
});
</script>
</body>
</html>
- html中并没有什么直接方法来获取 ul 或者 ol 下面 li的数量。还是得通过
querySelectorAll()接口来获取
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件的冒泡</title>
<style>
div{
height: 60px;
border: 1px solid pink;
}
</style>
</head>
<body>
<button id="id_btn">获取li的数量</button>
<ul>
<li>小红</li>
<li>大白</li>
<li>丽丽</li>
</ul>
<script>
let btnEle = document.querySelector("#id_btn");
let ulEle = document.querySelectorAll("body>ul>li");
btnEle.addEventListener("click", event => {
console.log(ulEle.length);
});
</script>
</body>
</html>
- 正则表达式向后向前环视，(首先书上写JavaScript不支持环视，但是现在JavaScript是支持的)。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正则表达式环视</title>
<style>
div{
height: 60px;
border: 1px solid pink;
}
</style>
</head>
<body>
<script>
let str = "已完成8/全部10";
let str1 = "https://www.forta.com";
let complete = str.match(/(?<=已完成)[0-9]+/);
let total = str1.match(/\w+(?=:)/);
console.log(complete[0]);
console.log(total[0]);
</script>
</body>
</html>
环视挺好用的