目录：
- 条件语句
- 获取标签元素
- 标签属性的获取和设置
- 数组及操作方法
- 循环语句
- 字符串的拼接
- 定时器
一、条件语句
条件语句就是通过条件来控制程序的走向
1. 条件语句语法
- if 语句-只有当指定条件为true时，使用该语句来执行代码
- if...else 语句-当条件为true时执行代码，当条件为false时执行其他代码
- if...else if...else 语句-使用该语句来判断多条件，执行条件成立的语句
2. 比较运算符
让 x = 5；
比较运算符 | 描述 | 例子 |
== | 等于 | x == 6为false |
=== | 全等（值和类型） | x === 5为true；x === "5"为false |
!= | 不等于 | x != 8 为true |
> | 大于 | x > 6 为false |
< | 小于 | x < 6 为true |
>= | 大于或等于 | x >= 5 为true |
<= | 小于或等于 | x <= 5 为true |
比较运算法代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var sStr = '100'
var iScore = 100;
if (sStr == iScore){
alert("用==判断，内容相同即可，类型不同也没关系");
}
if (sStr === iScore){
alert("用===判断，内容和类型都要一样");
}
if (iScore < 60){
alert("不及格");
}else if (iScore <= 70){
alert("刚及格");
}else if (iScore <= 80){
alert("还可以");
}else{
alert("优秀");
}
</script>
</head>
<body>
</body>
</html>3. 逻辑运算符
让 x = 6，y = 3
比较运算符 | 描述 | 例子 |
&& | and | （x < 7 && y > 4）为 true |
|| | or | （x < 7 || y < 4）为 true |
！ | not | !（x < 7）为 false |
逻辑运算符代码：
var iNum1 = 1;
var iNum2 = 2;
// &&：只有两个条件都满足之后结果才为true
if(iNum1 >= 0 && iNum2 < 2){
alert("条件成立");
}else{
alert("条件不成立");
}
// ||：只要有其中一个条件成立，结果就为true
if(iNum1 >= 0 || iNum2 < 2){
alert("条件成立");
}else{
alert("条件不成立");
}
// ！：对结果取反
if(!(iNum2 < 3)){
alert("条件成立");
}else{
alert("条件不成立");
}二、获取标签元素
可以使用js的内置对象document上的getElementById方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它的值赋给一个变量：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// js的内置对象，html的文档对象，如果获取的对象是null，说明没有获取成功
var oP = document.getElementById("p1");
alert(oP);
</script>
</head>
<body>
<p id="p1">我是一个段落标签</p>
</body>
</html>结果：
出现null证明没有获取成功，可以看到我们的js代码在body前面，也就是先执行js代码之后再执行html代码，所以在js获取标签时并没有id为“p1”的标签，所以会获取失败
1. 所以，我们可以把js代码放在最后（了解）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">我是一个段落标签</p>
</body>
</html>
<script>
// js的内置对象，html的文档对象，如果获取的对象是null，说明没有获取成功
var oP = document.getElementById("p1");
alert(oP);
</script>2. 设置页面加载完成执行的函数，在执行函数里面获取标签元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// js的内置对象，html的文档对象，如果获取的对象是null，说明没有获取成功
// 该语句是检测页面加载完成，后执行function函数。该函数就用一次，可以不设置名字
window.onload = function(){
var oP = document.getElementById("p1");
alert(oP);
}
</script>
</head>
<body>
<p id="p1">我是一个段落标签</p>
</body>
</html>结果：
可以看到，获取成功了
onload是页面所有元素加载完成事件，给onload设置函数时，当事件触发就会执行设置的函数
三、标签属性的获取和设置
1. 属性的操作
在获取页面的标签标签元素后，可以对页面属性进行操作：
- 属性的读取
- 属性的设置
// 获取标签的属性
alert(oBtn.type);
alert(oBtn.value);
// 设置标签属性
oBtn.name = 'username';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btnstyle{
background: yellow;
font-size: 30px;
}
</style>
<script>
window.onload = function(){
// 通过id获取标签对象
var oBtn = document.getElementById('btn1');
// 获取标签的属性
alert(oBtn.type);
alert(oBtn.value);
// 设置标签属性
oBtn.name = 'username';
// 1. 设置样式属性
// oBtn.style.background = 'red';
// 2. 也可以通过类选择器给标签添加样式,
oBtn.className = 'btnstyle';
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<!-- 3. 也可以直接在后面加上class来设置样式属性 -->
<!-- <input type="button" value="按钮" id="btn1" class="btnstyle"> -->
</body>
</html>结果：
标签属性的获取和设置：
- var 标签对象 = document.getElementById("id名称")；->获取标签对象
- var 变量名 = 标签对象.属性名；->读取属性
- 标签对象.属性名 = 新属性值; ->设置属性
2. innerHTML
innerHTML可以读取或者设置标签包裹的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.innerHTML);
// 将div中的内容改为一个a标签
oDiv.innerHTML = '<a href = "https://www.baidu.com">百度</a>';
}
</script>
</head>
<body>
<div id="div1">
我就是div的包裹的内容
</div>
</body>
</html>结果：
四、数组及操作方法
1. 数组的介绍
数组就是一组数据的集合，js中数组里面的数据可以是不同类型的数据，与python中的列表类似
2. 数组的定义及操作
2.1 数组的定义（两种方法）
// 定义数组，用new要注意后面是小括号
var aArray1 = new Array(1, 2, 3);
// 直接赋值一个数组，数组的表现形式是一对中括号
var aArray2 = [4, 5, 6];
2.2 多维数组
多维数组就是数组的成员也是数组
// 多维数组
var aArray3 = [[1, 2, 3], [4, 5, 6]];
2.3 数组的操作
1. 获取数组的长度
// 获取数组长度
alert(aArray4.length);
2. 根据下标取值
// 根据下标取值,js中的数组不允许负值下标
alert(aArray4[1]);
3. 在数组最后添加和删除数据
// 追加数据：push，不支持下标追加
aArray4.push('hello');
console.log(aArray4);
// 删除最后一个元素，这里pop不支持下标删除
var aArray5 = [3, 5, 7];
aArray5.pop();
console.log(aArray5);
4. 修改数据
// 根据下标修改数据
aArray4[2] = 90;
5. 根据下标添加和删除
array.splice(start，num，element1，......，elementN)
参数解释：
- start：必填，开始删除的索引
- num：选填，删除元素的个数
- elementN：选填，在索引位置前插入的元素
array.splice(1)：表示从第二个元素开始（包括第二个）到最后一个元素都删除
// 插入数据splice：参数：开始删除的索引 删除的个数 插入的数据
var aArray6 = [2, 4, 8];
// 删除个数为0，且有第三个参数就是插入
// 在第二个元素前面插入数据‘你好’
aArray6.splice(1, 0, '你好');
// 删除数据splice
var aArray7 = [5, 7, 9];
// 从第二个元素开始删除两个数据
aArray7.splice(1, 2);
console.log(aArray7);
// 添加多个数据
var aArray8 = [0, 1, 2];
// 第二个元素前面加元素‘你好’，‘js’
aArray8.splice(1, 0, '你好', 'js');
console.log(aArray8);总体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定义数组，用new要注意后面是小括号
var aArray1 = new Array(1, 2, 3);
console.log(aArray1);
// 直接赋值一个数组，数组的表现形式是一对中括号
var aArray2 = [4, 5, 6];
console.log(aArray2);
// 多维数组
var aArray3 = [[1, 2, 3], [4, 5, 6]];
console.log(aArray3);
// 根据下标获取数据
alert(aArray3[0][2]);
var aArray4 = [7, 8, 9];
// 获取数组长度
alert(aArray4.length);
// 根据下标取值,js中的数组不允许负值下标
alert(aArray4[1]);
// 根据下标修改数据
aArray4[2] = 90;
console.log(aArray4);
// 追加数据：push，不支持下标追加
aArray4.push('hello');
console.log(aArray4);
// 对同一个数组进行追加操作-终端输出和删除操作-终端输出，会发现两次输出的数组一样，这说明js是先完成操作再取值（如果用alert弹窗则不会这样）
// 删除最后一个元素，这里pop不支持下标删除
var aArray5 = [3, 5, 7];
aArray5.pop();
console.log(aArray5);
// 插入数据splice：参数：开始删除的索引 删除的个数 插入的数据
var aArray6 = [2, 4, 8];
// 删除个数为0，且有第三个参数就是插入
// 在第二个元素前面插入数据‘你好’
aArray6.splice(1, 0, '你好');
// 删除数据splice
var aArray7 = [5, 7, 9];
// 从第二个元素开始删除两个数据
aArray7.splice(1, 2);
console.log(aArray7);
// 添加多个数据
var aArray8 = [0, 1, 2];
// 第二个元素前面加元素‘你好’，‘js’
aArray8.splice(1, 0, '你好', 'js');
console.log(aArray8);
// var aArray = [0, 1, 2];
// aArray.splice(1);
// console.log(aArray);
</script>
</head>
<body>
</body>
</html>结果：
- 数组的定义：使用一对中括号（或者用new方法）
- 获取数组长度：length属性
- 在数组最后添加：push方法
- 在数组最后删除：pop方法
- 根据下标添加和删除：splice方法
五、循环语句
学到这发现，这不就和c语言的循环一毛一样嘛，js有类似c语言的定义变量、判断语句、循环语句、函数定义使用；但它的数组还和c不一样，而是类似于python的列表。
循环分为三种写法：
- for
- while
- do-while
代码例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var aArray = [1, 2, 3, 4];
for(var index = 0; index < aArray.length; index++){
alert(aArray[index]);
}
var index = 0;
while(index < aArray.length){
alert(aArray[index]);
index++;
}
// 不同的是，do-while语句即使条件不成立也会执行一次（因为它是先执行do里面的语句，后在进行判断）
var index = 0;
do{
alert(aArray[index]);
index++;
}while(index < aArray.length);
</script>
</head>
<body>
</body>
</html>六、字符串的拼接
字符串的拼接是用 + 这个符号
代码例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iNum = 10;
var sStr1 = '张三';
var sStr2 = '法外狂徒';
alert(sStr2 + sStr1);
// 字符串和数字可以直接拼接，它会帮你将数字转化为字符串
alert(sStr1 + iNum);
</script>
</head>
<body>
</body>
</html>结果：
七、定时器
定时器就是在一段特定的时间后执行某段程序代码
有两种定时器：
- setTimeout(function，delay，param1，param2......)：以指定的时间间隔（毫秒计算）调用一次函数的定时器
- setInterval(function，delay，param1，param2......)：以指定的时间间隔（毫秒计算）重复调用函数的定时器
参数说明：
- function：表示定时器要执行的函数名
- delay：表示时间间隔，默认是0，以毫秒为单位
- param1：表示定时器执行函数的第一个参数
setTimeout应用代码示例：
// 定时器：根据指定的时间间隔延时调用指定的函数
function fnShow(name, age){
alert(name + age);
alert(tid);
// 销毁定时器
clearTimeout(tid);
}
// 定义定时器，会把定时器的编号返回，从1开始
// setTimeout调用一次函数
var tid = setTimeout(fnShow, 2000, '张三', 18);setInterval应用代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fnShowInfo(name, age){
alert(name + age);
}
function fnStop(){
alert(tid);
// 销毁定时器
clearInterval(tid);
}
var tid = setInterval(fnShowInfo, 2000, '李四', 20);
</script>
</head>
<body>
<input type="button" value="点我停止弹窗" onclick="fnStop();">
</body>
</html>定时器不用了要清除定时器
- clearTimeout(timeoutID)清除只执行一次的定时器（对应setTimeout函数）
- clearInterval(timeoutID)清除重复执行的定时器（对应setInterval函数）
timeoutID：为计时器编号（也就是定义计时器的返回值）
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
