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方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
随机推荐
- Quartz在Spring中动态设置cronExpression
什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定). 这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户修改配置文 ...
- CCF-权限查询-201612-3
这道题,开始只有10分.....原因是将false 写成了 flase 我要吐血而亡....关键是还debug了半天,以为是逻辑错了 不过亮点是代码很简洁,网上140+的代码看着真复杂 核心: 做题之 ...
- PHP常见错误级别及错误码
数字 常量 说明 1 E_ERROR 致命错误,脚本执行中断,就是脚本中有不可识别的东西出现 举例: Error:Invalid parameters. Invalid parameter name ...
- （28）django的中间件（自定义中间件和防范跨站请求伪造攻击）-重要的概念
Django中间件和中间件不是同一种东西 什么是中间件:中间件是一个很大的概念,只要程序和程序之间还有一层程序,用来处理两个程序的整个交互过程的请求.数据等等就叫中间件 Django中间件:是介于re ...
- hdu5001 Walk 概率DP
I used to think I could be anything, but now I know that I couldn't do anything. So I started travel ...
- 学习笔记TF029:实现进阶卷积网络
经典数据集CIFAR-10,60000张32x32彩色图像,训练集50000张,测试集10000张.标注10类,每类图片6000张.airplance.automobile.bird.cat.deer ...
- java 实现自定义事件
import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; i ...
- PythonStudy——Python中的None与 NULL(即空字符)的区别
None与 NULL(即空字符)的区别 (1)是不同的一种数据类型 >>>type(None) <class 'NoneType'> >>>type( ...
- BNF
Backus-Naur Form, 巴科斯-诺尔 范式:一种描述高级语言语法的表示法. BNF 符号概览 符号 描述 ::= 该符号左边的元素被该符号右边的结构所定义 *: 该符号前面的结构可以重复零 ...
- Vue 移动端常用tap事件封装
基于Vue的移动端项目,有些时间原生并没用提供,需要我们自己手动封装,可以封装一些自定义指令来供全局使用. 本文封装了 tap, swipe, swipeleft, swiperight, swipe ...