JavaScript笔记整理5 -- JavaScript BOM对象与事件
BOM对象
BOM 即 Browser Object Model(浏览器对象模型)
作用:为了访问和操作浏览器各组件提供了一系列的(全局)属性和(全局)方法。
结构:
- window(浏览器窗口对象,最顶级的对象,可省略不写)
- document(当前的文档对象)
- DOM (文档对象模型,操作当前HTML文档)
- history(历史对象,记录浏览器的历史访问记录)
- location(地址栏对象,获取当前浏览器上的地址栏相关数据)
- navigator(浏览器对象,获取浏览器的相关数据,比如浏览器名称、版本…)
- screen (屏幕对象)
- document(当前的文档对象)
window 浏览器窗口对象
window对象的常用属性
window.innerWidth
功能:获取浏览器内部的宽度。
window.innerHeight
功能:获取浏览器内部的高度。
window.outerWidth
功能:获取浏览器外部的宽度。
window.outerHeight
功能:获取浏览器外部的高度。
Window对象的常用方法
Window.isNaN(str)
功能:判断字符串str是不是数字。
规则:将一个变量的数据类型自动转换为Number,如果是NaN,就返回true;否则,返回false
Window.parseInt(str)
功能:从一个字符串str提取整数。
提取规则:
- 如果字符串第一个字符不是数字就会返回NaN
- 遇到非数字就终止提取。遇到非数字就停止提取
Window.parseFloat(str)
功能:从一个字符串str提取小数。
提取规则:
- 如果字符串第一个字符不是数字就会返回NaN
- 如果遇到除第一个.以外的非数字就会停止提取。
Window.alert(str)
功能:弹出警告框,内容为字符串str 。
Window.prompt(str1,str2)
功能:弹出对话框,提示内容为str1,输入框初始内容为str2。
Window.confirm(str)
功能:弹出用户确认框,提示内容为str,当用户点击确定按钮时,返回ture;点击取消,返回false 。
Window.close()
功能:关闭当前浏览器窗口。
Window.open(url,name,options)
- url:要打开的窗口地址
- name:窗口的名称
- option:窗口特征(具体百度)
功能:在浏览器打开新的窗口,返回值代表当前打开的窗口对象(可用于调用close()方法)。
Window.setTimeout(code,MiliSec) 延时器
- code:要执行的代码,代码可以是一个(匿名)函数
- MiliSec:时间,单位:毫秒
功能:指定的时间MiliSec到了以后就执行一次code,且只执行一次。
- 起到延时器的作用
Window.setInterval(code,MiliSec) 定时器
- code:要执行的代码,代码可以是一个(匿名)函数
- MiliSec:时间,单位:ms(毫秒)
功能:每隔指定的时间就执行code,且无限次执行。
- 起到定时器的作用
- 在调用前一般注意要清除上一个定时器。
Window.clearInterval(timer) 清除定时器
- timer:要清除定时器的返回值
功能:清除指定的定时器。
例子如下:
<script type="text/javascript">
var count=0;
//定时器:开启定时器:1.调用方法 2.间隔时间
var timer=setInterval(function(){
console.log(++count);
if(count==5){
//停止定时器
clearInterval(timer);
}
},1000);
//延时器:只执行一次的定时器
setTimeout(function(){
console.log("时间到");
},5001);
### screen 屏幕对象 #### screen对象的常用属性 ##### screen.width 功能:获取屏幕的宽度。 ##### screen.height 功能:获取屏幕的高度。 - 除了windows的任务栏以外的高度。
navigator 浏览器对象
navigator对象的常用属性
navigator.appName
功能:获取浏览器的名称。
- 可用于判断浏览器的阵营,例如
if(navigator.appName=="Microsoft Internet Explorer")
判断浏览器是否为IE浏览器。
navigator.appVersion
功能:获取浏览器的版本。
location 地址栏对象
location对象的常用属性
location.href
功能:设置或者获取到浏览器地址的URL地址
- 常用于实现页面跳转
location对象的常用方法
location.reload()
功能:刷新当前浏览器。
history 历史对象
history对象的常用属性
history.length
功能:返回当前浏览器历史列表里的URL数量。
history对象的常用方法
history.back()
功能:加载history列表中的前一个URL。
history.forward()
功能:加载history列表中的下一个URL。
history.go(n)
功能:加载history列表中的某个具体页面。
- n位数字,表示前进的页面数。
- history.go(0) 相当于 location.reload()刷新当前页面
- history.go(-1) 相当于 history.history.back() 后退
- history.go(1) 相当于 history.forward() 前进
document 当前文档对象
DOM对象
DOM 即 Document Object Model(文档对象模型)
作用:为了操作HTML文档提供一些属性和方法。
- 属于w3c
对不同方面的区别:
- JS主要是对HTML文件进行增删改查
- PHP主要是对数据库进行增删改查
DOM对象的属性
document.body
功能:获取到body标签对象。
document.documentElement
功能:获取到根元素HTML标签对象。
document.forms
功能:获取到所有表单元素,返回一个集合。
document.images
功能:获取到所有图片元素,返回一个集合。
DOM对象的方法
document.getElementById(“id属性值”)
功能:id属性选择器,即通过id的属性值来获取元素,它只能获取单个元素。
docement.getElementsByTagName(“标签名”)
功能:通过标签名(例如div…)获取元素,返回数组集合。
docement.getElementsByName(“name属性值”)
功能:name属性选择器,即通过标签的name属性来获取元素,返回数组集合。
- 可以用于实现全选、反选、删除、取消功能。
document.getElementsByClassName(“class属性值”)
功能:class属性的选择器,即通过标签的class属性来获取元素,返回数组集合。
祖先对象.getElementsByTagName(“标签名”)
功能:后代元素标签选择器。
docement. createElement(“标签名”)
功能:创建标签对象,返回的是标签对象,变量名为标签的id名。
父标签对象.appendChild(标签对象)
功能:添加标签对象。
父标签对象.removeChild(标签对象)
功能:删除标签对象。
DOM对象对HTML标签内容的操作
标签对象.innerText
功能:获取或修改标签文本
标签对象.innerHTML
功能:获取或修改双标签里面的HTML内容。
DOM对象对HTML标签属性的操作
(1)查询
标签对象.
属性
标签对象.getAttribute("
属性")
(2)增、改:
标签对象.
属性=
值
标签对象.setAttribute("
属性",
值)
(3)删除:
标签对象.removeAttribute("
属性")
DOM对象对class属性的操作
方法:将class属性的修改为className。
格式:
- 标签对象
.className="
值"
- 标签对象
.setAttribute("class","
值")
DOM对象对style属性的操作–>CSS DOM
- 注意:JS只能对CSS的行内样式进行操作
行内样式为:<
标签 style="
CSS样式">
格式:标签对象.style.
css属性="
值"
事件
:比如当鼠标事件、键盘事件、状态改变事件…这些行为被称为事件。
- js是一门事件驱动式的脚本语言,即 当事件发生时,会被JS捕获到然后赋予其一些功能代码。
事件绑定的方式
补充:对于js事假绑定很好的解释,参考链接:js中事件绑定的几种方式
1. 行内绑定事件
:将事件写在HTML标签里。
格式:<
标签 事件名="
函数名()|事件的处理程序"/>
2. 动态绑定事件
:将事件名写在JS代码里面。
格式:标签对象.
事件名=
事件的处理程序
- 事件的处理程序一般是匿名函数
- 动态绑定关于匿名函数的解释,参考链接:js 动态绑定一定要匿名函数吗
3. 事件监听
:在js代码中给标签对象添加监听事件。
- W3C格式
格式:要监听的标签对象.addEvenListener('
事件名',
事件处理程序)
- 事件名没有on前缀,比如:click
- 事件的处理程序一般是匿名函数
- IE格式
格式:已监听的标签对象.attachEvent('
事件名',
事件的处理程序)
事件列表
onclick 当鼠标点击时
点击页面任何一处触发js事件:document.onclick
ondblclick 当鼠标双击时
onmousemove当鼠标移动时
onmouseover 当鼠标经过(悬停)时
onmouseout 当鼠标离开时
onmousedown当鼠标按下时
onmouseup当鼠标弹起时
onkeydown当键盘按下时
event.KeyCode------获取按钮的编码
String.fromCharCode(event.Keycode)------把按键转换成字符
onkeyup当键盘弹起时
onsubmit 当表单提交时
:主要用来实现表单验证(阻止表单的提交)
- 这个事件要绑定在form上。
阻止表单提交的方法:
form表单中 格式:onsubmit="return
函数";
函数结果包括返回值 格式:允许提交return ture;
,不允许提交return false;
。
onload 当页面加载完成后
:指当body标签里面的所有标签都加载完成后再来执行JS代码。onload事件要和window对象来绑定,即window.onload
onresize 当窗口改变时
onfocus 当获取焦点时
多用于表单验证。
onblur 当失去焦点时
多用于表单验证。
onchange 当内容发生改变时
多用于select
标签对象。