今日内容
- ECMAScript
- BOM
- DOM:
- 事件
- 事件
1 事件简单学习
1.1 功能:某些组件被执行了某些操作后,出发某些代码的执行
如:xxx被xxx,我就xxx
我方水晶杯摧毁后,我就责备队友
1.2 如何绑定事件
- 直接在html标签上,指定事件的属性(操作),属性值就是js代码
onclick:单击事件 - 通过js获取元素对象,指定事件属性,设置一个函数
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun() {
alert('我被点了');
alert('我又被点了');
}
function fun2() {
alert('你咋老点我?');
}
//获取light2对象
var light2 = document.getElemnetById("light2");
//绑定事件
light2.onclick = fun2;
</script>
</body>
- 案例1:电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
//1.获取图片对象
var light = document.getElementById("light");
//绑定单击事件
var flag = true;
light.onclick = function () {
if(flag) {
//如果灯是灭的,则开开
light.src = "img/on.gif";
flag = false;
}else {
//如果灯是开的,则灭掉
light.src = "img/off.gif";
flag = true;
}
}
</script>
</body>
</html>
2 BOM
2.1 概念:Browser Object Model浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.2 组成:
- Window:窗口对象
- History:历史记录对象
- Location:地址栏对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
2.3 Window:窗口对象
- 创建
- 方法
- 与弹出框有关的方法:
- alert() 显示带有一段消息和一个确认按钮的警告框
- confirm() 显示带有一段消息以及确认和取消按钮的对话框
*确定:返回true
*取消:返回false - prompt() 显示可提示用户输入的对话框
*返回值:获取用户输入的值
- 与打开关闭有关的方法:
- close() 关闭浏览器窗口
*谁调用,关谁 - open() 打开一个新的浏览器窗口
*返回新的Window对象
- close() 关闭浏览器窗口
- 与定时器有关的方法
-
setTimeout() 在指定的毫秒数后调用函数或计算表达式
*参数:- js代码或者方法对象
- 毫秒值
*返回值:唯一标识,用于取消定时器
-
clearTimeout() 取消由setTimeout()方法设置的timeout
-
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
-
clearInterval() 取消由setInterval()设置的timeout
-
- 与弹出框有关的方法:
- 属性:
- 获取其他BOM对象:
history
location
Navigator
Screen - 获取DOM对象
document
- 获取其他BOM对象:
- 特点
- Window对象不需要创建可以直接使用
window.方法名(); - window引用可以省略。
方法名();
- Window对象不需要创建可以直接使用
2.4 Location:地址栏对象
- 创建(获取):
- window.location
- location
- 方法
reload()重新加载当前文档。刷新 - 属性
href 设置或返回完整的URL
2.5 History:历史记录对象
- 创建(获取):
- window.history
- history
- 方法
- back() 加载history列表中的前一个URL
- forward() 加载history列表中的下一个URL
- go(参数) 加载history列表中的某个具体页面
参数:
正数:前进几个历史记录
负数:后退几个历史记录
- 属性
length 返回当前窗口历史记录列表中的URL数量
3 DOM
3.1 概念:Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
- W3C DOM标准被分为三个不同的部分:
- 核心DOM:针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM:针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
- 核心DOM:针对任何结构化文档的标准模型
3.2 核心DOM模型
- Document:文档对象
- 创建(获取):
- window.document
- document
- 方法
- 获取Element对象:
- getElementById():根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象:
- createAttribute(name)
- createComment()
- createElement()
- createTestNode()
- 获取Element对象:
- 属性
- Element:元素对象
- 获取/创建:通过document来获取和创建
- 方法:
- removeAttribute():删除属性
- setAttribute():设置属性
- Node:节点对象,其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
CRUD dom数:
*appendChild():向节点的子节点列表的结尾添加新的子节点。
*removeChild():删除(并返回)当前节点的指定子节点
*replaceChild():用新节点替换一个子节点 - 属性:
parentNode:返回当前节点的父节点
- 创建(获取):
3.3 HTML DOM
- 标签体的设置和获取:innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
//修改样式方式一 div1.style.border = "1px solid red" div1.style.width="200px"; //font-size-->fontSize div1.style.fontSize="20px";
- 使用元素的style属性来设置
4 事件监听机制
4.1 概念:某些组件被执行了某些操作后,出发某些代码的执行。
- 事件:某些操作。如:单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如:按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码。
4.2 常见的事件
- 点击事件:
- onclick:单击事件
- ondblclick:双击事件
- 焦点事件:
- onblur:失去焦点
- onfocus:元素获得焦点
- 加载事件
- onload:一张页面或一副图像完成加载
- 鼠标事件
- onmousedown:鼠标按钮被按下。
- onmouseup:鼠标按键被松开
- onmousemove:鼠标被移动
- onmouseover:鼠标移到某元素之上。
- onmouseout:鼠标从某元素移开。
- 键盘事件:
- onkeydown:某个键盘按键被按下
- onkeyup:某个键盘按键被松开
- onkeypress:某个键盘按键被按下并松开
- 选择和改变
- onchange 域的内容被改变
- onselect 文本被选中
- 表单事件
- onsubmit 确认按钮被点击
- onreset 重置按钮被点击