JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则表达式

JavaScript对象

Array

JavaScript Array对象用于定义数组

• 定义
  

• 访问
  
  注意：JS数组类似于Java集合，长度类型都可变

Array对象属性

Array对象方法

String

• 定义
  

• 属性
  

• 方法
  

自定义对象

• 格式
  

• 示例
  

BOM

• Browser Object Model 浏览器对象模型

• JavaScript 将浏览器的各个组成部分封装为对象

• 组成

  • Window:浏览器窗口模型
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象

  Window

• Window:浏览器窗口对象

• 获取：直接使用 window,其中window.可省略
  

• 属性：获取其他 BOM对象
  

• 方法
  

History

• History:历史记录

• 获取：使用 window.history获取，其中window.可以省略
  

• 方法
  

Location

• Location:地址栏对象

• 获取：使用 window.location获取，其中 window.可以省略
  

• 属性
  

DOM

• Document Object Model 文档对象模型

• 将标记语言的各个组成部分封装成对象

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象
    
    

• JavaScript 通过DOM,就能够对 HTML进行操作了。

• 改变HTML元素的内容

• 改变HTML元素的样式（css）

• 对HTML DOM事件作出反应

• 添加删改HTML元素

• DOM是W3C(万维网联盟)的标准

• DOM定义了访问HTML和XML文档的标准

• W3CDOM 标准被分为3个不同的部分：
  1.核心DOM:针对任何结构化文档的标准模型

• Document:整个文档对象

• Element:元素对象

• Attribute:属性对象

• Text:文本对象

• Comment:注释对象
  2.XML DOM:针对 XML 文档的标准模型
  3.HTML DOM:针对 HTML文档的标准模型

• Image:< img >

• Button:< input type = ‘button’ >

获取 Element

• Element:元素对象

• 获取：使用Document对象的方法来获取
  1 . getElementById:根据 id 属性值获取，返回一个 Element 对象
  2.getElementByTagName:根据标签名称获取，返回Element对象数组
  3.getElementByName:根据name属性值获取，返回Element对象数组
  4.getElementByClassName:根据class属性值获取，返回Element对象数组

• Element:元素对象

• 使用：查阅文档

事件监听

• 事件:HTML事件是发生在HTML元素上的“事情”。比如：
• 按钮被点击
• 鼠标移动到元素之上
• 按下键盘按键
• 事件监听:JavaScript 可以在事件被侦测到时执行代码

事件绑定

• 事件绑定有两种方式：

  • 方式一：通过 HTML标签中的事件属性进行绑定
    

  • 方式二:通过 DOM元素属性绑定
    

  常见事件

  

• Event代表事件对象

案例：表单验证

1.当输入框失去焦点时，验证输入内容是否符合要求

• 获取表单输入框
  

• 绑定 onblur事件
  

• 获取输入内容
  

• 判断是否符合规则
  

• 如果不符合规则，则显示错误提示信息
  2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合则阻止表单提交

• 获取表单对象
  

• 为表单对象绑定 onsubmit
  

• 判断所有输入框是否都符合要求，如果符合则返回 true,如果有一项 不符合，则返回 false

正则表达式

• 概念：正则表达式定义了字符串组成的规则

• 定义：
  1.直接量:注意不要加引号
  
  2.创建 RegExp 对象
  

• 方法：

  • test(str):判断指定字符串是否符合规则，返回true或 flase

• 语法：

  • ^:表示开始
  • $:表示结束
  • []:代表某个范围内的单个字符，比如：[0-9]单个数字字符
  • .:代表任意单个字符， 除了换行和行结束符
  • \w:代表单词字符：字母、数字、下划线（_）,相当于[A-Za-z0-9]
  • \d:代表数字字符：相当于[0-9]
  • 量词：
    +：至少一个
    
    *：零个或多个
    ？：零个或一个
    {x}:x个
    {m,}至少m个
    {m,n}:至少 m 个，最多 n个