JavaScript学习-4——DOM对象、事件
本章目录
--------window对象
--------document对象
--------事件
一、window对象
函数调用：
自己封装的函数只写：函数名()；
数学函数Math 例：绝对值：Math.abs()
window.Name();调用函数
window.top;调用属性
①打开新窗口
window.open(“一”,“二”,“三”,“四”)
第一部分：页面地址
第二部分：打开方式_blank在新窗口，_self在自身打开
第三部分：控制窗口，用空格隔开
toolbar=no新打开的窗口无工具条
menubar=no无菜单栏 status=no无状态栏
width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离
resizable=no窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏
②关闭指定窗口
window.close();关闭当前窗口
a.close();关闭a窗口
array[i].close();关闭多个窗口，创建数组存储多个窗口
window.opnner.close();关闭打开窗口的源窗口
③间隔和延时
window.setInterval("要执行的代码"，间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码
window.setTimeout("要执行的代码"，延迟的毫秒数)
window.clearTimeout(延迟的id)；清除setTimeout，一般延迟执行较为常用。
例如每间隔1s打开一个新窗口：
<script> function Show(){ window.open("1.html","_blank"); } window.setInterval("Show()",1000); </script>
清除间隔：
<body> <input type="button" value="清除间隔" onClick="Clear()" /> <script> function Show(){ window.open("1.html","_blank","width='100',height='100'"); } var a = window.setInterval("Show()",3000); function Clear(){ window.clearInterval(a); } </script> </body>
④页面操作
window.navigate("url") ；跳转页面；
window.moveTo(x,y)； 移动页面
window.resizeTo(宽，高)； 调整页面
window.scrollTo（x,y）；滚动页面至哪里。该方法可行，其他方法因浏览器原因，有不同表现
⑤历史对象
window.history对象
属性：
length返回浏览器历史列表中的元素数量。
方法：
.back();加载 history 列表中的前一个 URL，返回。
.forward();加载 history 列表中的下一个 URL，前进。
.go(n); 加载 history 列表中的某个具体页面。n是正数代表前进n个页面，n是负数代表后退n个页面。
⑥window.location对象
location 对象包含有关当前 URL 的信息。
href 属性设置或返回当前显示的文档的完整 URL。
var s = window.location.href;获取当前 页面的地址
window.location.href="http://www.baidu.com";修改页面地址，会跳转页面
host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号。
hostname 属性设置或返回当前 URL 的主机名。
pathname 属性设置或返回当前 URL 的路径部分。
port 属性设置或返回当前 URL 的端口部分。
protocol 属性设置或返回当前 URL 的协议。
search 属性设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
⑦显示屏幕
Screen 对象包含有关客户端显示屏幕的信息。
对象属性：
height属性返回屏幕高度
width属性返回屏幕宽度
二、document对象
document对象，使我们脚本中对 HTML 页面中的所有元素进行访问。
①找到元素
id找到元素
getElementById() ;
class找到元素
getElementsByClassName();
标签名找
getElementsByTagName() ;
表单元素
getElementsByName() ;
②操作内容
（例如一个div标签<div id="aa"></div>）
获取内容
var a =document.getElementById("aa")
修改内容
——aa.innerText="添加文本";
——aa.innerHTML="<a>添加</a>"
③获取属性
找到属性
.getAttribute("属性名");
添加属性
.aa.setAttribute("属性名","属性值")
移除属性
.removeAttribute("属性名");
④获取样式
（例如一个div标签<div id="aa"></div>）
document.getElementById("aa").style.backgroundColor="red";
三、事件
①鼠标事件
onclick 鼠标点击。
ondbonlclick 鼠标双击。
onmousedown 事件会在鼠标按键被按下时发生。
onmouseup 事件会在鼠标按键被松开时发生。
onmouseover 事件会在鼠标指针移上时发生。
onmousemove 事件会在鼠标指针移动时发生。
onmouseout 事件会在鼠标指针移出指定的对象时发生。
②窗口图片
onresize 事件会在窗口或框架被调整大小时发生。
onunload 事件在用户退出页面时发生。
onload 事件会在页面或图像加载完成后立即发生。
onerror 事件会在文档或图像加载过程中发生错误时被触发。
onabort 事件会在图像加载被中断时发生。
③表单元素
onselect 事件会在文本框中的文本被选中时发生。
onblur 事件会在对象失去焦点时发生。
onchange 事件会在域的内容改变时发生。
onfocus 事件在对象获得焦点时发生。
onsubmit 事件会在表单中的确认按钮被点击时发生。
onreset 事件会在表单中的重置按钮被点击时发生。
④键盘事件
onkeydown 事件会在用户按下一个键盘按键时发生。
onkeyup 事件会在键盘按键被松开时发生。
onkeypress 事件会在键盘按键被按下并释放一个键时发生。
event.keyCode;属性返回onkeypress事件触发的键的值的字符代码，或者onkeydown 或 onkeyup事件的键的代码。
event. which 属性返回onkeypress事件触发的键的值的字符代码，或者onkeydown 或 onkeyup事件的键的代码。
例子：
在文本框中按下空格键弹窗
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="text" name="a" onKeyDown="Show(event)" /> </body> </html> <script> function Show(event){ var a = event.keyCode; if(a==32){ alert("按下了空格键"); } } </script>
按键返回值参照表：
Js使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以触发js事件的函数，我们可以认为事件是可以被js侦测到的一种行为。
事件主要分为冒泡型事件、以及捕获型事件。目前ie只支持冒泡型事件。火狐、Chrome等支持捕获型
使用返回值改变元素的默认行为：
HTML大多数元素包含默认行为，例如：超链接、提交按钮等，可以通过添加return flase来阻止默认事件发生。
通用型绑定事件的方法
绑定HTML元素属性<input type="button" vlaue="按钮" onclick="Btn()" />
绑定DOM对象属性document.getElementById("btn").onclick;
浙公网安备 33010602011771号