每日分享:
你的心要大,这样看到的世界才会大。不要因为别人的一句话,就丢了一天的快乐,不值得。
目录:
- 条件语句
- 获取标签元素
- 标签属性的获取和设置
- 数组及操作方法
- 循环语句
- 字符串的拼接
- 定时器
一、条件语句
条件语句就是通过条件来控制程序的走向
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:为计时器编号(也就是定义计时器的返回值)