[TOC]
一、JavaScript快速入门
1.1 JavaScript介绍
- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。
- 脚本语言：不需要编译，就可以被浏览器直接解析执行了。
- 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！
- 1995 年， NetScape (网景)公司，开发的一门客户端脚本语言： LiveScript。后来，请来 SUN 公司的专家来进行修改，后命名为： JavaScript。
- 1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。
- 1997 年， ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准： ECMAScript，统一了所有客户端脚本语言的编码方式。
- JavaScript的实现包括以下3个部分：
- 核心（ECMAScript）：描述了JS的语法和基本对象。
- 文档对象模型 （DOM）：处理网页内容的方法和接口。
- 浏览器对象模型（BOM）：与浏览器交互的方法和接口。
1.2 快速入门
- 实现步骤
- 创建一个 HTML。
- 在
<body>标签后面编写一个<script>标签。 - 在
<script>标签中编写代码。 - 通过浏览器查看
- 具体实现
```html
<!DOCTYPE html>
- **内部方式引入** ```html <script> document.getElementById("btn").onclick=function () { alert("点我干嘛？"); } </script>- 外部方式引入
- 外部引入实现步骤
创建js文件
document.getElementById("btn").onclick=function () { alert("点我干嘛？"); }在html中引用外部js文件
<script src="js/my.js"></script>
注意
JavaScript 是一种客户端脚本语言。
- 组成部分
- ECMAScript、DOM、BOM
- 和 HTML 结合方式
内部方式：
<script></script>
外部方式：<script src=文件路径></script>二、JavaScript基本语法
2.1 注释
单行注释
// 注释的内容多行注释
/* 注释的内容 */2.2 输入输出语句
控制台输出
console.log("文本");- 按F12查看控制台输出
- 页面内容输出
document.write("文本");- 把内容写在body中(可以写html标签)
- 弹出警告框
alert("文本");
- 弹出确认框
confirm("文本")- 有返回值
- 点击确定，返回true
- 点击取消，返回false
- 弹出提示框
prompt("文本","可选默认值");- 有返回值
- 点击确定，返回输入的内容
- 点击取消，返回null ```html <!DOCTYPE html>
<a name="50a610d2"></a> ## 2.3 变量和常量 JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。 - **定义局部变量** - `let 变量名 = 值;` - let是ECMAScript6后新增，如果定义是报错，将js语言版本改为ECMAScript6即可<br /> ```javascript //1.定义局部变量 let name = "张三"; let age = 23; document.write(name + "," + age +"<br>");- 定义全局变量
(var) 变量名 = 值;```javascript //2.定义全局变量 { let l1 = “aa”; l2 = “bb”; } //document.write(l1); document.write(l2 + “
“);
//变量没有赋值,有默认undefined var v3; document.write(v3);//undefined
- **定义常量** - `const 常量名 = 值;` ```javascript //3.定义常量 const PI = 3.1415926; document.write(PI); //3.14159262.4 原始数据类型和typeof方法
原始数据类型 | 数据类型 | 说明 | | —- | —- | | boolean | 布尔类型， true或false | | null | 声明null值的特殊关键字 | | undefined | 代表变量未定义 | | number | 整数或浮点数 | | string | 字符串 | | bigint | 大整数，例如： let num = 10n; |
typeof
用于判断变量的数据类型
<script> let l1 = true; document.write(typeof(l1) + "<br>"); // boolean let l2 = null; document.write(typeof(l2) + "<br>"); // object js原始的一个错误 let l3; document.write(typeof(l3) + "<br>"); // undefined let l4 = 10; document.write(typeof(l4) + "<br>"); // number let l5 = "hello"; document.write(typeof(l5) + "<br>"); // string let l6 = 100n; document.write(typeof(l6) + "<br>"); // bigint let l7 = '你好'; document.write(typeof(l7) + "<br>"); // string let l8 = 8.8; document.write(typeof(l8) + "<br>"); // number </script>2.5 运算符
算数运算符
| 运算符 | 说明 | | —- | —- | | + | 加法运算 | | - | 减法运算 | | * | 乘法运算 | | / | 除法运算 | | % | 取余数 | | ++ | 自增 | | — | 自减 |赋值运算符
| 运算符 | 说明 | | —- | —- | | = | 将等号右边的值赋值给等号左边的变量 | | += | 相加后赋值 | | -= | 相减后赋值 | | *= | 相乘后赋值 | | /= | 相除后赋值 | | %= | 取余数后赋值 |比较运算符
===用于比较数据类型和值是否相等 | 运算符 | 说明 | | —- | —- | | == | 判断值是否相等 | | === | 判断数据类型和值是否相等 | | > | 大于 | | >= | 大于等于 | | < | 小于 | | <= | 小于等于 | | != | 不等于 |
逻辑运算符
| 运算符 | 说明 | | —- | —- | | && | 逻辑与，并且的功能 | | || | 逻辑或，或者的功能 | | ! | 取反 |三元运算符
- 三元运算符格式
(比较表达式) ? 表达式1 : 表达式2; 执行流程
如果比较表达式为true，则取表达式1
如果比较表达式为false，则取表达式2<script> let num = "10"; document.write(num + 5 + "<br>"); // 105 document.write(num + "5" + "<br>"); // 105 document.write(num - 5 + "<br>"); // 5 document.write(num * 5 + "<br>"); // 50 字符串类型数字进行运算，会自动类型转换 document.write(num - "a" + "<br>"); // NaN not number 无效数字 let num2 = 10; document.write(num == num2); // true == 只比较值是否相同 document.write(num === num2); // false === 比较数据类型和值是否相同 </script>2.6 流程控制和循环语句
- 三元运算符格式
if 语句
```javascript //if语句 let month = 3; if(month >= 3 && month <= 5) { document.write(“春季”); }else if(month >= 6 && month <= 8) { document.write(“夏季”); }else if(month >= 9 && month <= 11) { document.write(“秋季”); }else if(month == 12 || month == 1 || month == 2) { document.write(“冬季”); }else { document.write(“月份有误”); }
document.write(“
“);- **switch 语句** ```javascript //switch语句 switch(month){ case 3: case 4: case 5: document.write("春季"); break; case 6: case 7: case 8: document.write("夏季"); break; case 9: case 10: case 11: document.write("秋季"); break; case 12: case 1: case 2: document.write("冬季"); break; default: document.write("月份有误"); break; } document.write("<br>");**for 循环**for循环
//for循环 for(let i = 1; i <= 5; i++) { document.write(i + "<br>"); }while 循环
//while循环 let n = 6; while(n <= 10) { document.write(n + "<br>"); n++; }2.7 数组
js中的数组,就相当于java中的集合，集合的泛型是Object类型。
- 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。
- 数组的遍历支持普通for循环，也支持增强for循环
- 定义格式
let 数组名 = [元素1,元素2,…];
- 索引范围
- 从 0 开始，最大到数组长度-1
- 数组长度
数组名.length
数组高级运算符
…函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果
定义格式
- 返回值直接return，不需要定义数据类型
- 参数列表为this时，代表当前元素（标签）
function 方法名(参数列表) { 方法体; return 返回值; }
可变参数
function 方法名(…参数名) { 方法体; return 返回值; }匿名函数
- 第一种使用方式：把匿名函数赋值给了一个变量,变量名就相当于函数的名字
- 第二种使用方式：作为事件的响应函数
- 第三种使用方式：作为其他函数的参数(定时器)
function(参数列表) { 方法体; }
代码演示
<script> //无参无返回值的方法 function println(){ document.write("hello js" + "<br>"); } //调用方法 println(); //有参有返回值的方法 function getSum(num1,num2){ return num1 + num2; } //调用方法 let result = getSum(10,20); document.write(result + "<br>"); //可变参数 对n个数字进行求和 function getSum(...params) { let sum = 0; for(let i = 0; i < params.length; i++) { sum += params[i]; } return sum; } //调用方法 let sum = getSum(10,20,30); document.write(sum + "<br>"); //匿名函数:没有名字的函数 //匿名函数的第一种使用方式:把匿名函数赋值给了一个变量,变量名就相当于函数的名字 let fun = function(){ document.write("hello"); } fun(); //匿名函数的第二种使用方式:作为事件的响应函数 //匿名函数的第三种使用方式:作为其他函数的参数(定时器) </script>2.9 小结
注释：单行// 多行/**/
- 输入输出语句：prompt()、alert()、console.log()、document.write()
- 变量和常量：let、const
- 数据类型：boolean、null、undefined、number、string、bigint
- typeof 关键字：用于判断变量的数据类型
- 运算符：算数、赋值、逻辑、比较、三元运算符
- 流程控制和循环语句：if、switch、for、while
- 数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
-
三、JavaScript DOM(重点)
3.1 DOM介绍
DOM(Document Object Model)文档对象模型。
- 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
我们可以使用dom对象
具体方法
- 通过文档对象操作 | 方法名 | 说明 | | —- | —- | | getElementById(id属性值) | 根据id获得一个元素 | | getElementsByTagName(标签名称) | 根据标签名称获得多个元素 | | getElementsByName(name属性值) | 根据name属性获得多个元素 | | getElementsByClassName(class属性值) | 根据class属性获得多个元素 | | 子元素对象.parentElement属性 | 获取当前元素的父元素 |
代码实现
<!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> <div id="div1">div1</div> <div id="div2">div2</div> <div class="cls">div3</div> <div class="cls">div4</div> <input type="text" name="username"/> </body> <script> //1. getElementById() 根据id属性值获取元素对象 let div1 = document.getElementById("div1"); //alert(div1); //console.log(div1);//<div id="div1"> //2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组 let divs = document.getElementsByTagName("div"); //alert(divs.length); //遍历数组,获取每一个元素 for(let d of divs){ console.log(d); /* <div id="div1"> <div id="div2"> <div class="cls"> <div class="cls"> */ } //3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组 let cls = document.getElementsByClassName("cls"); //alert(cls.length); //4. getElementsByName() 根据name属性值获取元素对象们，返回数组 let username = document.getElementsByName("username"); //alert(username.length); //5. 子元素对象.parentElement属性 获取当前元素的父元素 let body = div1.parentElement; //alert(body); </script> </html>3.3 Element元素的增删改操作
具体方法
- 通过文档对象操作 | 方法名 | 说明 | | —- | —- | | createElement(标签名) | 创建一个新元素 | | createTextNode(标签名) | 创建一个文本元素 | | appendChild(子元素) | 将指定子元素添加到父元素中 | | removeChild(子元素) | 用父元素删除指定子元素 | | replaceChild(新元素, 旧元素) | 用新元素替换子元素 |
代码实现
```html <!DOCTYPE html><a name="78b0b781"></a> ## 3.4 Attribute属性的操作 - **具体方法** - 通过元素对象操作 - 当href的属性值为`#`时，指不跳转但刷新页面，为`JavaSript:void(0);`时，指不跳转也不刷新页面 | 方法名 | 说明 | | --- | --- | | value | 获取文本框中的值 | | setAtrribute(属性名, 属性值) | 设置属性 | | getAtrribute(属性名) | 根据属性名获取属性值 | | removeAtrribute(属性名) | 根据属性名移除指定的属性 | | style = 属性 | 为元素添加样式 | | className = 属性 | 为元素添加指定选择器样式 | - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性的操作</title> <style> .aColor{ color: blue; } </style> </head> <body> <a>点我呀</a> </body> <script> //1. setAttribute() 添加属性 let a = document.getElementsByTagName("a")[0]; a.setAttribute("href","https://www.baidu.com"); //2. getAttribute() 获取属性 let value = a.getAttribute("href"); //alert(value); //3. removeAttribute() 删除属性 //a.removeAttribute("href"); //4. style属性 添加样式 //a.style.color = "red"; //5. className属性 添加指定样式 a.className = "aColor"; </script> </html>3.5 Text文本的操作
具体方法
- 通过元素对象操作 | 属性名 | 说明 | | —- | —- | | innerText | 获取或添加文本内容，不解析标签（仅设置文本） | | innerHTML | 获取或添加文本内容，解析标签（设置标签体，不包含本身） | | outerHTML | 获取或设置整个标签，标签自杀，解析标签（设置标签体，包含对象本身标签） |
范围对比
代码实现
```html <!DOCTYPE html>我是div```html <!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> <select id="s"> <option>---请选择---</option> <option>北京</option> <option>上海</option> <option>广州</option> </select> </body> <script> let select = document.getElementById("s"); //获取标签体,并+=新的标签体 select.innerHTML += "<option>合肥</option>"; </script> </html>3.6 DOM小结
- DOM(Document Object Model)：文档对象模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- 元素的操作
- getElementById()
- getElementsByTagName()
- getElementsByName()
- getElementsByClassName()
- 子元素对象.parentElement属性
- createElement()
- appendChild()
- removeChild()
- replaceChild()
- 属性的操作
- setAtrribute()
- getAtrribute()
- removeAtrribute()
- style属性
- className属性
文本的操作
常用的事件
| 事件名 | 说明 | | —- | —- | | onload | 某个页面或图像被完成加载 | | onsubmit | 当表单提交时触发该事件 | | onclick | 鼠标单击事件 | | ondblclick | 鼠标双击事件 | | onblur | 元素失去焦点 | | onfocus | 元素获得焦点 | | onchange | 用户改变域的内容 |了解的事件
| 事件名 | 说明 | | —- | —- | | onkeydown | 某个键盘的键被按下 | | onkeypress | 某个键盘的键被按下或按住 | | onkeyup | 某个键盘的键被松开 | | onmousedown | 某个鼠标按键被按下 | | onmouseup | 某个鼠标按键被松开 | | onmouseover | 鼠标被移到某元素之上 | | onmouseout | 鼠标从某元素移开 |
4.2 事件操作
绑定事件
方式一
- 通过标签中的事件属性进行绑定。
<button id="btn" onclick="执行的功能"></button>
- 通过标签中的事件属性进行绑定。
方式二
- 通过 DOM 元素属性绑定。
document.getElementById("btn").onclick = 执行的功能
- 通过 DOM 元素属性绑定。
代码演示
<!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> <img id="img" src="img/01.png"/> <br> <!-- <button id="up" onclick="up()">上一张</button> <button id="down" onclick="down()">下一张</button> --> <button id="up">上一张</button> <button id="down">下一张</button> </body> <script> //显示第一张图片的方法 function up(){ let img = document.getElementById("img"); img.setAttribute("src","img/01.png"); } //显示第二张图片的方法 function down(){ let img = document.getElementById("img"); img.setAttribute("src","img/02.png"); } //为上一张按钮绑定单击事件 let upBtn = document.getElementById("up"); upBtn.onclick = up; //为下一张按钮绑定单击事件 let downBtn = document.getElementById("down"); downBtn.onclick = down; //获取id是img的图片,使用匿名函数给图片添加一个鼠标移入事件 document.getElementById("img").onmouseover= function () { alert("鬼子又来抢劫花姑娘了!"); } </script> </html>4.3 事件小结
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
- 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
绑定事件方式
在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。
5.2 添加功能介绍
5.3 添加功能的分析
- 为添加按钮绑定单击事件。
- 创建 tr 元素。
- 创建 4 个 td 元素。
- 将 td 添加到 tr 中。
- 获取文本框输入的内容。
- 将获取的文本内容添加到对应的td元素中。
- 创建 a 元素。
- 将删除的文本内容添加到a元素中。
- 为a元素添加JavaScript:void(0);的href属性。
- 为a元素添加drop(this)的onclick属性。
- 将 a 元素添加到对应的 td 中。
-
5.4 添加功能的实现
```html <!DOCTYPE html>
<table id="tb"> <caption>学生信息表</caption> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td>男</td> <!-- href="JavaScript:void(0);" 点击超链接标签,不刷新当前html页面 --> <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td> </tr> <tr> <td>李四</td> <td>24</td> <td>男</td> <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td> </tr> </table><a name="fc51d39c"></a> ## 5.5 删除功能的分析 - **删除功能介绍**  - **删除功能分析** - 第一种方式 1. 为每个删除超链接添加单击事件属性。 1. 定义删除的方法。 1. 获取 table 元素。 1. 获取 tr 元素。 1. 通过 table 删除 tr。 - 第二种方式 1. 通过设置标签体杀死标签 <a name="737af717"></a> ## 5.6 删除功能的实现 ```javascript //二、删除的功能 //第一种方式 //1.为每个删除超链接标签添加单击事件的属性 //2.定义删除的方法 function drop(obj) { //3.获取table元素 //let table = obj.parentElement.parentElement.parentElement; //4.获取tr元素 //let tr = obj.parentElement.parentElement; //5.通过table删除tr //table.removeChild(tr); //第二种方式 //1.通过设置标签体杀死标签 obj.parentElement.parentElement.outerHTML=""; }六、JavaScript面向对象
6.1 面向对象介绍
- 在 Java 中我们学习过面向对象，核心思想是万物皆对象。
-
6.2 类的定义和使用
类的定义
class 类名{ constructor(变量列表){ 变量赋值； } 方法名(参数列表){ 方法体; return 返回值; } }使用格式
let 对象名 = new 类名(实际变量值)； 对象名.变量名 对象名.方法名();代码实现
```html <!DOCTYPE html>
<a name="3f270219"></a> ## 6.3 字面量类的定义和使用(重点) - **定义格式** ```javascript let 对象名 = { 变量名 : 变量值, 变量名 : 变量值, ... 方法名 : function(参数列表){ 方法体; return 返回值; }, ... }使用格式
对象名.变量名 对象名.方法名();代码实现
```html <!DOCTYPE html>
<a name="91767ff1"></a> ## 6.4 继承 - 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。 - 好处：提高代码的复用性和可维护性 - 继承关键字：extends - 顶级父类：Object ```html <!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> </body> <script> //定义Person类 class Person{ //构造方法 constructor(name,age){ this.name = name; this.age = age; } //eat方法 eat(){ document.write("吃饭..."); } } //定义Worker类继承Person class Worker extends Person{ constructor(name,age,salary){ super(name,age); this.salary = salary; } show(){ document.write(this.name + "," + this.age + "," + this.salary + "<br>"); } } //使用Worker let w = new Worker("张三",23,10000); w.show(); w.eat(); </script> </html>6.5 小结
- 面向对象
把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。 - 类的定义
class 类{}
字面量定义 - 类的使用
let 对象名 = new 类名();
对象名.变量名
对象名.方法名(); 继承
让类和类产生子父类关系，提高代码的复用性和维护性。
子类 extends 父类
Object 顶级父类七、JavaScript内置对象
7.1 Number
方法介绍
- NaN与其他数值进行比较的结果总是不相等的，包括它自身在内。 | 方法名 | 说明 | | —- | —- | | parseFloat() | 将传入的字符串浮点数转为浮点数 | | parseInt() | 将传入的字符串整数转为整数 | | isNaN() | 判断传入的值是否是NaN（NaN是算术运算不是数字的结果） |
代码实现 ```html <!DOCTYPE html>
<a name="9374bf44"></a> ## 7.2 Math - **方法介绍** | 方法名 | 说明 | | --- | --- | | ceil(x) | 向上取整 | | floor(x) | 向下取整 | | round(x) | 把数四舍五入为最接近的整数 | | random() | 随机数,返回的是 0.0-1.0 之间范围(含头不含尾) | | pow(x,y) | 幂运算 x 的 y 次方 | - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Math</title> </head> <body> </body> <script> //1. ceil(x) 向上取整 document.write(Math.ceil(4.4) + "<br>"); // 5 //2. floor(x) 向下取整 document.write(Math.floor(4.4) + "<br>"); // 4 //3. round(x) 把数四舍五入为最接近的整数 document.write(Math.round(4.1) + "<br>"); // 4 document.write(Math.round(4.6) + "<br>"); // 5 //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾) document.write(Math.random() + "<br>"); // 随机数 //5. pow(x,y) 幂运算 x的y次方 document.write(Math.pow(2,3) + "<br>"); // 8 </script> </html>7.3 Date
方法说明
构造方法
| 构造方法 | 说明 | | —- | —- | | Date() | 根据当前时间创建对象 | | Date(value) | 根据指定毫秒值创建对象 | | Date(year,month,[day,hours,minutes,seconds ,milliseconds]) | 根据指定字段创建对象(月份是0~11) |成员方法
| 成员方法 | 说明 | | —- | —- | | getFullYear() | 获取年份 | | getMonth() | 获取月份 | | getDate() | 获取天数 | | getHours() | 获取小时 | | getMinutes() | 获取分钟 | | getSeconds() | 获取秒数 | | getTime() | 返回据1970年1月1日至今的毫秒数 | | toLocaleString() | 返回本地日期格式的字符串 |
代码实现 ```html <!DOCTYPE html>
<a name="84bec905"></a> ## 7.4 String - **方法说明** - 构造方法 | 构造方法 | 说明 | | --- | --- | | String(value) | 根据指定字符串创建对象 | | let s = "字符串" | 直接赋值 | - 成员方法 | 成员方法 | 说明 | | --- | --- | | length属性 | 获取字符串长度 | | charAt(index) | 获取指定索引处的字符 | | indexOf(value) | 从前往后搜索指定字符串，返回第一个出现的索引位置,找不到为-1 | | lastIndexOf(value) | 从后往前搜索指定字符串，返回第一个出现的索引位置,找不到为-1 | | substr(strat) | 从起始索引开始截取字符串,到字符串的末尾 | | substr(start,length) | 从起始索引号提取字符串中指定数目的字符 | | substring(start,end) | 根据指定索引范围截取字符串 (含头不含尾) | | split(value) | 根据指定规则切割字符串，返回数组 | | replace(old,new) | 使用新字符串替换老字符串 | - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>String</title> </head> <body> </body> </html> <script> //1. 构造方法创建字符串对象 let s1 = new String("hello"); document.write(s1 + "<br>"); //2. 直接赋值 let s2 = "hello"; document.write(s2 + "<br>"); //属性 //1. length 获取字符串的长度 document.write(s2.length + "<br>"); //成员方法 //1. charAt(index) 获取指定索引处的字符 document.write(s2.charAt(1) + "<br>"); document.write("---------------------<br>"); //遍历字符串 for(let i=0; i<s2.length; i++){ document.write(s2.charAt(i) + "<br>"); } document.write("---------------------<br>"); //2. indexOf(value) 获取指定字符串出现的索引位置 document.write(s2.indexOf("l") + "<br>");//2 //3. lastIndexOf() 从后向前搜索字符串。 document.write(s2.lastIndexOf("l") + "<br>");//3 document.write(s2.indexOf("e") + "<br>");//1 document.write(s2.lastIndexOf("e") + "<br>");//1 //4.substr("起始索引") 从起始索引开始截取字符串,到字符串的末尾 //需求:获取"hello"中的"llo" document.write(s2.substr(2) + "<br>"); //5.substr("起始索引","字符个数") 从起始索引号提取字符串中指定数目的字符。 //需求:获取"hello"中的"ell" document.write(s2.substr(1,3) + "<br>"); //6. substring(start,end) 根据指定索引范围截取字符串(含头不含尾) document.write(s2.substring(2,4) + "<br>"); document.write("---------------------<br>"); document.write("---------------------<br>"); //7. split(value) 根据指定规则切割字符串，返回数组 let s3 = "张三,23,男"; let arr = s3.split(","); for(let i = 0; i < arr.length; i++) { document.write(arr[i] + "<br>"); } //8. replace(old,new) 使用新字符串替换老字符串 let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。"; let s5 = s4.replace("你妹的","***"); document.write(s5 + "<br>"); </script>7.5 RegExp
- 正则表达式：是一种对字符串进行匹配的规则。
- 用于对字符串进行校验,判断字符串是否匹配正则表达式的规则
方法说明
构造方法
| 构造方法 | 说明 | | —- | —- | | RegExp(规则) | 根据指定规则创建对象 | | let reg = /^规则$/ | 直接赋值 |成员方法
| 成员方法 | 说明 | | —- | —- | | test(匹配的字符串) | 根据指定规则验证字符串是否符合 |规则
| 表达式 | 说明 | | —- | —- | | [a] | 只能是a | | [abc] | 只能是abc中的某一个 | | [1] | 只能是1 | | [123] | 只能是123中的某一个 | | [a-z] | 必须是a到z中的某一个 | | [^a-z] | 不可以是小写字母 | | [A-Z] | 必须是A到Z中的某一个 | | [0-9] 或[\d] | 必须是0到9中的某一个 | | [^0-9] 或[\D] | 不可以是数字 | | [a-zA-Z0-9]或[\w] | 必须是字母、数字、下划线中的某一个 | | [^a-zA-Z0-9]或[\W] | 不可以是字母、数字、下划线 | | . | 代表匹配任意字符， 若只是想代表普通数据. 需要使用转义字符来表示. | | X | X这个字符可以出现任意次，例如[0-9] | | X? | X这个字符可以出现零次或者一次，例如[0-9]? | | X+ | X这个字符可以出现一次或者多次，例如[0-9]+ | | X{m} | X这个字符出现次数正好m次 | | X{m, } | X这个字符出现次数至少m次 | | X{m, n} | X这个字符出现次数至少m次,最多n次 | | (X)+ | ()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次 | | ^X | ^匹配开头 | | X$ | $匹配结尾 |
代码实现 ```html <!DOCTYPE html>
<a name="361b7619"></a> ## 7.6 Array - **成员方法** | 成员方法 | 说明 | | --- | --- | | push(元素) | 添加元素到数组的末尾 | | unshift(元素) | 添加元素到数组的头部 | | pop() | 删除数组末尾的元素 | | shift() | 删除数组头部的元素 | | includes(元素) | 判断数组是否包含给定的值 | | reverse() | 反转数组中的元素 | | sort() | 对数组元素进行排序，默认升序，可将匿名函数的规则作为参数传入，实现升序/降序 | - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Array</title> </head> <body> </body> <script> let arr = [1,2,3,4,5]; //1. push(元素) 添加元素到数组的末尾 arr.push(6); document.write(arr + "<br>"); //2. unshift(元素) 向数组的开头添加一个或更多元素，并返回新的长度。 //arr.unshift("我是头"); //document.write(arr + "<br>"); //3. pop() 删除数组末尾的元素 arr.pop(); document.write(arr + "<br>"); //4. shift() 删除数组最前面的元素 arr.shift(); document.write(arr + "<br>"); //5. includes(元素) 判断数组中是否包含指定的元素 document.write(arr.includes(2) + "<br>"); //6. reverse() 反转数组元素 arr.reverse(); document.write(arr + "<br>"); //7. sort() 对数组元素排序 arr.sort(); document.write(arr + "<br>"); let arr2 = [3,2,1,5,4]; //sort(匿名函数) 对数组元素排序 arr2.sort(function (a,b) { return a-b;//升序排序 }); document.write(arr2 + "<br>"); arr2.sort(function (a,b) { return b-a;//降序排序 }); document.write(arr2 + "<br>"); </script> </html>7.7 Set
- JavaScript 中的 Set 集合，元素唯一，存取顺序一致。
- 支持增强for遍历。
构造方法
| 构造方法 | 说明 | | —- | —- | | Set() | 创建Set集合对象 |成员方法 | 成员方法 | 说明 | | —- | —- | | add(元素) | 向集合中添加元素 | | size属性 | 获取集合长度 | | keys() | 获取迭代器对象 | | delete(元素) | 删除指定元素 |
代码实现 ```html <!DOCTYPE html>
<a name="7775e30a"></a> ## 7.8 Map - JavaScript 中的 Map 集合，key 唯一，存取顺序一致。 - 支持增强for遍历。 - **构造方法** | 构造方法 | 说明 | | --- | --- | | Map() | 创建Map集合对象 | - **成员方法** | 成员方法 | 说明 | | --- | --- | | set(key,value) | 向集合中添加元素，key相同时更新value | | size属性 | 获取集合长度 | | get(key) | 根据key获取value | | entries() | 获取迭代器对象 | | delete(key) | 根据key删除键值对 | - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Map</title> </head> <body> </body> <script> // Map() 创建Map集合对象 let map = new Map(); // set(key,value) 添加元素 map.set("张三",23); map.set("李四",24); map.set("李四",25); // size属性 获取集合的长度 document.write(map.size + "<br>"); // get(key) 根据key获取value document.write(map.get("李四") + "<br>"); // entries() 获取迭代器对象 let et = map.entries(); for(let i = 0; i < map.size; i++){ document.write(et.next().value + "<br>"); } // delete(key) 根据key删除键值对 document.write(map.delete("李四") + "<br>"); let et2 = map.entries(); for(let i = 0; i < map.size; i++){ document.write(et2.next().value + "<br>"); } </script> </html>7.9 Json(重点)
- JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
- 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。
语法格式
{ "k1":obj,"k2": [o1,o2, {"k3":o3} ] }一定要看外层是{对象}还是[数组][ o1,o2, {"k":v,"k2": [03,04] } ]| 类型 | 语法 | 说明 | | —- | —- | —- | | 对象类型 | {}name:value,name:value,… | name是字符串类型， value可以是任意类型 | | 数组/集合类型 | []value,value,value,… | 其中value是任意类型 | | 混合类型 | =={==name: [{name:value,…},{name:value,…}] } | 对象格式和数组格式可以互相嵌套 |方法说明
| 成员方法 | 说明 | | —- | —- | | stringify(对象) | 将指定对象转换为json格式字符串 | | parse(字符串) | 将指定json格式字符串解析成对象 |代码实现 ```html <!DOCTYPE html>
<a name="36a9d8c8"></a> ## 7.10 小结 - 内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型。 - Number Math Date String RegExp Array Set Map JSON。 <a name="6f10584f"></a> # 八、JavaScript BOM - BOM(Browser Object Model)：浏览器对象模型。 - **BOM和DOM的关系** - DOM 是为了操作文档出现的 API，DOM对象最根本的是document（实际上是window.document）。 - BOM 是为了操作浏览器出现的 API，BOM对象最根本的是window。 - BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作 - 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。 - 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作： - window：窗口对象 - location：地址栏对象 - navigator：浏览器对象 - history：当前窗口历史记录对象 - screen：显示器屏幕对象  <a name="1340d39d"></a> ## 8.1 window窗口对象 - **定时器** - 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。 - clearTimeout(标识)：取消一次性定时器。 - 唯一标识 setInterval(功能，毫秒值)：设置循环定时器。 - clearInterval(标识)：取消循环定时器。 - **加载事件** - window.onload：在页面加载完毕后触发此事件的功能。 - **代码实现** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window窗口对象</title> <script> //加载事件 window.onload = function(){ let div = document.getElementById("div"); alert(div); } </script> </head> <body> <div id="div">dddd</div> </body> <!-- <script> //一、定时器 function fun(){ alert("该起床了！"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //取消一次性定时器 //clearTimeout(d1); //设置循环定时器 //let d2 = setInterval("fun()",3000); //取消循环定时器 //clearInterval(d2); //加载事件 let div = document.getElementById("div"); alert(div); </script> --> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window窗口对象</title> </head> <body> <button id="but">警察拆除了炸弹</button> </body> <script> //一、定时器 function fun(){ alert("该起床了！"); } //设置一次性定时器 //let d1 = setTimeout("fun()",3000); //let d1 = setTimeout(fun,3000); //匿名函数 let d1 = setTimeout(function () { alert("c4爆炸了!") },3000); //获取id是d1的按钮,给按钮添加鼠标点击事件 document.getElementById("but").onclick = function () { clearTimeout(d1); } </script> </html>8.2 location地址栏对象
- href 属性
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>location地址栏对象</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> 注册成功！<span id="time">5</span>秒之后自动跳转到首页... </p> </body> <script> //1.定义方法。改变秒数，跳转页面 let num = 5; function showTime() { num--; if(num <= 0) { //跳转首页 location.href = "index.html"; } let span = document.getElementById("time"); span.innerHTML = num; } //2.设置循环定时器，每1秒钟执行showTime方法 setInterval("showTime()",1000); </script> </html>8.3 小结
BOM(Browser Object Model)：浏览器对象模型。
- 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作：
- window：窗口对象
- location：地址栏对象
- navigator：浏览器对象
- history：当前窗口历史记录对象
- Screen：显示器屏幕对象
- window 窗口对象
- setTimeout()、clearTimeout()：一次性定时器
- setInterval()、clearInterval()：循环定时器
- onload 事件：页面加载完毕触发执行功能
location地址栏对象
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
| 属性 | 描述 | | —- | —- | | length | 返回存储对象中包含多少条数据。 |
存储对象方法
方法 描述 key(n) 返回存储对象中第 n 个键的名称 getItem(keyname) 返回指定键的值 setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值。 removeItem(keyname) 移除键 clear() 清除存储对象中所有的键 Web 存储 API
属性 描述 window.localStorage 在浏览器中存储 key/value 对。没有过期时间。 window.sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 - DOM(Document Object Model)：文档对象模型
- 外部方式引入
若有收获，就点个赞吧
0 人点赞
