文章目录
第一节：选择与循环
条件判断语句
1、if 语句
【if单分支结构】
【if双分支结构】
当if括号内的表达式结果成立，执行执行语句1，否则执行执行语句2
【if多分支结构】
从上往下，满足哪个条件就执行其相对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一
案例：猜数字游戏
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
</head>
<body>
<h1>猜数字游戏</h1>
<p>现在已生成一个1-100的数字，猜猜吧！猜中有奖</p>
<input type="number" id="num">
<button id="btn">确定</button>
<script type="text/javascript">
//DOM节点操作：获取页面元素
var num = document.getElementById('num');
var btn = document.getElementById('btn');
//使用随机函数，获取随机数字(0-1之间的数)
var number = parseInt(Math.random()*100+1); //得到1-100之间的数
//绑定鼠标点击事件(元素.事件名 = 事件处理函数)
btn.onclick = function(){
//var mynum = number(num.value); //获取输入的值(字符串)，并转为数字类型
var mynum = num.value*1; //进行算术运算也能转数字类型
//进行逻辑判断
if(mynum > number){
alert('你输的数大了！');
}else if(mynum < number){
alert('你输的数小了！');
}else{
alert('恭喜，猜中了！');
}
}
</script>
</body>
</html>
浏览器结果：
2、三元运算
格式：条件 ? 条件成立执行的代码 : 条件不成立执行的代码
例：
<script type="text/javascript">
var a = 20;
var b = 50;
//三元运算,判断a是否大于b,是就执行a-b，不是执行a+b
var c = a>b ? a-b : a+b;
console.log(c);
</script>
控制台结果：
3、switch语句
switch语句在比较值时使用的是全等操作符，因此不会发生类型转换
case—— 当符合条件时，会从符合条件的那一条case语句开始，依次顺序向下执行（case穿透）
break—— 跳出switch语句（必须加，否则case穿透）
default—— 当所有的case都不满足的情况下会执行defalut下面的语句
【结构】
案例：计算两个文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算两个文本框的值</title>
</head>
<body>
<h1>计算两个文本框的值</h1>
<input type="number" id="num1"> <!-- 文本框1 -->
<select id="mySelect"> <!-- 运算符下拉菜单 -->
<option value="add">+</option>
<option value="minu">-</option>
<option value="mult">×</option>
<option value="divi">÷</option>
<option value="mo">%</option>
</select>
<input type="number" id="num2"> <!-- 文本框2 -->
<button id="btn"> 计算 </button> <!-- 计算按钮 -->
<div id="rest"></div> <!-- 计算结果 -->
<script type="text/javascript">
// 获取所有元素
var numb1 = document.getElementById('num1');
var numb2 = document.getElementById('num2');
var mySelect = document.getElementById('mySelect');
var btn = document.getElementById('btn');
var rest = document.getElementById('rest');
//按钮点击时方法
btn.onclick = function(){
// 获取元素被输入的值
var Numb1 = numb1.value*1;
var Numb2 = numb2.value*1;
var myselect = mySelect.value;
console.log(Numb1,myselect,Numb2); //此处为控制台调试
var res; //声明一个变量但不赋值
// 进行逻缉判断
switch(myselect){
case 'add':
res = Numb1 + Numb2; //结果赋值给空变量res
break;
case 'minu':
res = Numb1 - Numb2;
break;
case 'mult':
res = Numb1 * Numb2;
break;
case 'divi':
res = Numb1 / Numb2;
break;
case 'mo':
res = Numb1 % Numb2;
};
console.log(res); //此处为控制台调试
rest.innerHTML = "计算结果：" + res; //把res的结果传回浏览器
}
</script>
</body>
</html>
浏览器结果：
条件循环语句
循环就是重复做一件事, 在JS中指的是循环执行某部分代码.循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止
【注意】
只要条件成立，就会不断地执行花括号里的语句
编写条件时，要避免出现死循环
1、while循环
结构
//变量初始化
while(条件){
//条件成立就会不断地执行这里的代码，直到条件不成立
//所以这里一般会伴随着条件的更新
}
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
</head>
<body>
<h1>求30以内所有奇数的和</h1>
<script type="text/javascript">
// 变量初始化
var numb = 1; //初始值
var total = 0; //初始总和
while(numb <= 30){
// 求奇数和，对奇数进行判断
if(numb % 2 !=0){
total += numb;
console.log(numb + '是奇数')
}
// 变量更新，往条件不成立的方向改变
numb++;
};
//循环完成后才会执行下面代码
console.log('奇数总和是：' + total);
</script>
</body>
</html>
控制台结果：
2、do…while
//变量初始化
do {
//不管条件是否成立，先执行一次这里的代码，再进行条件判断，如果条件依然成立，则再次执行这里的代码，依此类推
//所以这里一般会伴随着条件的更新
} while(条件)
例：do…while与while的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
</head>
<body>
<h1>do...while与while的区别</h1>
<script type="text/javascript">
// 变量初始化
var numb = 1; //初始值
do{
// 不管条件是否成立，我都要执行
console.log('我是do的内容，我被打印了');
numb++;
}while(numb>20) //numb不可能大于20，但仍执行了do语句
</script>
</body>
</html>
控制台结果：
3、for循环
对于循环来说，在代码当中，
while和do...while其实都并不是最常用的手法，更多使用的还是for循环。
tips： 当知道循环次数时最好使用for循环，否则使用while更好
for(变量初始化; 条件判断; 变量更新){ //两个分号必须写
//循环条件成立，则执行这里的代码
}
例：求30以内所有奇数的和 (for循环版)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
</head>
<body>
<h1>求30以内所有奇数的和</h1>
<script type="text/javascript">
for(var numb = 1,total = 0;numb < 30;numb++){
// 求奇数和，对奇数进行判断
if(numb % 2 !=0){
total += numb;
console.log(numb + '是奇数')
}
}
//循环完成后才会执行下面代码
console.log('奇数总和是：' + total);
</script>
</body>
</html>
案例：十年后的工资
例：小王入职薪水10K，每年涨幅5%，10年后工资多少？这10年小王赚了多少钱？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
</head>
<body>
<h1>十年后的工资</h1>
<p>问题：</p>
<p>小王入职薪水10K，每年涨幅5%，10年后工资多少？</p>
<p>这10年小王赚了多少钱？</p>
<button id="btn">解答</button>
<div id="after10"></div>
<div id="total10"></div>
<script type="text/javascript">
//获取元素
var btn = document.getElementById('btn');
//按钮点击时方法
btn.onclick = function(){
var salary = 10000;
var total = salary*12
console.log('第一年赚了' + total +'元')
// 进行循环计算
for(var year = 2;year <= 10;year++){
salary += salary*0.05;
total += salary*12
console.log('第' + year + '年的工资是：' + salary.toFixed(2) + '元')
console.log('到第' + year + '年一共赚了：' + total.toFixed(2) + '元')
}
//把十年后结果传回浏览器
after10.innerHTML = '十年的工资是：' + salary.toFixed(2) + '元'
total10.innerHTML = '十年所赚的钱有：' + total.toFixed(2) + '元'
}
</script>
</body>
</html>
浏览器结果：
案例2：生成N行M列表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
<style type="text/css">
table{border-collapse: collapse;}
table td{border: 1px solid #00f;padding: 5px 10px;}
#output{margin-top: 30px;}
</style>
</head>
<body>
<h1>生成N行M列表格</h1>
<label for="row">请输入行数：</label>
<input type="number" id="row"><br>
<label for="col">请输入列数：</label>
<input type="number" id="col"><br>
<button id="btn">点击生成</button>
<div id="output"></div>
<script type="text/javascript">
//获取元素
var row = document.getElementById('row');
var col = document.getElementById('col');
var btn = document.getElementById('btn');
//按钮点击时方法
btn.onclick = function(){
// 获取元素被输入的值
var irow = row.value*1;
var icol = col.value*1;
//根据值，生成表格标签和标签内容
var content = '<table><tbody>';
//循环，控制行
for(var i=0;i<irow;i++){
content += '<tr>';
//内层循环，控制列
for(var j=0;j<icol;j++){
content += '<td>'+i+'行*'+j+'列</td>';
}
//闭合tr
content += '</tr>';
}
//闭合table和tbody
content += '</tbody></table>';
//把结果传回浏览器
output.innerHTML = content;
}
</script>
</body>
</html>
浏览器结果：
第二节：DOM
关于DOM
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。OM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。DOM的操作可以动态地改变元素的属性，增加一个元素等。
DOM树
DOM的节点操作
javaScript的位置
在js的基本语中，有三大流程控制，分别是：
顺序控制、分支控制和循环控制。在上章的《JS的编写位置》说了，内部js代码，可以编写在<head>部位，也可以编写在<body>内所有标签的最后。规则上看似没有问题，但是代码的解析其实仍然是离不开顺序控制的。所以更多地、也更好地，是选择后者。因为写在<head>部位，会获取不到DOM节点
获取DOM节点
document.getElementById('idname')—— 通过id获取
getElementsByClassName('ClassName')—— 通过类名获取
document.getElementsByTagName('tagname')—— 通过标签名获取
除了以上三个，还有
document.querySelector('anySelector')—— 通过任何选择器获取（只获取首个匹配元素）
document.querySelectorAll('anySelector')—— 通过任何选择器获取（获取所有匹配元素）
1、通过id获取DOM节点
例1：编写在DOM树头部JS，获取DOM节点无效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点获取</title>
<!--编写在head里的JS-->
<script type="text/javascript">
//获取id = 'baidu' 的DOM节点
var baidu = document.getElementById('baidu');
console.log(baidu);
</script>
</head>
<body>
<h1>DOM节点操作</h1>
<div id="list">
<a href="#">Google 谷歌</a><br/>
<a href="#" id="baidu">Baidu 百度</a><br/>
<a href="#">Yahoo 雅虎</a><br/>
</div>
</body>
</html>
控制台结果：
例2：编写在DOM树body最后的JS，获取DOM节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点获取</title>
</head>
<body>
<h1>DOM节点操作</h1>
<div id="list">
<a href="#">Google 谷歌</a><br/>
<a href="#" id="baidu">Baidu 百度</a><br/>
<a href="#">Yahoo 雅虎</a><br/>
</div>
<!--编写在body最后的JS-->
<script type="text/javascript">
//获取id = 'baidu' 的DOM节点
var baidu = document.getElementById('baidu');
console.log(baidu);
</script>
</body>
</html>
控制台结果：
2、通过类名class获取DOM节点
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点获取</title>
</head>
<body>
<h1 class="title">DOM节点操作</h1>
<div id="list">
<a href="#">Google 谷歌</a><br/>
<a href="#">Baidu 百度</a><br/>
<a href="#">Yahoo 雅虎</a><br/>
</div>
<h2 class="title">雅虎、百度、谷歌都是好孩子</h2>
<script type="text/javascript">
//获取name = 'title' 的DOM节点
var tit = document.getElementsByClassName('title');
console.log(tit);
</script>
</body>
</html>
控制台结果：
3、通过标签名获取DOM节点
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点获取</title>
</head>
<body>
<h1>DOM节点操作</h1>
<div id="list">
<a href="www.google.com">Google 谷歌</a><br/>
<a href="www.baidu.com">Baidu 百度</a><br/>
<a href="www.yahoo.com">Yahoo 雅虎</a><br/>
</div>
<a href="#">360</a><br/>
<script type="text/javascript">
//获取是a标签的DOM节点
var links = document.getElementsByTagName('a');
console.log(links);
</script>
</body>
</html>
控制台结果：
生成DOM节点
除了可以获取DOM节点对其操作，还可以生成DOM节点。但是所谓生成节点仅仅只是在内层里，并不在页面。所以想真正生成节点还要在页面的具体位置(父级元素)插入节点。
document.createElement()—— 生成DOM节点
父级元素.appendChild(添加的元素)—— 插入DOM节点
例：给页面图片生成标题节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点操作</title>
</head>
<body>
<div></div>
<img src="./img/dog.jpg"> <!-- 一张图片 -->
<script type="text/javascript">
//生成节点
var mytitle = document.createElement('h1');
//生成节点属性
mytitle.id = 'title';
//生成节点内容
mytitle.innerHTML = '西班牙举办大型宠物展 “公主汪”呆萌抢镜'
//获取父级标签(用获取节点的任意一种方法)
var mydiv = document.getElementsByTagName('div')[0]; //列表要用下标来获取
//插入到父级标签里
mydiv.appendChild(mytitle)
</script>
</body>
</html>
控制台结果：
在控制台上获取页面元素
【常用的获取方法】
document.documentElement—— 获取整个HTML
document.body—— 获取body所有元素
document.links—— 获取所有a标签
document.images—— 获取图片元素
例：在控制台上输入指令
案例：使用DOM节点操作创建表格
例：生成N行M列表格（DOM节点版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作创建表格</title>
<style type="text/css">
table{border-collapse: collapse;}
table td{border: 1px solid #00f;padding: 5px 10px;}
#output{margin-top: 30px;}
</style>
</head>
<body>
<h1>生成N行M列表格</h1>
<label for="row">请输入行数：</label>
<input type="number" id="row"><br>
<label for="col">请输入列数：</label>
<input type="number" id="col"><br>
<button id="btn">点击生成</button>
<div id="output"></div>
<script type="text/javascript">
//获取元素
var row = document.getElementById('row');
var col = document.getElementById('col');
var btn = document.getElementById('btn');
//按钮点击时方法
btn.onclick = function(){
// 获取元素被输入的值
var irow = row.value*1;
var icol = col.value*1;
//对元素进行清空(不清空每次点击都会叠加)
output.innerHTML = '';
//根据值，使用DOM节点生成表格标签和tbody标签
var i_table = document.createElement('table');
var i_tbody = document.createElement('tbody');
//把tbody标签写入table标签里
i_table.appendChild(i_tbody);
//使用for循环+DOM节点生成表格
for(var i=0;i<irow;i++){
var i_tr = document.createElement('tr'); //使用DOM节点生成tr标签
for(var j=0;j<icol;j++){
var i_td = document.createElement('td'); //使用DOM节点生成td标签
//生成随机背景颜色
var str = '0123456789abcdef';
var color = '#';
for(k=0;k<6;k++){
var idx = parseInt(Math.random()*str.length);
color += str[idx]
}
i_td.style.backgroundColor = color; //生成td标签的style属性
i_td.innerHTML = i+'行*'+j+'列'; //生成td标签的内容
i_tr.appendChild(i_td); //把td标签写入tr标签里
}
i_tbody.appendChild(i_tr); //把tr标签写入tbody里
}
//把table标签写入页面的div里
output.appendChild(i_table);
}
</script>
</body>
</html>
浏览器结果：
2973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
