上午
重点案例:表单登录验证(项目会用到)
- BOM定义:Browser Object Model)浏览器对象模型,是Javascript的核心。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。(简单说就是浏览器厂商给我们的权限)
例如:页面刷新、页面后退
2.window对象(属性和方法)
对象有【属性和方法(都是函数,有括号)】
【this是个关键字,指向被调用者】,谁在调用就是谁的
例子:window.() 这里的指向就是window,所有This指向就是【被调用者】
【this没有指向的话 ,默认就是window】
实际上就是在window下创建了一个自定义的属性
var a =10;
document.write(a); 简写
也可以这样写,为什么直接写a也行。因为直接属于window对象的属性和方法可以简写
document.write(window.a)点语法
document.write(window['a'])方括号方法 a不加引号会报错
- 调用对象的属性和方法有2种
1、document.write(window.a) 点语法
2、document.write(window[‘a’]) 方括号方法 a不加引号会报错
忘记点:
1、截取数组 slice()
2、截取字符串: slice() splice() substr()
下午学习
1、BOM五大直属对象
2、DOM元素的获取
3、DOM属性操作
DOM元素获取
- getElementById(): 获取特定【 ID 元素的节点--最优】
- getElementsByTagName(): 获取相同元素的节点列表,返回类数组,使用[0]来获取 【集合】
- getElementsByClassName(): 获取相同类名的节点列表(IE8及以下不支持),返回类数组 【集合】
- querySelector(): 通过【选择器获取元素】,如果获取多个只返回第一个。
- querySelectorAll(): 通过选择器获取元素,可同时获取多个元素,类数组。【集合】
DOM属性操作
注意:【自定义标签和自定义属性的掌握 是对HTML CSS的提升,新的认知 HTML5是支持的】
- 自定义属性及getAttribute等方法
- getAttribute() 【获取】特定【元素节点属性的值】,
- setAttribute() 设置特定元素节点属性的值,
- removeAttribute() 移除特定元素节点属性,
**3、window对象直属分类对象
screen 屏幕
location 网址信息
location.hash 获取的是锚点的值 (hash就是#意思)
history 历史记录
document (DOM属于BOM)
document
1. document.documentElement 的兼容问题【加个||】
document.documentElement || document.body
2.获取的关于高度和宽度的问题
clientWidth、clientHeight 可视宽高
scrollWIdth、scrollHeight 实际宽高
scrollLeft、scrollTop 被滚动条卷去的宽高
3.事件
onscroll 滚动条事件
onresize 窗口缩放
onload 等待页面所有资源加载完毕之后再加载js的事件
4.案例
返回顶部
吸顶效果
监听窗口 --- 移动端适配
滑到底部的判断 --- 滚动高度 - 可视高度 == 被卷去的高度
navigator 浏览器**