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方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
随机推荐
- php优秀框架codeigniter学习系列——CI_Output类的学习
这篇文章主要介绍CI核心框架工具类CI_Output. 根据CI文档自己的定义,这个类主要就是生成返回的页面给浏览器.以下选取类中的重点方法进行说明. __construct() 在构造函数中,主要确 ...
- 蓝牙协议分析(3)_BLE协议栈介绍
1. 前言 通过“蓝牙协议分析(2)_协议架构”的介绍,大家对蓝牙协议栈应该有了简单的了解,但是,肯定还有“似懂非懂.欲说还休”的感觉.有这种感觉太正常了,毕竟蓝牙协议是一个历史悠久又比较庞大的协议, ...
- java知识点归集
将工作中,或者看书的过程中碰到的自己之前没有掌握的知识点进行归纳,暂时就碰到什么写什么,后续有一定量的话进行整理: 1. list实现 相关文章:https://zhuanlan.zhihu.com ...
- Power BI中DAX的动态计算方差
我花了一点时间试图解决一个棘手的DAX表达式,那就是如何动态计算方差,下面我们认识一下这两个函数: PARALLELPERIOD 和 SAMEPERIODLASTYEAR 它能实现我们想要的结果, ...
- React Native 调用 Web3（1.x） 的正确姿势
1 创建项目 react-native init lm1 cd lm1 2 安装依赖包 yarn add node-libs-browser 3 创建 rn-cli.config.js 脚本 cons ...
- 3.1 unittest简介
3.1 unittest简介 前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG.python里面也有单元测试框架-unittest,相当于是一个python版的junit.py ...
- Git图形化界面客户端
Git图形化界面客户端大汇总 文,还在不断更新,网上搜到的同名文章都是未经同意就从这里复制过去的) 一.TortoiseGit - The coolest Interface to Git Versi ...
- struts2多文件上传-2
<!-- 多文件上传 --> <action name="UploadAction2_*" class="uploadfile.UploadAction ...
- win 10 kms 激活 后 火狐 上 https 网站 报错
原因: 系统导入了未知的根证书 影响:?? 解决方法: http://mozilla.com.cn/thread-374897-1-1.html
- UEFI+GPT双硬盘安装Win10+Ubuntu16.04双系统
转载请注明出处:http://www.cnblogs.com/willnote/p/6725594.html 安装环境 SSD+HDD双盘,Win10安装在SSD里,HDD分出来60G安装Ubuntu ...