学习时间
2021-03-03
学习内容
BOM:浏览器对象模型(Browser Object Model )
概念:
浏览器的各个组成部分封装为对象
特点:
BOM对象不能自己创建,当文档加载进内存,浏览器自动创建。
组成:
Window():窗口对象
Location():地址栏对象
History():历史记录(当前窗口)对象、
Navigator :浏览器对象
Screen:显示器屏幕
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
Window:窗口对象
使用方式:
window.方法名(); window 可以省略
方法名;
方法:
与弹出有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
与定时器有关的方法
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
参数:
参数1:字符串(js语句)或者 函数对象
参数2:毫秒值。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
与打开关闭有关的方法:
open():打开新窗口
- 参数:打开目标的URL
- 返回值:返回新打开窗口的window引用
close():关闭窗口
- 谁调用, 关闭谁。
属性:
获取其他对象的属性:
- history :对 History 对象的只读引用
- location :用于窗口或框架的 Location 对象
- Navigator 对 Navigator 对象的只读引用
- Screen 对 Screen 对象的只读引用
- document:对 Document 对象的只读引用
DOM:文档对象模型(Document Object Model)
概念:
将标记语言文档的各个组成部分 封装为对象
组成:
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
Document:文档对象
获取:
window.document
document 中 body属性 可以获取body标签对象
document.body.bgColor = “red”;
title 属性获取文档标题
var bt = document.title;
获取文档最后一次修改时间
var rq=document.lastModified;
URL 属性 获取地址栏中的地址
方法:
获取Element对象
getElementById():通过id属性值获取唯一的元素
getElementsByTagName():通过标签名称获取元素对象数组
getElementsByName():通过name属性值获取元素对象数组
getElementsByClassName():通过class属性值获取元素对象数组
创建其他对象
createElement:创建元素对象
createAttribute:创建属性对象
createComment:创建注释对象
createTextNode:创建文本对象
给属性对象设置值
font1.setAttribute(‘color’,‘yellow’);
Element:元素对象
innerHTML属性:获取或设置元素的子内容
innerTEXT属性:获取标签之间的文本内容
事件
概念:
事件:一件事
事件源:事件发生的组件。
监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
注册监听:将监听器绑定到事件源上,监听事件的发生
js中注册监听的方式:
在定义标签时,添加 事件名称属性 属性值是js代码
js代码会被自动封装到一个function函数的方法体中
1.获取元素对象
var input = document.getElementById(“username”);
2.注册监听
input.onclick = function(){
//alert(“hehe”);
}
js中事件的种类:
焦点事件:
onfocus 元素获得焦点。
onblur 元素失去焦点
点击事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
加载与卸载事件
onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。 其他浏览器不支持 IE支持
其他事件:
针对表单
onchange 域的内容被改变。 比如下拉框
onselect 文本被选中。
/* 事件:一件事情
事件源:组件 标签
事件处理:处理函数
绑定事件:如何让这个标签具有这个事件
事件类型:单击,双击,
*/
//绑定事件的方式1:将事件写到标签内部
function show(){
alert(this);
alert(“谈了”);
}
//show();
//alert(this);
//方式2:使用代码来绑定
// document.getElementById(“btn1”).οnclick=function(){
// alert(“谈了”);
// }
var bts=document.getElementsByTagName(“button”);
for(var i=0;i<bts.length;i++){
bts[i].οndblclick=function(){
//alert(“谈谈”);
//this 当前的元素
//alert(this);
this.style.background=“red”;
}
}