js笔记

一，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