五、BOM
BOM:Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如:我现在想将浏览器地址栏的地址改为 `https://www.itheima.com` 就可以通过使用 BOM 中定义的 `Location` 对象的 `href` 属性,代码: `location.href = "https://itheima.com";`
BOM 中包含了如下对象:
* Window:浏览器窗口对象
* Navigator:浏览器对象
* Screen:屏幕对象
* History:历史记录对象
* Location:地址栏对象
`Window`、`History`、`Location` 对象用的比较多
5.1 Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
5.1.1 获取window对象
该对象不需要创建直接使用 `window`,其中 `window. ` 可以省略。比如我们之前使用的 `alert()` 函数,其实就是 `window` 对象的函数,在调用是可以写成如下两种
* 显式使用 `window` 对象调用
window.alert("abc");
* 隐式调用
alert("abc")
5.1.2 window对象属性
`window` 对象提供了用于获取其他 BOM 组成对象的属性。也就是说,我们想使用 `Location` 对象的话,就可以使用 `window` 对象获取;写成 `window.location`,而 `window.` 可以省略,简化写成 `location` 来获取 `Location` 对象。
5.1.3 window对象函数
`window` 对象提供了很多函数供我们使用,而很多都不常用;下面给大家列举了一些比较常用的函数
> `setTimeout(function,毫秒值)` : 在一定的时间间隔后执行一个function,只执行一次
> `setInterval(function,毫秒值)` :在一定的时间间隔后执行一个function,循环执行
**confirm代码演示:**
// confirm(),点击确定按钮,返回true,点击取消按钮,返回false
var flag = confirm("确认删除?");
alert(flag);
下图是 `confirm()` 函数的效果。当我们点击 `确定` 按钮,`flag` 变量值记录的就是 `true` ;当我们点击 `取消` 按钮,`flag` 变量值记录的就是 `false`。
而以后我们在页面删除数据时候如下图每一条数据后都有 `删除` 按钮,有可能是用户的一些误操作,所以对于删除操作需要用户进行再次确认,此时就需要用到 `confirm()` 函数。
**定时器代码演示:**
setTimeout(function (){
alert("hehe");
},3000);
当我们打开浏览器,3秒后才会弹框输出 `hehe`,并且只会弹出一次。
setInterval(function (){
alert("hehe");
},2000);
当我们打开浏览器,每隔2秒都会弹框输出 `hehe`。
5.2 History对象
History 对象是 JavaScript 对历史记录进行封装的对象。
* History 对象的获取
使用 window.history获取,其中window. 可以省略
* History 对象的函数
5.3 Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象,跳转到任意页面。
5.3.1 获取Location对象
使用 window.location获取,其中window. 可以省略
window.location.方法();
location.方法();
5.3.2 Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 `href`
**代码演示:**
alert("要跳转了");
location.href = "https://www.baidu.com";
在浏览器首先会弹框显示 `要跳转了`,当我们点击了 `确定` 就会跳转到 百度 的首页。
六、DOM
6.1 概述
DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生,之前在学习 XML 就接触过,只不过 XML 文档中的标签需要我们写代码解析,而 HTML 文档是浏览器解析。封装的对象分为
* Document:整个文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
**作用:**
JavaScript 通过 DOM, 就能够对 HTML进行操作了
* 改变 HTML 元素的内容
* 改变 HTML 元素的样式(CSS)
* 对 HTML DOM 事件作出反应
* 添加和删除 HTML 元素
**DOM相关概念:**
DOM 是 W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分:
1. 核心 DOM:针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
* Document:整个文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
2. XML DOM: 针对 XML 文档的标准模型
3. HTML DOM: 针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上,对 HTML 中的每个标签都封装成了不同的对象
* 例如:`<img>` 标签在浏览器加载到内存中时会被封装成 `Image` 对象,同时该对象也是 `Element` 对象。
* 例如:`<input type='button'>` 标签在浏览器加载到内存中时会被封装成 `Button` 对象,同时该对象也是 `Element` 对象。
6.2 获取 Element对象
HTML 中的 Element 对象可以通过 `Document` 对象获取,而 `Document` 对象是通过 `window` 对象获取。
`Document` 对象中提供了以下获取 `Element` 元素对象的函数
* `getElementById()`:根据id属性值获取,返回单个Element对象
* `getElementsByTagName()`:根据标签名称获取,返回Element对象数组
* `getElementsByName()`:根据name属性值获取,返回Element对象数组
* `getElementsByClassName()`:根据class属性值获取,返回Element对象数组
**代码演示:**
下面有提前准备好的页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">教育</div> <br>
<div class="cls">程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//在此处书写js代码
</script>
</body>
</html>
1. 根据 `id` 属性值获取上面的 `img` 元素对象,返回单个对象
var img = document.getElementById("light");
alert(img);
从弹框输出的内容,也可以看出是一个图片元素对象。
2. 根据标签名称获取所有的 `div` 元素对
var divs = document.getElementsByTagName("div");// 返回一个数组,数组中存储的是 div 元素对象
// alert(divs.length); //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
3. 获取所有的满足 `name = 'hobby'` 条件的元素对象
//3. getElementsByName:根据name属性值获取,返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}
4. 获取所有的满足 `class='cls'` 条件的元素对
//4. getElementsByClassName:根据class属性值获取,返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
七、事件监听
HTML 事件是发生在 HTML 元素上的“事情”。比如:页面上的 `按钮被点击`、`鼠标移动到元素之上`、`按下键盘按键` 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。例如下图当我们点击 `开灯` 按钮,就需要通过 js 代码实现替换图片
再比如下图输入框,当我们输入了用户名 `光标离开` 输入框,就需要通过 js 代码对输入的内容进行校验,没通过校验就在输入框后提示 `用户名格式有误!`
7.1 事件绑定
JavaScript 提供了两种事件绑定方式:
* 方式一:通过 HTML标签中的事件属性进行绑定
如下面代码,有一个按钮元素,我们是在该标签上定义 `事件属性`,在事件属性中绑定函数。`onclick` 就是 `单击事件` 的事件属性。`οnclick='on()'` 表示该点击事件绑定了一个名为 `on()` 的函数
```html
<input type="button" οnclick='on()’>
```
下面是点击事件绑定的 `on()` 函数
```js
function on(){
alert("我被点了");
}
```
* 方式二:通过 DOM 元素属性绑定
如下面代码是按钮标签,在该标签上我们并没有使用 `事件属性`,绑定事件的操作需要在 js 代码中实现
```html
<input type="button" id="btn">
```
下面 js 代码是获取了 `id='btn'` 的元素对象,然后将 `onclick` 作为该对象的属性,并且绑定匿名函数。该函数是在事件触发后自动执行
```js
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
```
**代码演示:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--方式1:在下面input标签上添加 onclick 属性,并绑定 on() 函数-->
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<script>
function on(){
alert("我被点了");
}
//方式2:获取 id="btn" 元素对象,通过调用 onclick 属性 绑定点击事件
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
</script>
</body>
</html>
7.2 常见事件
上面案例中使用到了 `onclick` 事件属性,那都有哪些事件属性供我们使用呢?下面就给大家列举一些比较常用的事件属性
事件属性名 | 说明 |
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
*Event表示事件对象
如下是带有表单的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="register" action="#" >
<input type="text" name="username" />
<input type="submit" value="提交">
</form>
<script>
</script>
</body>
</html>
如上代码的表单,当我们点击 `提交` 按钮后,表单就会提交,此处默认使用的是 `GET` 提交方式,会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能,js 代码实现如下:
1. 获取 `form` 表单元素对象。
2. 给 `form` 表单元素对象绑定 `onsubmit` 事件,并绑定匿名函数。
3. 该匿名函数如果返回的是true,提交表单;如果返回的是false,阻止表单提交。
如上代码的表单,当我们点击 `提交` 按钮后,表单就会提交,此处默认使用的是 `GET` 提交方式,会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能,js 代码实现如下:
1. 获取 `form` 表单元素对象。
2. 给 `form` 表单元素对象绑定 `onsubmit` 事件,并绑定匿名函数。
3. 该匿名函数如果返回的是true,提交表单;如果返回的是false,阻止表单提交。
document.getElementById("register").onsubmit = function (){
//onsubmit 返回true,则表单会被提交,返回false,则表单不提交
return true;
}
八、RegExp对象
RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。
我们可以通过爬虫技术去爬取该页面源代码,然后获取页面中所有的邮箱,后期我们可以给这些邮箱地址发送推广的邮件。那么问题来了,如何才能知道页面内容中哪些事邮箱地址呢?这里就可以使用正则表达式来匹配邮箱。
在 js 中对正则表达式封装的对象就是正则对象。
9.1 正则对象使用
9.1.1 创建对象
正则对象有两种创建方式:
* 直接量方式:注意不要加引号
```js
var reg = /正则表达式/;
```* 创建 RegExp 对象
```js
var reg = new RegExp("正则表达式");
```
9.1.2 函数
`test(str)` :判断指定字符串是否符合规则,返回 true或 false
9.2 正则表达式
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则,如果符合返回true,如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式,Java语言也支持,只不过正则表达式在不同的语言中的使用方式不同,js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则如下:
* ^:表示开始
* $:表示结束
* [ ]:代表某个范围内的单个字符,比如: [0-9] 单个数字字符
* .:代表任意单个字符,除了换行和行结束符
* \w:代表单词字符:字母、数字、下划线(_),相当于 [A-Za-z0-9_]
* \d:代表数字字符: 相当于 [0-9]
量词:
* +:至少一个
* *:零个或多个
* ?:零个或一个
* {x}:x个
* {m,}:至少m个
* {m,n}:至少m个,最多n个
**代码演示:**
// 规则:单词字符,6~12
//1,创建正则对象,对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
9.3 改进表单校验案例
表单校验案例中的规则是我们进行一系列的判断来实现的,现在学习了正则对象后,就可以使用正
则对象来改进这个案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号?</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
//1.3 获取用户输入的用户名
var username = usernameInput.value.trim();
//1.4 判断用户名是否符合规则:长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
//var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();
//1.4 判断密码是否符合规则:长度 6~12
var reg = /^\w{6,12}$/;
var flag = reg.test(password);
//var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("password_err").style.display = '';
}
return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();
//1.4 判断手机号是否符合规则:长度 11,数字组成,第一位是1
//var flag = tel.length == 11;
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("tel_err").style.display = '';
}
return flag;
}
//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false
var flag = checkUsername() && checkPassword() && checkTel();
return flag;
}
</script>
</body>
</html>