函数（重点）
1.函数中的this（重点）
<body>
<button id="btn">点击</button>
<script>
/*
函数的中关键字
arguments 实参的集合
return
this 只有函数中才有的一个关键字（对象），主要指向（表示）的是当前对象
*/
function fun() {
console.log(this);
}
// 函数直接调用 window.fun(),函数的this指向window
// fun();
// var a = 10;
// console.log(window.a);
// 事件驱动调用 元素.事件类型 = 函数名，函数中的this指向绑定这个事件的元素
btn.onclick = fun;
</script>
</body>
2.使用js给元素添加class名 和移出class名
<button id="btn1">按钮1</button>
<button id="btn2" class="abc def">按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
// 给一个元素添加类名 元素.className = 'class名'
btn1.className = 'active'
// 移出class名 元素.className = ''
btn2.className = '';
</script>
3.使用js给元素添加样式
<div>23423</div>
<script>
// 使用js给元素添加样式
// 获取div这个元素，通过标签名来获取元素，得到一个HTML的集合
var $div = document.getElementsByTagName('div');
// 要在集合里面获取HTML标签,就需要集合的索引
// console.log($div[0]);
// 标签.style.你要添加的样式 = '样式的值'
$div[0].style.width = '100px';
$div[0].style.height = '200px';
$div[0].style.background = 'red';
// 当添加的属性是多个单词组成的，不再是想css用-隔开 font-seize
//在js中 fontSize
$div[0].style.fontSize = '30px';
</script>
4.使用js生成HTML结构写入页面中（点击生成任意表格）
<div id="btn">
<span>2324</span>
</div>
<script>
// 直接把 span元素写在body的页面中
// document.write('<span>我是js生成的span元素</span>');
// 把生成的span写在div中
// console.log(btn.innerHTML); 获取div元素的内容
// btn.innerHTML = '12323' 表示给btn设置内容
btn.innerHTML = '<span>我是js生成的span元素</span>'
</script>
5.排他思想
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
background: orange;
}
</style>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<script>
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
// 先移出 后添加
// 只给当前点击的这个元素添加active，其他的元素都要移出 active
// 通过循环把每一一个按钮的active都移出
for (var j = 0; j < btn.length; j++) {
btn[j].className = ''
}
// 给当前点击的这个元素 添加active
this.className = 'active';
}
}
</script>
</body>
</html>
6.实现选项卡案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 100px;
width: 460px;
}
.box .btn {
height: 40px;
margin-bottom: 5px;
}
.box .btn input {
float: left;
width: 100px;
text-align: center;
height: 40px;
margin-right: 20px;
border: 1px solid #334455;
}
.box .btn input:nth-child(4) {
margin-right: 0px;
}
.box .con {
width: 460px;
height: 400px;
border: 1px solid #ccc;
box-sizing: border-box;
display: none;
}
.box .btn .active {
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="btn">
<input type="button" class="btnList active" value="体育">
<input type="button" class="btnList" value="娱乐">
<input type="button" class="btnList" value="新闻">
<input type="button" class="btnList" value="教育">
</div>
<div class="con" style="display: block;">体育</div>
<div class="con">娱乐</div>
<div class="con">新闻</div>
<div class="con">教育</div>
</div>
<script>
// 获取按钮的元素
var btn = document.getElementsByTagName('input');
// 获取下面选项卡的元素集合
// var con = document.getElementsByTagName('div'); 这个是获取页面中所有的div元素，指向获取class名为con的这个元素
// 通过class名来获取元素
var con = document.getElementsByClassName('con');
// 循环给按钮添加点击事件
for (var i = 0; i < btn.length; i++) {
// 给每一个按钮添加一个idx的属性，并且赋值为 按钮的索引
btn[i].idx = i;
// 给每一个元素添加点击事件
btn[i].onclick = function () {
// 排他思想
// 把所有的按钮的active名去掉
for (var j = 0; j < btn.length; j++) {
// 用''来替换元素的所有class名 btnList也被替换掉了
// btn[j].className = '';
// 如果还想保留btnList，值去掉active
btn[j].className = 'btnList';
// 把下面所有的con 隐藏
con[j].style.display = 'none';
}
// 给当前点击的元素添加active，使用this来表示当前添加的这个元素
this.className = 'btnList active';
// 更改 con的状态
// con[i].style.display = 'block';
// 根据按钮的索引，拿到对应的con集合里面元素来显示
con[this.idx].style.display = 'block';
}
}
</script>
</body>
</html>
7.递归（了解）
- 递归：函数中的一种高级应用
- 用法：自己调用自己，在本身的函数中调用这个函数
- 死递归：函数中没有条件去结束这个递归，就会造成
死递归 - 递归写法：
- 【1】判断条件
- 【2】需要执行的代码
- 【3】变量更新
- 【4】函数的自调用
- 案例
/*
递归：函数中一种高级应用
应用：函数自己调用自己
递归的几个注意点：
+ 在使用递归的时候，函数中必须有结束条件，否则会造成死递归
+ 必须有结束条件
+ 必须有变量更新
+ 自己调用自己
*/
function fun(n) {
console.log(n);
// 设置条件来结束函数
if (n === 0) {
return
}
// 变量更新
n--
fun(n);
}
// fun(5); //n = 5
function fn(n) {
if (n === 0) {
return
}
n--;
fn(n);
console.log(n);
}
fn(5);
/*
执行43行的时候 fn(5) n-- 又执行了 fn(4)
fn(5)
fn(4)
fn(3)
fn(2)
fn(1)
fn(0) return
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
*/
</script>
8.递归的案例
<script>
// var res = 1;
// for (var i = 1; i <= 5; i++) {
// res *= i;
// }
/*
5! = 5*4!
4! = 4*3!
3! = 3*2!
2! = 2*1!
1! = 1
*/
// console.log(res);
//利用递归的形式求5的阶乘 并且当做函数的返回值
function fun(n) {
if (n === 1) {
return 1
}
return n * fun(n - 1)
}
var res = fun(5);
/*
fun(5) n = 5 执行29行 return 5 * fun(4) = 5* 24
fun(4) n = 4 执行29行 return 4 * fun(3) = 4 * 6
fun(3) n = 3 执行29行 return 3 * fun(2) = 3*2
fun(2) n = 2 执行29行 return 2 * fun(1) = 2*1
fun(1) n = 1 执行26-17 return 1
*/
</script>
-
斐波那契数列
推导公式：fib(m) = fib(m-1) + fib(m-2)<!-- 1 1 2 3 5 8 13 21....... n = 1 2 3 4 推导公式：fib(m) = fib(m-1) + fib(m-2) -->
```
9.回调函数（暂时了解）
<script>
/*
回调函数：把函数当成另一个函数参数
作用：外部访问内部的变量
*/
function fn(a) {
// var a = fun;
console.log(typeof a);
}
// 匿名函数 没有名字的函数
// fn(function () { })
function fun() {
// console.log('我是fun函数');
return 1
}
// 把一个已知名字的函数 当成 fn的参数 直接在括号里面写函数名
fn(fun)
// fn(fun()) 直接调用fun函数，把fun的返回值 当成 fn的实参
function a(callback) {
// // 内部 有这个步骤
// var callback = function(){console.log(res);}
var num1 = 10;
var num2 = 20;
// res是一个局部变量，外面不能访问这个变量
var res = num1 + num2;
// 调用回调函数
callback(res);
}
a(function(res) {
console.log(res);
});
</script>
10.随机数
<script>
/*
随机数：Math.random()
得到的是一个0-1（包含0但是不包含1）的随机数
0*10-1*10---0-10 不包含10
得到一个0-10的随机整数数 Math.random()*11 在取整
得到一个 10-30的随机整数
0-1 --- 0*31-1*31---0+10-30+10 --10-40
0*21-1*21--0+10-20+10 ----10-30
*/
// console.log(parseInt(Math.random() * 11));
// console.log(parseInt(Math.random() * 21 + 10));
// 30 到 80 之间的随机数 *51+30
// console.log(parseInt(Math.random() * 51 + 30));
// 编写一个函数，求任意两个数值之间的随机数,并返回
function randomNum(n, m) {
// (0-1)*191--(0-191)+10--10-201 191 = 200-10 + 1
// return parseInt(Math.random() * 191 + 10)
// 判断两个参数的大小
var max, min;
max = n > m ? n : m;
min = n < m ? n : m;
// (0-1)*6--(0-6)+10--10--16 6 = 15-10- +1
return parseInt(Math.random() * (max - min + 1) + min);
// (0-1)*(-7)-7--0--18--25
}
console.log(randomNum(27, 20));
</script>
11.封装任意两个数之间的随机数
// 任意两个数之间的随机数 调用函数的时候需要传两个数值的参数
function randomNum(n, m) {
// 判断两个参数的大小
var max, min;
max = n > m ? n : m;
min = n < m ? n : m;
return parseInt(Math.random() * (max - min + 1) + min);
}
12.排他思想
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
background: orange;
}
</style>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<script>
var btn = document.getElementsByTagName('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
// 先移出 后添加
// 只给当前点击的这个元素添加active，其他的元素都要移出 active
// 通过循环把每一一个按钮的active都移出
for (var j = 0; j < btn.length; j++) {
btn[j].className = ''
}
// 给当前点击的这个元素 添加active
this.className = 'active';
}
}
</script>
</body>
</html>
13.实现全选,反选,不选
<!DOCTYPE html>
<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="btn1">全选</button>
<button id="btn2">不选</button>
<button id="btn3">反选</button>
<div>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<script>
var btn = document.getElementsByTagName('button'); // 获取button按钮的元素集合，循环绑定点击事件
// 需要改变 复选框的状态，所以需要获取这些复选框
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
// 通过this 拿到点击的这个元素
// 怎么通过这个元素去判断我实现哪个功能
// 获取元素的内容进行判断，然后去写相应的功能 this.innerHTML
if (this.innerHTML === '全选') {
// 循环给每一个input添加 checked = true
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = true;
}
} else if (this.innerHTML === '反选') {
// 已经选上 把勾去掉 checked状态为true 需要改变为 false
// 未勾上的 需要勾上 checked状态false 需要改为 true
for (var j = 0; j < inputs.length; j++) {
// 循环把状态改变为 和以前相反的状态
// 执行顺序从右到左，赋值运算优先级最低，先获取input元素checked的状态并且取反，然后再把这个值赋值给input的checked属性
inputs[j].checked = !inputs[j].checked;
}
} else if (this.innerHTML === '不选') {
// 循环的把每一个input的 checked状态改为 false
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = false;
}
}
}
}
</script>
</body>
</html>