BOM
2016-06-09 11:22
344 查看
javascript组成部分:
EMCAScript(基本语法)
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window对象常用的方法:
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
注册事件的方式:
常用的事件:
Screen(屏幕)对象
EMCAScript(基本语法)
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口 location 代表了地址栏对象。 screen 代表了整个屏幕的对象
window对象常用的方法:
open() 打开一个新的窗口。 resizeTo() 将窗口的大小更改为指定的宽度和高度值。 moveBy() 相对于原来的窗口移动指定的x、y值。 moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 setInterval() 每经过指定毫秒值后就会执行指定的代码。 clearInterval() 根据一个任务的ID取消的定时任务。 setTimeout() 经过指定毫秒值后执行指定 的代码一次。
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
<script type="text/javascript"> function showAd(){ window.open("ad.html", "_blank", "height=300px,width=300px,location=no,toolbar=no,top=100px"); } //setTimeout("showAd()",3000); var id=setInterval("showAd()",2500); function small(){ window.resizeTo(300,200); } function move(){ for(var i=0;i<50;i++){ moveBy(50,0); moveBy(0,50); moveBy(-50,0); moveBy(0,-50); } } function move2(){ moveTo(500,200); } function clearTest(){ clearInterval(id); } </script>
注册事件的方式:
方式一: 直接在html元素上注册
<body onload="ready()"> function ready(){ alert("body的元素被加载完毕了.."); }
方式二:可以js代码向找到对应的对象再注册。 推荐使用。
var bodyNode = document.getElementById("body"); bodyNode.onload = function(){ alert("body的元素被加载完毕"); }
常用的事件:
鼠标点击相关: onclick 在用户用鼠标左键单击对象时触发。 ondblclick 当用户双击对象时触发。 onmousedown 当用户用任何鼠标按钮单击对象时触发。 onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 鼠标移动相关: onmouseout 当用户将鼠标指针移出对象边界时触发。 onmousemove 当用户将鼠标划过对象时触发。 焦点相关的: onblur 在对象失去输入焦点时触发。 onfocus 当对象获得焦点时触发。 其他: onchange 当对象或选中区的内容改变时触发。 onload 在浏览器完成对象的装载后立即触发。 onsubmit 当表单将要被提交时触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function clickTest(){ alert("单击.."); } function dbClick(){ alert("双击.."); } function showTime(){ var timeSpan = document.getElementById("timeSpan"); var date = new Date().toLocaleString(); timeSpan.innerHTML = date.fontcolor("red"); } function hideTime(){ var timeSpan = document.getElementById("timeSpan"); timeSpan.innerHTML = ""; } function showInfo(){ var timeSpan = document.getElementById("userName"); timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green"); } function hideInfo(){ var timeSpan = document.getElementById("userName"); timeSpan.innerHTML = ""; } function change(){ alert("城市改变了.."); } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input type="button" onclick="clickTest()" value="单击" /> <input type="button" ondblclick="dbClick()" value="双击"/> <span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间:</span><span id="timeSpan"></span> 用户名<input type="text" onfocus="showInfo()" onblur="hideInfo()" /> <span id="userName"></span> <select onchange="change()" > <option>广州</option> <option>深圳</option> <option>上海</option> </select> </body> </html>
Screen(屏幕)对象
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。 availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。 height 获取屏幕的垂直分辨率。 width 获取屏幕的水平分辨率。
document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"<br/>"); document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"<br/>"); document.write("获取屏幕的垂直分辨率:"+screen.height+"<br/>"); document.write("获取屏幕的水平分辨率:"+screen.width+"<br/>");
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享