一 JS中的事件
1.1 什么是事件
事件是可以被 JavaScript 侦测到的行为
事件也是满足某些条件就可以触发指定的函数
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
1.2 事件的绑定和触发
给页面上的元素先绑定事件 然后通过行为去触发
| <!DOCTYPE html> |
|---|
1.3 常用事件演示
1.3.1鼠标事件
| <!DOCTYPE html> |
|---|
1.3.2按键事件
| <!DOCTYPE html> |
|---|
1.3.3表单事件
| <!DOCTYPE html> |
|---|
1.3.4页面加载事件
| <!DOCTYPE html> |
|---|
本节作业:
1什么是事件?事件如何绑定?
2 常见的事件都有哪些分类类?每一类都有哪些常见事件
二 BOM编程学习
2.1 认识BOM和DOM
什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象
什么是DOM
DOM是Document Object Model的简写，即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象
DOM和BOM的关系
红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的
BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象。
2.2 window对象及常用方法
什么是window对象
Window 对象描述
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
Window 对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。 |
| window | window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
- screenLeft - screenTop - screenX - screenY |
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
Window 对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
2.2.1 三种弹窗方式
| <!DOCTYPE html> |
|---|
2.2.2 定时器的使用
| <!DOCTYPE html> 当前时间:当前时间: |
|---|
2.2.3 open和close方法
open方法
| <!DOCTYPE html> |
|---|
close方法
| <!DOCTYPE html> |
|---|
注意:使用JS脚本打开的窗口才能使用JS脚本关闭,如果要使用close方法关闭当前网页,那么当前网页必须也是由JS方式打开的
2.2.4 eval方法
可以将字符串当成JS脚本运行
| <!DOCTYPE html> |
|---|
2.3 BOM中的其他常见对象
2.3.1 location对象
location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏
| <!DOCTYPE html> |
|---|
2.3.2 history对象
history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页
| <!DOCTYPE html> 百度 |
|---|
2.3.3 screen和navigator
screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息
| <!DOCTYPE html> |
|---|
本节作业:
1 什么是BOM和DOM?他们分别可以让我们完成什么事情?
2 什么是window对象?有哪些常见属性和方法?
3 实现小案例,页面加载完毕后在页面上显示系统时分秒,要求实时变化
4 准备小按钮,单击后延迟5秒跳转至京东
三 DOM编程学习
3.1 概念引入
什么是DOM编程
简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
什么是document
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
document对象如何获取
document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
DOM节点分类node
结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类
元素节点 Element 如:我的链接
属性节点 Attribute 如:href=”链接地址”
文本节点 Text 如:我的链接
DOM操作的内容
1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）
2.操作文本
3.操作属性
4.操作元素节点
5.操作CSS样式（一个特殊的属性style）
实例代码分析
| <!DOCTYPE html> x 1a hello 2b thank you 3c thank you very mucn 4d y |
|---|
树形结构图
Node节点常用的属性和方法
| 属性名称 | 类型 | 说明 |
|---|---|---|
| nodeName | String | 节点名称 |
| nodeValue | String | 节点值 |
| nodeType | Number | 节点类型 |
| parentNode | Node | 父节点 |
| firstChild | Node | 第一个子节点 |
| lastChild | Node | 最后一个子节点 |
| childNodes | NodeList | 所有子节点 |
| previousSibling | Node | 前一个节点 |
| nextSibling | Node | 后一个节点 |
| ownerDocument | Document | 获得该节点所属的文档对象 |
| attributes | Map | 代表一个节点的属性对象 |
| 方法名称 | 返回值 | 说明 |
|---|---|---|
| hasChildNodes() | Boolean | 当前节点是否有子节点 |
| appendChild(node) | Node | 往当前节点上添加子节点 |
| removeChild(node) | Node | 删除子节点 |
| replaceChild(oldNode, newNode) | Node | 替换子节点 |
| insertBefore(newNode, refNode) | Node | 在指定节点的前面插入新节点 |
3.2 直接获取节点的几种方式
| <!DOCTYPE html> 这是第一个div 这是第二个div 这是第三个div 这是第四个div 这是第五个div 爱好: 篮球 足球 羽毛球 |
|---|
3.3 间接获取节点的几种方式
先获得A节点,通过 A节点获取B节点
| <!DOCTYPE html> 1a hello 2b thank you 3c thank you very much 4d |
|---|
3.4 操作节点属性
| <!DOCTYPE html> |
|---|
3.5 操作节点样式
通过style.css样式名和通过设置class属性两种方式实现
| <!DOCTYPE html> 你好呀 |
|---|
3.5 操作标签内容
innerHtml 操作双标签中间的HTML
innerText 操作双标签中间的 Text
value 操作表单标签值
| <!DOCTYPE html> a 文字 b |
|---|
3.7 增加删除节点
创建元素createElement()
增加元素appendChild()
删除元素removeChild()
| <!DOCTYPE html> |
|---|
3.8 案例开发
<!DOCTYPE html>ARE YOU OK? |
|---|
本节作业:
1 Element元素常用方法有哪些?
2 实现小案例,参照课堂代码设计表白神器
3 在页面上实现动态添加一个超链接,一个输入框和一个按钮
4 通过按钮的单击功能,动态添加删除网页上的一个元素
5 课后自行查看关于JS的学习网站https://www.runoob.com/JS/JS-tutorial.html
若有收获，就点个赞吧
0 人点赞
