Web Apls第三天
1.高阶函数
1.介绍
①可以理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
②(值 ) 就是 JavaScript 中的数据，如数值、字符串、布尔、对象
2.函数表达式
①函数表达式和普通函数区别
②函数也是【数据】
③把函数赋值给变量
//函数表达式与普通函数本质是一样的
let counter = function (x, y){
return x + y
}
//调用函数
let result = counter(5, 10)
console.log(result)
3.回调函数
①把函数当做另外一个函数的参数传递，这个函数就叫回调函数
②回调函数本质还是函数，只不过把它当成参数使用
③使用匿名函数做为回调函数最常见
function fn(){
console.log('我是回调函数')
}
//fn传递了setInterval,fn就是回调函数
setInterval(fn, 1000)
2. 环境对象
1.this作用
①函数的调用方式不同，this 指代的对象也不同
②(谁调用， this 就是谁) 是判断 this 指向的粗略规则
③直接调用函数，其实相当于是 window.函数，所以 this 指代 window
3.编程思想
1.使用
1.干掉所有人
①使用for循环
2.复活他自己
①通过this或者下标找到自己或者对应的元素
4.节点操作
1.DOM 节点
①DOM树里每一个内容都称之为节点
1.节点类型
1.元素节点
①所有的标签 比如 body、 div
②html 是根节点
2.属性节点
①所有的属性 比如 href /class属性
3.文本节点
①所有的文本
2.节点关系
1.父节点
①parentNode 属性
②返回最近一级的父节点 找不到返回为null
③案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-获取父节点.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<button>目标元素</button>
</div>
<script>
let button = document.querySelector('button');
// 先获取button 目标元素
console.dir(button);
console.dir(button.parentNode); // 获取到父元素 div标签
// 修改一下父元素的背景颜色
// console.dir(button.parentNode); // 获取到父元素 div标签
// button.parentNode.style.backgroundColor = 'red';
button.parentNode.style.display = 'none';
</script>
</body>
</html>
2.子节点
①childNodes
② 获得所有子节点、包括文本节点（空格、换行）、注释节点等
③children （重点）
④仅获得所有元素节点
⑤返回的还是一个伪数组
⑥案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-children.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
background-color: aqua;
padding: 20px;
}
li {
height: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>b1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>c1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
1 获取到所有的ul标签 数组
2 遍历ul数组 挨个绑定点击事件
3 点击事件触发了
1 this = 当前被点击的ul标签
2 this.children 获取到 所有的ul的子元素 数组
3 遍历 children 获取到中的每一个li标签
4 li.style.display="none"
*/
// let ul=document.querySelector("ul");
// 获取ul标签下的 子节点
// console.log(ul.children);
// console.log(ul.childNodes);// 什么都那
// 1 获取到所有的ul标签 数组
let uls = document.querySelectorAll('ul');
// 遍历ul数组 挨个绑定点击事件
for (let index = 0; index < uls.length; index++) {
// 3 点击事件触发了
uls[index].addEventListener('click', function () {
// 3.1 3.2 3.3 对被点击的ul的children 做遍历
for (let j = 0; j < this.children.length; j++) {
// this.children[j] 表示 每一个li标签
this.children[j].style.display="none";
}
});
}
</script>
</body>
</html>
3.兄弟节点
1.. 下一个兄弟节点
①nextElementSibling 属性
2.上一个兄弟节点
①previousElementSibling 属性
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-兄弟元素nextElementSibling和previosElementSibling.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
/*
1 获取所有的li标签 数组
2 遍历 绑定点击事件
3 事件触发了
this.next
this.previou 获取到对应的元素 设置他们的样式
*/
// 1 获取所有的li标签 数组
let lis = document.querySelectorAll('li');
// 2 遍历 绑定点击事件
for (let index = 0; index < lis.length; index++) {
// 3 事件触发了
lis[index].addEventListener('click', function () {
// 上一个兄弟 设置 蓝色
this.previousElementSibling.style.backgroundColor = 'blue';
// 下一个兄弟 设置 绿色
this.nextElementSibling.style.backgroundColor = 'green';
});
}
</script>
</body>
</html>
3.增加节点
1.创建节点
①创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
②语法
//创造一个新的元素节点
document.createElement('标签名')
2.追加节点
1.插入到父元素的最后一个子元素
①语法
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
2.插入到父元素中某个子元素的前面
①语法
//插入到这个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-创建节点和追加节点.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
padding: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
li.innerText="这个是新创建的li标签";
li.style.backgroundColor="green";
// 2 把li标签插入到 ul标签中
let ul = document.querySelector('ul');
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
</script>
</body>
</html>
