一,JavaScript简介
1.什么是JavaScript?
JavaScript简称js,由网景公司开发的客户端脚本语言(java服务器端的编程语言),不需要编译,可以直接运行
Wed前端三层:
结构层HTML定义页面的结构
样式层CSS定义页面的样式
行为层Javascript用来实现交互,提升用户体验
2.JavaScript作用
在客户端动态的操作页面 eg:购物车
在客户端做数据校验
在客户端发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签,在script标签体中编写js代码
2.行内方式
在普通标签中编写js编码,一般需要结合事件属性,如onclick、onmouseover等
补充:
对象:客观存在的并且可以相互区别的事物 eg:标签 div、p、span
外观:------长相------CSS
行为:-----事件属性-----“我爱你” 1、
事件名 描述
onkeydown 某个键盘的键被按下去
onkeyup 某个键的盘被松开
onkeypress 某个键盘的键被按下去且松开
事件名 描述
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容发生改变,一般用于文件选择器和下拉列表
onselect 文本内容被选中
onsubmit 表单提交前触发,回调函数返回true表示允许表单提交,返回false表示阻 止表单提交
3.2 键盘事件
3.3表单事件
image-20200615193507812
4、事件操作
4.1 事件冒泡
概念:当一个HTML元素产生事件时,该事件会从当前元素(事件源)开始,往上冒泡直到页面的根元素,所有经
过的节点都会收到该事件并执行
特点:先触发子级元素的事件,再触发父级元素的事件
阻止事件冒泡: event.stopPropagation()或event.cancelBubble=true;
4.2 事件默认行为
概念:当一个事件发生时浏览器自己默认做的事情,如:点击链接时回默认跳转,右键点击默认会弹出菜单
阻止事件的默认行为: event.preventDefault();
image-20200615150422482
5、示例:下拉列表
5.1 Select和Option对象
Select对象:表示HTML表单中的一个下拉列表
属性:
length:设置或者返回下拉列表中选项的数量
selectedinex:设置或返回下拉列表中被选中项的索引
value:返回下拉列表中被选项的值
options: 返回下拉列表中所有选项,值为option对象数组(当该数组改变时对应下列表的选项也会改变)
方法
add()向下拉列表添加一个选项
事件
onchange 下拉列表的选项改变时触发
Option对象:表示HTML表单中下拉列表的一个选项
属性: text:设置或返回在页面显示的文本值
value:设置或返回传递给服务器的值
方法
Option(文本值,服务器值)创建一个选项
image-20200615150437910
5.2 二级菜单联动
实现省市级联的效果
image-20200616195539997
八、BOM操作
1、BOM简介
JavaScript由三部分组成
ECMAScript核心语法----JS简称ECMAScript,ES
DOM文档对象模型
BOM浏览器对象模型
1592971187707
2.window对象
常用属性:
document、location、history等,都是子级对象
常用方法:
方法名 含义
alert(text) 显示一个带有提示信息和确定按钮的警告框
prompt(text)
显示一个带有提示信息、文本输入框、确定和取消按钮的输入框,返回值为输
入的数据
confirm(txet)
显示一个带有提示信息、确定和取消按钮的确认框,确定时返回true,取消时返
回false
open(url,name,options) 打开具有指定名称的新窗口,并加载给定url所指定的文档
setTimeout(fn,delay) 设置一次性计时器,在指定毫秒值后执行某个函数
setInterval(fn,delay) 设置周期性计时器,周期性循环执行某个函数
clearTimeout(timer) 清除一次性计时器
clearInterval(timer) 清除周期性计时器
事件名 描述
onload 页面加载完成
onscroll 窗口滚动条滑动
onclick 鼠标单击
注意:由于window对象是BOM结构的顶层对象,所以在调用window的属性和方法时可以省
3.location对象
常用属性
href设置或返回地址栏中的URL
常用方法:
reload重新加载当前页面
4.history对象
常用方法:
方法名 含义
back() 后退,加载history列表中的上一个url
forward() 前进,加载history列表中的下一个url
符号 描述
\s 匹配任何的空白字符
\s 任何非空白字符
\d 匹配一个数字字符,等价于[0-9]
\D 除了数字之外的任何字符
\w 匹配一个数字、下划线或字母字符
\W 任何非单字字符,等价于匹配非数字、非下划线或非字母字符 �
. 匹配除换行符之外的任意字符 /html>
九、数据校验
1.正则表达式
1.1简介
正则表达式是一门独立的语言,有自己的语法,用于检测指定字符串是否符合特定规则
正则表达式就是用来定义规则的,称为Regular Expresstion在JavaScript中提供了RegExp对象,表示正则表达式
1.2定义方式
创建正则表达式对象,两种方式 :
使用字变
var reg = /pattern/attribute;
使用构造函数
var reg = new RegExp(pattern,attribute);
说明:
pattern表示匹配模式,用于指定匹配规则,由元字符、量词、特殊符号组成
attribute 表示匹配特征,取值:i忽略大小写、g全局匹配、m多行匹配
1.3 匹配规则
元字符:具有特殊含义的字符
符号 描述
{n} 匹配前一项的n次
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项至少n次,但不超过m次 * 匹配前一项0次或多次,等价于{0,}
- 匹配前一项1次或多次,等价于{1,}
? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1} 1
符号 含义
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始,即表示行的开始
$ 匹配字符串的结束,即表示行的结束
[ ] 表示可匹配的列表
( ) 用于分组
| 表示或者
[^] 在[ ]中的脱字符表示非
量词:指定字符出现的次数
特殊符号:具有特殊含义的符号
注: [\u4E00-\u9FA5] 用于匹配中文字符
1.4基本用法
使用正则表达式对象的test方法
语法:
var flag =reg.test(字符串);
判断字符串是否符合正则表达式对象所指定的模式规是,返回true或false
2.表单校验
2.1目的
客户端表单校验的目的
保证输入的数据符合要求
减轻服务器的压力
2.2实现
通过onsubmit事件绑定回调函数,判断表单数据是否符合要求
如果不符合要求,则返回false
如果符合要求,则返回true