函数（重点）

Posted 2020-12-14 rangvis

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了函数（重点）相关的知识，希望对你有一定的参考价值。

函数（重点）
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>

// 移出class名元素.className = ‘‘
btn2.className = ‘‘;

</script>
3.使用js给元素添加样式
<div>23423</div>

// 标签.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>

<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>

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>

// 获取下面选项卡的元素集合
// 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

</script>

斐波那契数列
推导公式：fib(m) = fib(m-1) + fib(m-2)
1
<!--
1 1 2 3 5 8 13 21.......
n = 1 2 3 4
推导公式：fib(m) = fib(m-1) + fib(m-2)

-->

```
1
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">

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>
————————————————
版权声明：本文为CSDN博主「Rangvis」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43901780/article/details/107111559

以上是关于函数（重点）的主要内容，如果未能解决你的问题，请参考以下文章

内置函数—重点掌握篇

五种函数定义方式----第五种是重点

Hive-窗口函数/开窗函数(重点理解~~~)

C语言重点篇：近万字总结文件操作函数

字符串库函数及重点函数的模拟实现下篇--- strstr + strtok + strerror

0412 日重点