JavaScript
seo靠我 2023-09-25 04:21:30目录
1、JavaScript简介
2、JavaScript引入方式
2.1、内部脚本
2.2、外部脚本
3、JavaScript基础语法
3.1、书写语法
3.2、输出语句
3.3、变量
3.4、数据类型
3.5、运算SEO靠我符
3.5.1、== 和 === 的区别
3.5.2、类型转换
3.6、流程控制语句
3.6.1、if语句
3.6.3、for循环语句
3.6.4、while循环语句
3.6.5、do while循环语句
3.7、函SEO靠我数
3.7.2、函数调用
4、JavaScript常用对象
4.1、Array对象
4.1.1、格式定义
4.1.2、元素访问
4.1.3、特点
4.1.4、属性
4.1.5、方法
4.2、String对象
4.2.1、SEO靠我属性
4.2.2、方法
4.3、自定义对象
5、BOM
5.1、window对象
5.1.2、window对象属性
5.1.3、window对象函数
5.1.4、案例
5.2、History对象
5.3、LoacatiSEO靠我on对象
5.3.1、获取Location对象
5.3.2、Location对象属性
5.3.3、案例
6、DOM
6.1、概述
6.2、获取Element对象
6.3、HTML ELement对象使用
7、事件监听SEO靠我
7.1、事件绑定
7.2、常见事件
8、表达验证案例
8.1 需求
8.2 环境准备
8.3 验证输入框
8.4、验证表单
9、RegExp对象
9.1、正则对象使用
9.1.1、创建对象
9.1.2、函数
9.2、正则SEO靠我表达式
9.3、改进表单校验案例
1、JavaScript简介
JavaScript是一门跨平台、面向对象的脚本语言，用于控制页面行为，它使页面可以交互
W3C标准：网页主要由三部分组成
结构：HTML
表现：CSEO靠我SS
行为：JavaScript
JavaScript和Java是完全不同的语言，不论是概念还是设计。
Java是编译语言，需要编译成字节码文件才能运行。而JavaScript是解释语言，由浏览器解释执行。SEO靠我但是基础语法类似。
JavaScript（简称JS）在1995年有Brendan Eich 发明，并于1997年成为ECMA的标准。
ECMAScript 6（ES6）是最新的JavaScript版本（发SEO靠我布与2015年）
JavaScript可以用于控制页面行为，它使页面可以交互，可以做以下事情：
改变页面内容
修改指定元素的属性值
对表单进行验证
2、JavaScript引入方式
JavaScript 引入方式SEO靠我就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：1、内部脚本：将JS代码定义在HTML页面中
2、外部脚本：将JS代码定义到外部JS文件中，然后引入到HTML页SEO靠我面中
2.1、内部脚本
在HTML中，JavaScript代码必须写在<script> </script> 标签之间
注意：在HTML中定义定义任意多个<script>标签，标签的位置可以随意放置，
但是我们SEO靠我建议放在元素底部，这样可以改善显示速度
因为浏览器加载内容时是从上往下加载并解析，我们应该先让用户看到页面内容，然后再展示动态的效果
代码如下：
<!DOCTYPE html> <html SEO靠我lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><sSEO靠我cript>window.alert("hello js!"); </script></body> </html>效果如下：
2.2、外部脚本
第一步：在外部定义js文件
第SEO靠我二步：在页面引入外部的js文件
在html页面使用<script>标签的src属性导入外部js文件的URL路径
效果如下：
注意：
外部脚本不能包含<script>标签
在js文件中直接书写js代码即可，不要在SEO靠我js文件中书写<script>标签
<script>标签不能自闭合
在页面中引入外部js文件时，不能写成<script src="../js.demo.js" />
3、JavaScript基础语法
3.1、SEO靠我书写语法
区分大小写：与Java一样，变量名、函数名以及其他一切都是区分大小写
每行结尾的分号可有可无（js特点）
但是如果一行书写多个语句时，必须加上分号来区分多个语句
注释
单行注释 //注释内容
多行注释SEO靠我 /*注释内容*/
注意：JavaScript没有文档注释
大括号表示代码块
if (count == 3) { alert(count); }3.2、输出语句
js可以通过以下方式进行内容SEO靠我的输出，不同的语句输出的位置不同
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
使用window.alertSEO靠我()写入警告框
<script>window.alert("hello js"); // 写入警告框 </script>效果如下：
使用document.write()写入HTML输出
<sSEO靠我cript>//window.alert("hello js"); // 写入警告框document.write("hello js"); // 写入html页面 </script>效SEO靠我果如下：
使用console.log()写入浏览器控制台
<script>//window.alert("hello js"); // 写入警告框//document.write("hello js");SEO靠我 // 写入html页面console.log("hello js"); // 写入控制台 </script>效果如下：
3.3、变量
JavaScript中用关键字var来声明变量。
格式SEO靠我:var 变量名 = 数据值
js中变量名命令规则如下，基本与Java相同：
组成字符可以为字母、数字、下划线(_)和美元符号($)
不能以数字开头
建议使用驼峰命名
注意：
JavaScript是一门弱类型语言SEO靠我，变量可以存放不同类型的值
在定义变量时赋值为数值数据，还可以将其变量值改为字符串类型
<script>var test = 10;test = "hello";</script>JavaScript中vSEO靠我ar关键字有点特殊，有以下地方和其他语言不同
作用域：全局变量
<script>{var test = 10;}alert(test); // 在代码块中定义的变量，在代码块外部依然可以使用</scripSEO靠我t>变量可以重复定义
<script>{var test = 10;var test = 20; // 在js中，会用20代替掉原来的10}alert(test); // 输出结果为20</scriptSEO靠我>针对以上问题，在ECMAScript 6 中新增了关键字let来定义变量，它的用法与var相似，但是作用域是局部有效，且不允许重复声明
<script>{var test = 10;var test SEO靠我= 20; // 在js中，会用20代替掉原来的10}alert(test); // 输出结果为20</script>在ECMAScript 6 中新增了关键字const，用与声明一个只读常量，一旦声SEO靠我明，就不能改变了
3.4、数据类型
JavaScript提供了两类数据类似：原始类型和引用类型
使用typeof运算符可以获取数据类型
arlet（typeof age）：以弹框的形式将age变量的数据类型输SEO靠我出
原始数据类型
number 数字（整数、小数、NaN(Not a Number)）
string 字符、字符串（单双引号皆可）
boolean 布尔（true false）
null 对象为空
undefinSEO靠我ed 声明后的变量未赋予初值默认就为undefined
<script>var age = 20;var price = 20.0;alert(typeof age); // 结果为 numberaleSEO靠我rt(typeof price); // 结果为 numbervar ch = a;var str = 张三;var strs = "libai";alert(typeof ch); // 结果为 sSEO靠我tringalert(typeof str); // 结果为 stringalert(typeof strs); // 结果为 stringvar obj = null;alert(typeof obSEO靠我j); // 结果为 objectvar s;alert(typeof s); // 结果为 undefined</script>可能你会很疑惑为什么obj变量打印结果为object，下面是官方文档的SEO靠我截图
3.5、运算符
JavaScript提供了如下运算符，大部分都是与java一样的，不同的是js的关系运算符 == 和 ===
一元运算符 ++， --
算术运算符 +，-，*，/。%
赋值运算符 =， +SEO靠我=，-=，......
关系运算符 >，<，>=，<=，!=，==，===
逻辑运算符 &&，||，!
三元运算符 条件表达式? true_value:false_value
3.5.1、== 和 === 的SEO靠我区别
==
1、判断类型是否一样，如果不一样，则进行类型转换
2、再去比较器值
===（全相等）
1、判断类型是否一样，如果不一样，直接返回false
2、再去比较器值
代码如下
<script>var age = SEO靠我20;var age2 = 20;alert(age == age2); // truealert(age === age2); // false </script>3.5.2、类型转SEO靠我换
上述中，==运算符会进行类型转换，所以接下来讲解一下JavaScript中的类型转换。
其他类型转换为number
string转换为number：按照字符串的字面值换为数字。如果字面值不是数字，则转为SEO靠我NaN
将string转为number的两种方式
1）使用 + 正号运算符
var str = +"20"; alert(srt + 1); // 212）使用 pareseInt()函数
vSEO靠我ar str = "20";alert(parseInt(str) + 1);// 21建议使用parseInt()函数进行转换
boolean转换为number
true转为1，false转为0
var SEO靠我flag = +false;alert(flag); // 0其他类型转换为boolean
number类型转为boolean：0和NaN转为false，其他数字转为true
string类型转为boolSEO靠我ean：空字符串转为false，其他字符串转为true
undefined类型转为boolean：false
3.6、流程控制语句
JavaScript中提供了和Java一样的流程控制语句，如下
if
switSEO靠我ch
for （for循环中小括号中定义的变量建议使用关键字let）
while
do while
3.6.1、if语句
var count = 3; if (count == 3) { aleSEO靠我rt(count); }3.6.2、switch语句
var num = 3; switch (num) {case 1:alert("星期一");break;case SEO靠我2:alert("星期二");break;case 3:alert("星期三");break;case 4:alert("星期四");break;case 5:alert("星期五");break;cSEO靠我ase 6:alert("星期六");break;case 7:alert("星期日");break;default:alert("输入的星期有误");break; }3.6.3、foSEO靠我r循环语句
var sum = 0; for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用letsum += i; SEO靠我} alert(sum);3.6.4、while循环语句
var sum = 0; var i = 1; while (i <= 100) {sum +=SEO靠我 i;i++; } alert(sum);3.6.5、do while循环语句
3.7、函数
函数（就是java中的方法）是被设计为执行特定任务的代码块，JavaScripSEO靠我t函数通过function关键字来定义
3.7.1、定义格式
函数的定义格式有两种
方式一
function 函数名(参数1,参数2...){要执行的代码块 }方式二
var 函数名 = funSEO靠我ction(参数列表){要执行的代码块 }注意：形式参数不需要声明类型，因为JavaScript是弱类型语言
function add(a, b){return a+b; SEO靠我 }上述函数的参数a，b不需要定义数据类型，因为在JavaScript中使用var来声明变量，加与不加都没有太大意义
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
3.7.2、函数调SEO靠我用
函数的调用
函数名(实际参数列表);eg:
let result = add(1, 2);注意：
js中，函数调用可以传递任意个参数
例如：let result = add(1,2,3,4,5);
它是将数据SEO靠我1传递给变量a，数据2传递给b，而后面的参数都没有意义
4、JavaScript常用对象
JavaScript提供了很多对象供使用者使用。这些对象总共分为三类
以下截取与 http://www.w3schoSEO靠我ol.com.cn
基本对象
BOM对象
DOM对象 DOM中对象比较多，下图只是一部分
接下来说一下两个常用的Array数组对象和String字符串对象
4.1、Array对象
JavaScript ArraySEO靠我对象用于定义数组
4.1.1、格式定义
数组定义的格式有两种：
方式1
var 变量名 = new array(元素列表);例如
var arr = new array(1,2,3); //1,2,3 是存储在SEO靠我数组中的数据（元素）java语句声明静态数组 int[] arr = new int[]{1,2,3};
方式2
var 变量名 = [元素列表];例如
var 变量名 = [1,2,3]; //1,2,SEO靠我3 是存储在数组中的数据（元素）注意：Java中的数组静态初始化使用的是{}，而JavaScript中使用的是[]
4.1.2、元素访问
访问数组中的元素与java语言是一样的，格式如下
arr[索引] =SEO靠我 值;如下所示
// 方式一 var arr = new Array(1,2,3); // alert(arr);// 方式二 var arr2 = [1SEO靠我,2,3]; //alert(arr2);// 访问 arr2[0] = 10; alert(arr2)4.1.3、特点
JavaScript中的数据相当SEO靠我于Java中的集合，数组的长度是可变的，又因为JavaScript是弱类型，所以可以存储任意类型的数据
如下所示
<script>// 变长var arr = [1,2,3];arr[10] = 10;aSEO靠我lert(arr[10]); // 10alert(arr[9]); // undefined// 在JavaScript中没有赋值的话默认就是undefined// 可添加任意类型数据arr[5]=SEO靠我"hello";alert(arr[5]); </script>4.1.4、属性
Array对象提供了很多属性，如下图是官方文档截取的
下面演示以下length属性
<script>var SEO靠我arr2 = [1, 2, 3, 4, 5];for (let i = 0; i < arr2.length; i++) {alert(arr2[i]);} </script>4.1.SEO靠我5、方法
Array对象也提供了很多方法，如下图是官方文档截取的
下面演示push函数和splice函数
push函数：给数组添加元素，也就是在数组的末尾添加元素
splice函数：删除元素
参数1：索引。表示SEO靠我从哪个索引位置开始删除
参数2：格数。表示删除几个元素
<script>var arr2 = [1, 2, 3, 4, 5];arr2.push(6); // 向数组中添加元素alert(arr2); /SEO靠我/ {1,2,3,4,5,6}arr2.splice(2,3); // 从索引2开始，删除数组中的三个元素alert(arr2); // {1,2,6} </script>4.2、StSEO靠我ring对象
String对象的创建方式有两种
方式1
var 变量名 = new String(str);eg：
var str = new String("hello js~~"); alSEO靠我ert(str);方式2
var 变量名 = "str";eg：
var str = "hello js~~~"; alert(str);4.2.1、属性
String对象提供了很多属性，下SEO靠我面是官方截取的
下面举例length来演示，该属性是用于动态的获取字符串的长度
<script>var str = "hello";alert(str.length); // 5 </scSEO靠我ript>4.2.2、方法
String对象也提供了很多方法，如下图是官方文档截取的
String对象还有一个trim()函数，官方文档没有列出，但是所有的浏览器都支持。
<script>var str =SEO靠我 " hello ";alert(str.trim()); // 去除字符串两端的空格 输出结果为 hello </script>4.3、自定义对象
在JavaScript中自定义对象很SEO靠我简单，如下是自定义对象的格式
var 对象名称 = {属性名称:属性值1,属性名称:属性值1,属性名称:属性值1,...函数名称 : function(参数列表){},...};调用格式
对象名.属性名对SEO靠我象名.函数名()下面来演示以下自定义对象
<script>var brand = {brandName: "华为",brandPrice: 9999,play: function () {alert("SEO靠我干翻华为");}};alert(brand.brandName); // 华为alert(brand.brandPrice); // 9999brand.play(); // 干翻华为</scriptSEO靠我>5、BOM
BOM:Browser Object Model 浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象SEO靠我来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.hSEO靠我ref = "https://itheima.com";
BOM中包含了如下对象：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
LocatiSEO靠我on：地址栏对象
下面是BOM中的各个对象和浏览器的各个组成部分的对应关系
5.1、window对象
window对象是JavaScript对浏览器的窗口进行封装的对象。
5.1.1、获取window对象
该对SEO靠我象不需要创建可直接使用window，其中window. 可以省略。比如 上面所出现过的alert()函数,在调用时可以写成如下两种
显式使用window对象调用
window.alert("abc");隐式SEO靠我使用
alert("abc");5.1.2、window对象属性
window对象提供了用于获取其他BOM组成对象的属性
也就是说，我们想使用Location对象的话，就可以使用window对象获取；写成wSEO靠我indow.location，而window.可以省略，简写成location来获取Location对象 。
5.1.3、window对象函数
window对象提供了很多函数供我们使用，而很多都不常用；下SEO靠我面给大家列举了一些比较常用的函数
setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值)：在一定的时间SEO靠我间隔后执行一个function。循环执行
confirm代码演示：
<script>// confirm(),点击确认按钮返回 true，点击取消按钮返回 falsevar flag = window.cSEO靠我onfirm("确认删除");alert(flag); // 返回true或false </script>定时器代码演示
当打开浏览器时，每隔三秒钟弹出一个hello js
<scriptSEO靠我>setInterval(function(){alert("hello js");}, 3000); // 每三秒钟弹出一个警告框（显示了hello js） </script>当打开SEO靠我浏览器时，3秒后会弹出一个 hello js，只弹出一次
<script>setTimeout(function () {alert("hello js");}, 3000); // 打开浏览器后三秒钟SEO靠我弹出一个警告框（显示了hello js） </script>5.1.4、案例
需求：每隔一秒，灯泡切换一次状态
代码如下
<!DOCTYPE html> <html langSEO靠我="en"> <head><meta charset="UTF-8"><title>JavaScript开关灯演示</title><style>#myImage {text-alignSEO靠我: center; /* 居中显示 */}</style> </head> <body><input type="button" onclick="on()" valuSEO靠我e="开灯"/> <img id="myImage"src="../imgs/off.gif"> <input type="button" onclick="off()SEO靠我" value="关灯"><script>function on() {window.document.getElementById("myImage").src = "../imgs/on.gif"SEO靠我;}function off() {window.document.getElementById("myImage").src = "../imgs/off.gif";}var x = 0; // 计SEO靠我时器setInterval(function () {if (x % 2 == 0) {// 开灯on();} else { // x%2==1// 关灯off();}x++;},1000);</scSEO靠我ript> </body> </html>5.2、History对象
History对象是javaScript对历史记录封装的对象
History对象的获取
使用windowSEO靠我.history获取，其中 window. 可以省略
History对象的函数
这两个函数实现了我们访问浏览器时使用的前进或者后退，如图所示
当我们点击向左箭头时，就跳转到上一个访问的页面，这就是back(SEO靠我)函数的作用
当我们点击向左箭头时，就跳转到下一个访问的页面，这就是forward()函数的作用
5.3、Loacation对象
Localhost对象是Javascript对地址栏封装的对象。可以通过操作SEO靠我该对象跳转到任意页面
5.3.1、获取Location对象
使用 window.location获取，其中window. 可以省略
window.location.方法(); locatioSEO靠我n.方法();5.3.2、Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 href
代码如下：
<script>window.alert("我要跳转到百度了噢~~~")SEO靠我;window.location.href = "http://www.baidu.com"; </script>在浏览器首先会弹框显示 我要跳转到百度了噢~~~，当我们点击了 确定 SEO靠我就会跳转到 百度 的首页。
5.3.3、案例
需求：3秒跳转到百度首页
分析：
3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
要进行页面跳转，所以需要用到 locatSEO靠我ion 对象的 href 属性实现
代码如下：
<script>document.write("三秒后跳转到百度首页");window.setTimeout(function () {window.locSEO靠我ation.href = "http://www.baidu.com";}, 3000); </script>6、DOM
6.1、概述
DOM：Document Object Model SEO靠我文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTSEO靠我ML 文档是浏览器解析。封装的对象分为
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
如下图，左边是HTML文档内容，右边是SEO靠我DOM树
作用：
JavaScript通过DOM，就能够对HTML进行操作了
改变HTML元素的内容
改变HTML元素的样式（CSS）
对HTML DOM事件做出反应
添加和删除HTML元素
DOM相关概念：
DOMSEO靠我是W3C(万维网联盟)定义了访问HTML和XML文档的标准。该标准被分为三个不同的部分：
1、核心DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
Document：整个文档对象
ESEO靠我lement：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
2、XML DOM： 针对 XML 文档的标准模型
3、HTML DOM：针对 HTML 文档的标准模型
该标准SEO靠我是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
例如：<img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
例如：<inpuSEO靠我t type=button> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。
6.2、获取Element对象
HTML 中的 Element 对象可以通过SEO靠我 Document 对象获取，而 Document 对象是通过 window 对象获取。
Document对象中提供了以下获取Element元素对象的函数
Document 对象中提供了以下获取 ElemSEO靠我ent 元素对象的函数
getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getESEO靠我lementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组
代码演示如下：
<SEO靠我!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> SEO靠我 </head> <body> <img id="light" src="../imgs/off.gif"> <br><div class="cls">哈哈哈<SEO靠我/div> <br> <div class="cls">李白</div> <br><input type="checkbox" name="hobby"SEO靠我> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="checkbox" name="hobby"> 游戏SEO靠我 <br><script>var img = document.getElementById("light");alert(img); </script></body>SEO靠我 </html>1、根据 id 属性值获取上面的 img 元素对象，返回单个对象
2、根据标签名称获取所有的 div 元素对象
<script>var divs = document.geSEO靠我tElementsByTagName("div");for (let i = 0; i < divs.length; i++) {alert(div[i]);} </script>3、SEO靠我获取所有的满足 name = hobby 条件的元素对象
<script>var hobbys = document.getElementByName("hobby");for (let i = 0; SEO靠我i < hobbys.length; i++) {alert(hobbys[i]);} </script>4、获取所有的满足 class=cls 条件的元素对象
<script>var SEO靠我classs = document.getElementByClassName("cls");for (let i = 0; i < classs.length; i++) {alert(classsSEO靠我[i]);} </script>6.3、HTML ELement对象使用
HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。
下面我们通过具SEO靠我体的案例给大家演示文档的查询和对象的使用；
需求：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"SEO靠我><title>Title</title> </head> <body> <img id="light" src="../imgs/off.gif"> SEO靠我<br><div class="cls">哈哈哈</div> <br> <div class="cls">李白</div> <br><input typSEO靠我e="checkbox" name="hobby"> 电影 <input type="checkbox" name="hobby"> 旅游 <input type="cSEO靠我heckbox" name="hobby"> 游戏 <br><script>// 在此处写js代码 </script></body> </html>点亮SEO靠我灯泡
此案例由于需要改变 img 标签 的图片，所以我们查询文档，下图是查看文档的流程：
代码实现：
//1，根据 id=light 获取 img 元素对象 var img = documeSEO靠我nt.getElementById("light"); //2，修改 img 对象的 src 属性来改变图片 img.src = "../imgs/on.gif";2、SEO靠我将所有的 div 标签的标签体内容替换为 呵呵
//1，获取所有的 div 元素对象 var divs = document.getElementsByTagName("div"); SEO靠我 /*style:设置元素css样式innerHTML：设置元素内容*/ //2，遍历数组，获取到每一个 div 元素对象，并修改元素内容 for (letSEO靠我 i = 0; i < divs.length; i++) {//divs[i].style.color = red;divs[i].innerHTML = "呵呵"; }3、使所有的SEO靠我复选框呈现被选中的状态
此案例我们需要看 复选框 元素对象有什么属性或者函数是来操作 复选框的选中状态。下图是文档的查看
<script>// 使所以复选框呈现被选中的状态码//1，获取所有的 复选框 元SEO靠我素对象var hobbys = document.getElementsByName("hobby");//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选SEO靠我框的选中状态for(let i=0;i<hobbys.length;i++){hobbys[i].checked = true;}</script>7、事件监听
要想知道什么是事件监听，首先先聊聊什么是SEO靠我事件？
HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击、鼠标移动到元素之上、按下键盘按键 等都是事件。
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码SEO靠我。例如下图当我们点击 开灯 按钮，就需要通过 js 代码实现替换图片
再比如下图输入框，当我们输入了用户名光标离开输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格SEO靠我式有误!
7.1、事件绑定
JavaScript 提供了两种事件绑定方式：
方式一：通过 HTML标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定
注意：
推荐使用第二种方式，因为第一种方式将html与JSEO靠我avaScript耦合在了一起
方式一：通过 HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义事件属性，在事件属性中绑定函数。 onclick就是单击事件的事件属性。οncSEO靠我lick=’on()‘示该点击事件绑定了一个名为on()的函数
<input type="button" onclick=on()’>下面是点击事件绑定的on()函数
function on(){alerSEO靠我t("我被点了"); }方式二：通过DOM元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用事件属性，绑定事件的操作需要在 js 代码中实现
<input typeSEO靠我="button" id="btn">下面 js 代码是获取了id=’btn‘的元素对象，然后将onclick()作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
document.geSEO靠我tElementById("btn").onclick = function (){alert("我被点了"); }代码演示：
<!DOCTYPE html> <htmlSEO靠我 lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><SEO靠我input type="button" onclick="on()" value="点我"> <script>function on(){alert("我被点了~~~");} SEO靠我 </script> </body> </html>效果如下
<!DOCTYPE html> <html lang="en"> <hSEO靠我ead><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" idSEO靠我="btn" value="快点我"><script>document.getElementById("btn").onclick = function(){alert("我被点啦~~~");} SEO靠我 </script> </body> </html>7.2、常见事件
上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家SEO靠我列举一些比较常用的事件属性
事件属性名说明onclick鼠标单击事件onblur元素失去焦点onfocus元素获得焦点onload某个页面或图像被完成加载onsubmit当表单提交时触发该事件onmouSEO靠我seover鼠标被移到某元素之上onmouseout鼠标从某元素移开onfocus 获得焦点事件
如下图，当点击了输入框后，输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。
onbulSEO靠我r失去焦点事件
如下图，当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。下图示例是将输入的文本转换为大写。
onmouseout鼠标移出事件
onmouseover鼠标移入事SEO靠我件
如下图，当鼠标移入到 苹果 图片上时，苹果图片变大；当鼠标移出 苹果图片时，苹果图片变小。
onsubmit表单提交事件
如下是带有表单的页面
<!DOCTYPE html> <html SEO靠我lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><fSEO靠我orm id="register" action="#" ><input type="text" name="username" /><input type="submit" value="提交"><SEO靠我/form><script></script> </body> </html>如上代码的表单，当我们点击 提交 按钮后，表单就会提交，此处默认使用的是 GET 提交方式SEO靠我，会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能，js 代码实现如下： 1、获取form表单元素对象
2、给form表单元素对象绑定onsubmit事SEO靠我件，并绑定匿名函数
3、该匿名函数如果返回的是true，提交表单；如果返回的是false，阻止表单提交
document.getElementById("register").onsubmit = funSEO靠我ction (){//onsubmit 返回true，则表单会被提交，返回false，则表单不提交return true; }8、表达验证案例
8.1 需求
有如下注册页面，对表单进行校验SEO靠我，如果输入的用户名、密码、手机号符合规则，则允许提交；如果不符合规则，则不允许提交。
完成以下需求：
当输入框失去焦点时，验证输入内容是否符合规则
当点击注册按钮是，判断所以输入框都是否符合要求，如果不符合SEO靠我则阻止表单提交
8.2 环境准备
下面是初始页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><SEO靠我title>欢迎注册</title><link href="../css/register.css" rel="stylesheet"> </head> <body><SEO靠我div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="#">登录</a></diSEO靠我v><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name=SEO靠我"username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: nonSEO靠我e">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password"SEO靠我 id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td><SEO靠我/tr><tr><td>手机号</td><td class="inputs"><input name="tel" type="text" id="tel"><br><span id="tel_err"SEO靠我 class="err_msg" style="display: none">手机号格式有误</span></td></tr></table><div class="buttons"><input vSEO靠我alue="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script></script> SEO靠我 </body> </html>css
* {margin: 0;padding: 0;list-style-type: none; } .reg-conSEO靠我tent{padding: 30px;margin: 3px; } a, img {border: 0; }body {background-imageSEO靠我: url("../imgs/reg_bg_min.jpg") ;text-align: center; }table {border-collapse: collapse;bordeSEO靠我r-spacing: 0; }td, th {padding: 0;height: 90px;} .inputs{vertical-align: top; SEO靠我 }.clear {clear: both; }.clear:before, .clear:after {content: "";display: table; }.SEO靠我clear:after {clear: both; }.form-div {background-color: rgba(255, 255, 255, 0.27);border-radSEO靠我ius: 10px;border: 1px solid #aaa;width: 424px;margin-top: 150px;margin-left:1050px;padding: 30px 0 2SEO靠我0px 0px;font-size: 16px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(7SEO靠我5, 75, 75, 0.3);text-align: left; }.form-div input[type="text"], .form-div input[type="passwSEO靠我ord"], .form-div input[type="email"] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px; SEO靠我 }.form-div input[type="checkbox"] {margin: 20px 0 20px 10px; }.form-div input[type="bSEO靠我utton"], .form-div input[type="submit"] {margin: 10px 20px 0 0; }.form-div table {margin: 0 SEO靠我auto;text-align: right;color: rgba(64, 64, 64, 1.00); }.form-div table img {vertical-align: SEO靠我middle;margin: 0 0 5px 0; }.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-topSEO靠我: 30px; }.form-div .buttons {float: right; }input[type="text"], input[type="passwordSEO靠我"], input[type="email"] {border-radius: 8px;box-shadow: inset 0 2px 5px #eee;padding: 10px;border: 1SEO靠我px solid #D4D4D4;color: #333333;margin-top: 5px; }input[type="text"]:focus, input[type="passSEO靠我word"]:focus, input[type="email"]:focus {border: 1px solid #50afeb;outline: none; }input[typSEO靠我e="button"], input[type="submit"] {padding: 7px 15px;background-color: #3c6db0;text-align: center;boSEO靠我rder-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rSEO靠我gba(75, 75, 75, 0.3); }input[type="button"]:hover, input[type="submit"]:hover {background-coSEO靠我lor: #5a88c8; }input[type="button"]:active, input[type="submit"]:active {background-color: #SEO靠我5a88c8; } .err_msg{color: red;padding-right: 170px; } #password_err,SEO靠我#tel_err{padding-right: 195px; }#reg_btn{margin-right:50px; width: 285px; height: 45px; margSEO靠我in-top:20px; }8.3 验证输入框
校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id=username_err 的spSEO靠我an标签显示出来，给出用户提示。
校验密码。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使 id=password_err 的span标签显示出来，给出用户提示。
校SEO靠我验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id=tel_err 的span标签显示出来，给出用户提示。
代码如下
//1. 验证用户名是否符合规则 SEO靠我 //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username");//1.2 绑定onblurSEO靠我事件 失去焦点 usernameInput.onblur = function () {//1.3 获取用户输入的用户名var username = usernameInput.valSEO靠我ue.trim();//1.4 判断用户名是否符合规则：长度 6~12if (username.length >= 6 && username.length <= 12) {//符合规则documenSEO靠我t.getElementById("username_err").style.display = none;} else {//不合符规则document.getElementById("usernaSEO靠我me_err").style.display = ;} }//1. 验证密码是否符合规则 //1.1 获取密码的输入框 var passwordInpuSEO靠我t = document.getElementById("password");//1.2 绑定onblur事件 失去焦点 passwordInput.onblur = functioSEO靠我n() {//1.3 获取用户输入的密码var password = passwordInput.value.trim();//1.4 判断密码是否符合规则：长度 6~12if (password.lSEO靠我ength >= 6 && password.length <= 12) {//符合规则document.getElementById("password_err").style.display = SEO靠我none;} else {//不合符规则document.getElementById("password_err").style.display = ;} }//1. 验证手机号是否SEO靠我符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel");//1.2 绑定onblur事件 SEO靠我失去焦点 telInput.onblur = function() {//1.3 获取用户输入的手机号var tel = telInput.value.trim();//1.4 判断手SEO靠我机号是否符合规则：长度 11if (tel.length == 11) {//符合规则document.getElementById("tel_err").style.display = none;}SEO靠我 else {//不合符规则document.getElementById("tel_err").style.display = ;} }8.4、验证表单
当用户点击 注册 按钮时，需要SEO靠我同时对输入的 用户名、密码、手机号 ，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定onsubmit事件
//1. 获取表单对象 SEO靠我 var regForm = document.getElementById("reg-form");//2. 绑定onsubmit 事件 regForm.onsubmit = fuSEO靠我nction () {}onsubmit事件 绑定的函数需要对输入的 用户名、密码、手机号 进行校验，这些校验我们之前都已经实现过了，这里我们还需要再校验一次吗？不需要，只需要对之前校验的代码进行改造SEO靠我，把每个校验的代码专门抽象到有名字的函数中，方便调用；并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交，代码如下：
//1. 验证用户名是否符合规则 //1.1 获取用户名的输SEO靠我入框 var usernameInput = document.getElementById("username");//1.2 绑定onblur事件 失去焦点 useSEO靠我rnameInput.onblur = checkUsername;function checkUsername() {//1.3 获取用户输入的用户名var username = usernameISEO靠我nput.value.trim();//1.4 判断用户名是否符合规则：长度 6~12var flag = username.length >= 6 && username.length <= 12;SEO靠我if (flag) {//符合规则document.getElementById("username_err").style.display = none;} else {//不合符规则documenSEO靠我t.getElementById("username_err").style.display = ;}return flag; }//1. 验证密码是否符合规则 //1SEO靠我.1 获取密码的输入框 var passwordInput = document.getElementById("password");//1.2 绑定onblur事件 失去焦点 SEO靠我 passwordInput.onblur = checkPassword;function checkPassword() {//1.3 获取用户输入的密码var password = pSEO靠我asswordInput.value.trim();//1.4 判断密码是否符合规则：长度 6~12var flag = password.length >= 6 && password.lengthSEO靠我 <= 12;if (flag) {//符合规则document.getElementById("password_err").style.display = none;} else {//不合符规则SEO靠我document.getElementById("password_err").style.display = ;}return flag; }//1. 验证手机号是否符合规则 SEO靠我 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel");//1.2 绑定onblur事件 失去焦点 SEO靠我 telInput.onblur = checkTel;function checkTel() {//1.3 获取用户输入的手机号var tel = telInput.value.trim()SEO靠我;//1.4 判断手机号是否符合规则：长度 11var flag = tel.length == 11;if (flag) {//符合规则document.getElementById("tel_erSEO靠我r").style.display = none;} else {//不合符规则document.getElementById("tel_err").style.display = ;}return SEO靠我flag; }而onsubmit绑定的函数需要调用checkUsename()函数、checkPassword()函数、checkTel()函数
//1. 获取表单对象 SEO靠我var regForm = document.getElementById("reg-form");//2. 绑定onsubmit 事件 regForm.onsubmit = funcSEO靠我tion () {//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回falsevar flag = checkUsername() && checkPassword() && checkSEO靠我Tel();return flag; }9、RegExp对象
RegExp是正则对象。正则对象用于判断指定字符串是否符合规则
9.1、正则对象使用
9.1.1、创建对象
正则对象有两种创建方式SEO靠我：
直接量方式：注意不要加引号
var reg = /正则表达式/;创建RegExp对象
var reg = new RegExp("正则表达式");9.1.2、函数
test(str):判断指定字符串是否符SEO靠我合规则，返回true或false
9.2、正则表达式
从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符SEO靠我合指定的规则，如果符合返回true，如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则SEO靠我对象来使用正则表达式。
正则表达式常用的规则如下：
^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字SEO靠我母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符： 相当于 [0-9]
量词：
+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个
9SEO靠我.3、改进表单校验案例
表单校验案例中的规则是我们进行一系列的判断来实现的，现在学习了正则对象后，就可以使用正则对象来改进这个案例。
<!DOCTYPE html> <html lang=SEO靠我"en"> <head><meta charset="UTF-8"><title>欢迎注册</title><link href="../css/register.css" rel="sSEO靠我tylesheet"> </head> <body><div class="form-div"><div class="reg-content"><h1>欢迎注册</hSEO靠我1><span>已有帐号？</span> <a href="#">登录</a></div><form id="reg-form" action="#" method="get"><table><tr>SEO靠我<td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="usernaSEO靠我me_err" class="err_msg" style="display: none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inpSEO靠我uts"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msgSEO靠我" style="display: none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs"><input name="tel" SEO靠我type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span></tdSEO靠我></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clSEO靠我ear"></form></div><script>//1. 验证用户名是否符合规则//1.1 获取用户名的输入框var usernameInput = document.getElementByIdSEO靠我("username");//1.2 绑定onblur事件 失去焦点usernameInput.onblur = checkUsername;function checkUsername() {//1SEO靠我.3 获取用户输入的用户名var username = usernameInput.value.trim();//1.4 判断用户名是否符合规则：长度 6~12,单词字符组成var reg = /^\SEO靠我w{6,12}$/;var flag = reg.test(username);//var flag = username.length >= 6 && username.length <= 12;iSEO靠我f (flag) {//符合规则document.getElementById("username_err").style.display = none;} else {//不合符规则documentSEO靠我.getElementById("username_err").style.display = ;}return flag;}//1. 验证密码是否符合规则//1.1 获取密码的输入框var passSEO靠我wordInput = document.getElementById("password");//1.2 绑定onblur事件 失去焦点passwordInput.onblur = checkPasSEO靠我sword;function checkPassword() {//1.3 获取用户输入的密码var password = passwordInput.value.trim();//1.4 判断密码是SEO靠我否符合规则：长度 6~12var reg = /^\w{6,12}$/;var flag = reg.test(password);//var flag = password.length >= 6 SEO靠我&& password.length <= 12;if (flag) {//符合规则document.getElementById("password_err").style.display = noSEO靠我ne;} else {//不合符规则document.getElementById("password_err").style.display = ;}return flag;}//1. 验证手机号是SEO靠我否符合规则//1.1 获取手机号的输入框var telInput = document.getElementById("tel");//1.2 绑定onblur事件 失去焦点telInput.onblSEO靠我ur = checkTel;function checkTel() {//1.3 获取用户输入的手机号var tel = telInput.value.trim();//1.4 判断手机号是否符合规则SEO靠我：长度 11，数字组成，第一位是1//var flag = tel.length == 11;var reg = /^[1]\d{10}$/;var flag = reg.test(tel);if (SEO靠我flag) {//符合规则document.getElementById("tel_err").style.display = none;} else {//不合符规则document.getElemSEO靠我entById("tel_err").style.display = ;return flag;}//1. 获取表单对象var regForm = document.getElementById("rSEO靠我eg-form");//2. 绑定onsubmit 事件regForm.onsubmit = function () {//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回falsevarSEO靠我 flag = checkUsername() && checkPassword() && checkTel();return flag;} </script> </bSEO靠我ody> </html>- 上一篇：软件架构复习笔记(张友生教材版本)
- 下一篇：WOWWEE ROVIO小车改造思路
最新发布
-
火车站存包怎么收费
2023-09-12
-
养老保险个人缴纳比例是多少
2023-09-12
-
上海交大附中浦东实验高中
2023-09-12
-
保鲜膜能放微波炉加热吗
2023-09-12
-
如何制作usb加热片
2023-09-12
-
折800特卖商城怎么样
2023-09-12
-
詹天佑的著名作品
2023-09-12
-
钓鱼岛又叫什么名字
2023-09-12
-
清美公司简介(5个范本)
2023-09-12
-
钱波个人资料简历
2023-09-12