系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
JavaScript是一种轻量级的、跨平台的脚本语言，广泛应用于网页开发中，使得网页具有交互性，如动画、按钮等。它不仅限于浏览器环境，还被用于服务器端编程、移动应用开发等多个领域，JavaScript是解释型语言，支持函数优先的编程范式，易于学习和使用，JavaScript是单线程的，这降低了代码的复杂度，在某些场景下简化了程序设计，尽管有时被误解为“玩具语言”，但它其实隐藏着强大的功能和灵活性。
提示：以下是本篇文章正文内容，下面案例可供参考
数组
1.数组定义：存储任意数据类型的有序集合
2.数组的定义方式：
2.1.使用new关键字创建数组
let arr = new Array();
let arr = new Array(10);
let arr = new Array('张三', '李四', '王五');
2.2.使用字面量创建数组
let arr = [];
let arr = [10];
let arr = ['张三', '李四', '王五'];
3.数组的基本操作方法—增，删，改，查
3.1 数组元素查找
语法：数组名[下标]
说明：数组名就是数组的名称，下标就是数组元素的编号，从0开始，依次递增
3.2 数组元素的修改
语法：数组名[下标] = 新值
说明：数组名就是数组的名称，下标就是数组元素的编号，从0开始，依次递增
3.3 数组元素的增加
**方式1：数组名[下标] = 值**
说明：数组名就是数组的名称，下标就是数组元素的编号，从0开始，依次递增
**方式2：数组名.push(值)**
说明：数组名就是数组的名称，push是数组的方法，用来向数组的末尾添加元素
**方式3：数组名.unshift(值)**
说明：数组名就是数组的名称，unshift是数组的方法，用来向数组的开头添加元素
**方式4：数组名.splice(下标, 0, 值)**
说明：数组名就是数组的名称，splice是数组的方法，用来向数组的指定位置添加元素，下标是指定 位
置的下标，0表示不删除元素，值是要添加的元素
4.数组元素的长度
语法：数组名.length
说明：数组名就是数组的名称，length是数组的属性，用来获取数组的长度
数组名称.length - 1 用来获取数组中最后一个元素的下标
var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组
let arr2 = new Array("张三", "李四", "3", 5, 6, 7);
let arr3 = new Array(7);
let arr4 = new Array();
let arr1 = ["张三", "李四", "3", 5, 6, 7];
for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}
document.write(arr1[2]);
console.log(arr1, arr2, arr3, arr4);
带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) {
// 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...)
let a, b, c;
function add(a, b) {
if (a > b) {
console.log(a);
} else {
console.log(b);
}
}
add(4, 5);
DON
1.DOM---文档对象模型---DOcument object model
DOM---用来操作页面元素
2.DOM树---描述html标签元素的嵌套关系
3.DOM树基本操作方法
js获取元素对象的常用方式：
1. document.getElementById('id名')
1. 通过id名获取元素对象
2. id名是唯一的
3. 返回值是一个元素对象
2. document.querySelector('选择器')
1. 通过选择器获取元素对象
2. 选择器不是唯一的
3. 返回值是一个元素对象
3. document.querySelectorAll('选择器')
1. 通过选择器获取元素对象
2. 选择器不是唯一的
3. 返回值是一个伪数组
4. document.getElementsByTagName('标签名')
1. 通过标签名获取元素对象
2. 标签名不是唯一的
3. 返回值是一个伪数组
5. document.getElementsByClassName('类名')
1. 通过类名获取元素对象
2. 类名不是唯一的
3. 返回值是一个伪数组
DOM元素样式操作方式：
```
1.行内样式
语法：元素对象.style.样式名 = 值
2.className
语法：元素对象.className = '类名'
3.classList
语法:元素对象.classList.add('类名')---添加类名
元素对象.classList.remove('类名')---删除类名
元素对象.classList.toggle('类名')---切换类名
```
练习：定义一个函数模拟计算器功能，可以计算任意两个数四则运算的结果
<script>
function calculator(num1, num2, operator) {
if (typeof num1 !== 'number' || typeof num2 !== 'number')
return '输入的数据类型有误';
switch (operator) {
case '+':
return parseFloat((num1 + num2).toFixed(2));
case '-':
return num1 - num2;
case '*':
return parseFloat((num1 * num2).toFixed(2));
case '/':
if (num2 === 0) return '除数不能为0';
return num1 / num2;
default:
return '输入的运算符有误';
}
}
let total = calculator(1, 2, '*');
console.log(total);
</script>
事件
1.事件---通过js监听元素的行为
2.常见的事件：
2.1 鼠标事件
onclick--- 鼠标左键单击事件
ondblclick--- 鼠标左键双击事件
onmouseover--- 鼠标移入事件
onmouseout-- 鼠标移出事件
onmousemove--- 鼠标移动事件
onmousedown--- 鼠标按下事件
onmouseup--- 鼠标抬起事件
2.2 键盘事件
onkeydown--- 键盘按下事件
onkeyup--- 键盘抬起事件
onkeypress--- 键盘按下事件
2.3 表单事件
onfocus-- 获取焦点事件
onblur--- 失去焦点事件
onchange--- 内容改变事件
oninput---- 内容改变事件
onsubmit--- 提交事件
2.4 其他事件
onload--- 页面加载事件
BOM
1.DOM--顶层对象document
2.BOM--顶层对象window
3.常见BOM对象
window对象: JS最顶层对象
document对象: 文档对象
location对象: 浏览器当前URL信息
Navigator对象: 浏览器导航器
2. 2定时器分类
2.1 间隔限时器setInterval(回调函数，间隔时间ms)
2.2 延时计时器setTimeout(回调函数，间隔时间ms)*/
```
<body>
//计时器练习
手机号码： <input type="number" /> <button disabled>发送</button>
<script>
// 获取元素
let inputEle = document.querySelector("input");
let btn = document.querySelector("button");
let num = 60; //计数器
// input添加事件---input输入事件
inputEle.addEventListener("blur", function () {
// 如果输入框的值为空，按钮禁用，否则启用
if (this.value) {
btn.disabled = false; // 启用
btn.addEventListener("click", function () {
let t = setInterval(function () {
num--;
btn.innerText = num + "秒后重新发送";
if (num == 0) {
btn.innerText = "发送";
num = 60; //重置计数器
btn.disabled = false;
clearInterval(t); //清除定时器
}
}, 1000);
});
} else {
btn.disabled = true; // 禁用
}
});
</script>
</body>
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
