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;
JavaScript学习-4——DOM对象、事件的更多相关文章
- Javascript学习，DOM对象，方法的使用
JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
- JavaScript学习总结 之对象
JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...
- JavaScript:学习笔记(8)——对象扩展运算符
JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...
- JavaScript学习笔记之对象
目录 1.自定义对象 2.Array 3.Boolean 4.Date 5.Math 6.Number 7.String 8.RegExp 9.Function 10.Event 在 JavaScri ...
- javascript学习总结之对象的深拷贝和浅拷贝
前言 最近在写ES6的文章的时候发现重复遇到关于javascript深拷贝和浅拷贝的问题,然后查找了一些资料,根据资料和自己的理解做了以下笔记,毕竟javascript关于深拷贝和浅拷贝的问题在一些面 ...
- JavaScript学习笔记——BOM_window对象
javascript浏览器对象模型-windwo对象 BOM Browser Object Model window对象 是BOM中所有对象的核心. 一.属性 1.(位置类型-获得浏览器的位置) IE ...
- javascript总结44: DOM对象的dataset属性方式
1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
随机推荐
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- 素数定理π(n)~n/lnn弱化版证明
在大半年前写的Miller-Rabin素数测试正确性证明中使用过此结论~当时完全不会证,现在进步了一点点会证弱化版的了Orz 完整版的素数定理: π(n):=|{p|p<=n,p是素数}| li ...
- CCF-再卖菜-20180904
可以说这道题出的不错,我是用动态规划做的 ( 严谨点说应该是记忆化搜索,我是递归版本,非递归我不会啊... 题意分析: x1 x2 x3 已知 x1+x2=t1或t1+1 x1+x2+x3=t2 ...
- mysql建表规范及注意事项
表设计规范 1.库名,表名,字段名必须使用小写字母,“-”分割 ,长度不得超过12字符 , 要见名识意 : 2.建议使用Innodb存储引擎 (1)什么是存储引擎 不同的技术及配套的相关功能就是存储引 ...
- ORACLE 11g 创建数据库时 Enterprise Manager配置失败的解决办法 无法打开ORACLE企业管理器（EM）的解决办法
环境:win7 64位系统. 软件:oracle11g database ,oracle 10g client . 问题描述:在win7 64位系统下安装oracle11g,在创建数据库时,进度到85 ...
- mac添加redis 环境变量
cd /etc/paths.d touch redis vim redis 写入 /Users/love/Downloads/redis-4.0.10/src 之后就可以直接执行redis-cli r ...
- oracle-企业信息化
http://www.itpub.net/thread-1873735-1-1.html OCP考试心得 http://blog.csdn.net/rlhua/article/detai ...
- Java面向对象 第5节 抽象类和接口
一.抽象类和抽象方法 区分抽象方法和普通方法1)当一个方法被abstract修饰时,该方法成为抽象方法2)抽象类所在的类必须定义为抽象类3)抽象方法不会有具体的实现,而是在抽象类的子类中通过方法重写进 ...
- 邮件报警以及服务端能否ping通客户端的小例子（三）
就这个小小的东西,弄了一天,弄的头晕眼花,毕竟第一次弄这个,记录下来,若干年之后,回看这些笔记,不知是什么样的感想,哈哈.我学一个东西的时候喜欢系统的来,一点一点的来,做这个的时候想法很 ...
- Delphi XE5 Android 调用 Google ZXing
{ Google ZXing Call demo Delphi Version: Delphi XE5 Version 19.0.13476.4176 By: flcop(zylove619@hotm ...