函数（重点）
1.函数中的this（重点）
<body>
<button id="btn">点击</button>
<script>
function fun() {
console.log(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>
btn1.className = 'active'
btn2.className = '';
</script>
3.使用js给元素添加样式
<div>23423</div>
<script>
var $div = document.getElementsByTagName('div');
$div[0].style.width = '100px';
$div[0].style.height = '200px';
$div[0].style.background = 'red';
$div[0].style.fontSize = '30px';
</script>
4.使用js生成HTML结构写入页面中（点击生成任意表格）
<div id="btn">
<span>2324</span>
</div>
<script>
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 () {
for (var j = 0; j < btn.length; j++) {
btn[j].className = ''
}
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.getElementsByClassName('con');
for (var i = 0; i < btn.length; i++) {
btn[i].idx = i;
btn[i].onclick = function () {
for (var j = 0; j < btn.length; j++) {
btn[j].className = 'btnList';
con[j].style.display = 'none';
}
this.className = 'btnList active';
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);
}
function fn(n) {
if (n === 0) {
return
}
n--;
fn(n);
console.log(n);
}
fn(5);
</script>
8.递归的案例
利用递归求5 的阶乘
<script>
function fun(n) {
if (n === 1) {
return 1
}
return n * fun(n - 1)
}
var res = fun(5);
</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) {
console.log(typeof a);
}
function fun() {
return 1
}
fn(fun)
function a(callback) {
var num1 = 10;
var num2 = 20;
var res = num1 + num2;
callback(res);
}
a(function(res) {
console.log(res);
});
</script>
10.随机数
<script>
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);
}
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() {
for (var j = 0; j < btn.length; j++) {
btn[j].className = ''
}
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');
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
if (this.innerHTML === '全选') {
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = true;
}
} else if (this.innerHTML === '反选') {
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = !inputs[j].checked;
}
} else if (this.innerHTML === '不选') {
for (var j = 0; j < inputs.length; j++) {
inputs[j].checked = false;
}
}
}
}
</script>
</body>
</html>
Processed:
0.009, SQL:
9
