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方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
随机推荐
- FCC JS基础算法题(0):Reverse a String(翻转字符串)
题目描述: 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串.你的结果必须得是一个字符串. 算法: function reverseString(str) { ...
- VirtualBox安装CENTOS7.3常见问题
1 DHCP 问题无法上网解决 :sudo dhclient 2 安装宝塔面板:yum install -y wget && wget -O install.sh http://dow ...
- 剑指Offer 33. 丑数 （其他）
题目描述 把只包含质因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质因子7. 习惯上我们把1当做是第一个丑数.求按从小到大的顺序的第N个丑数. 题目地 ...
- 前台的url通过 ActionName?var1=xx&var2=yy 的形式传给特定action
本文对自己开发的基于lucene和J2EE技术的搜索引擎开发经验进行简单总结.今后可能会从性能的角度总结lucene开发经验.当数据上TB级别后,分布式lucene以及结合分布式文件系统(如HDFS) ...
- C与指针练习题4.14.1
//C与指针练习题4.14.1 //ai+1=(ai+n/ai)/2公式逼近,当ai+1=ai时,取得n的平方根 #include<stdio.h> float sq_root(float ...
- lombok安装
今天学习spring boot 时候发现的lombok挺好用的,我这个使用的是spring boot 管理的版本,如果其他的可能需要你们自己去添加版本了,开发工具使用的是idea. maven: &l ...
- LG1912 [NOI2009]诗人小G
题意 题目描述 小G是一个出色的诗人,经常作诗自娱自乐.但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以 ...
- centos7以rpm方法装mysql5.7及大坑
环境: CentOS Linux release 7.5.1804 (Core) Mysql版本: MySQL-5.7.17-1.el6.x86_64.rpm-bundle.tar 下载地址( ...
- c# 数据存储过程
什么是存储过程? 用某百科的话来说就是一堆为了完成某一功能或者某些功能的SQL语句的集合,而数据库则会将这些存储过程的方法存储到数据库中去. 优点: 1.可重用并且效率高:存储过程经过一次编译后不需要 ...
- sublime text 3 vue 语法高亮
1.下载文件 链接 https://github.com/vuejs/vue-syntax-highlight 2.sublime菜单栏->Preferences->Browse Pack ...