JavaScript学习总结(六)

我们知道,JavaScript共由三部分组成:EMCAScript(基本语法)、BOM(浏览器对象模型)、DOM。
在浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作

下面我们来介绍一下浏览器对象模型的基本的对象:

window  代表了一个新开的窗口
location 代表了地址栏对象。
screen  代表了整个屏幕的对象

window对象常用的方法

//open()   打开一个新的窗口(参数一:打开的地址,参数二:是否为新的浏览器窗口,参数三:新窗口属性,参数四:用来替代的地址)
window.open("2.html","_blank","height=400px,width=600px,toobar=no,location=yes,top=200px","用来替代的地址");

//resizeTo() 将窗口的大小更改为指定的宽度和高度值
window.resizeTo(300,200);

//moveBy()  相对于原来的窗口移动指定的x、y值
window.moveBy(100,0);//谷歌浏览器貌似不支持了

//moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。 
window.moveTo(100,0);//谷歌浏览器貌似不支持了

//setInterval() 每经过指定毫秒值后就会执行指定的代码


//clearInterval() 根据一个任务的ID取消的定时任务


//setTimeout() 经过指定毫秒值后执行指定 的代码一次

事件

定义:当发生一个事件之后,会触发特定的方法
那么如何注册一个事件呢?

  • 事件的注册方式
 //方式一: 直接在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 当表单将要被提交时触发。 

location对象

此对象是浏览器地址栏对象,所以我们能够改变地址栏信息,或者进行其他的一些改变。
想要获取到url只需要使用location.href即可。
有两个比较常用的东西:

//href : 设置以及获取地址栏的对象
location.href = "http://www.baidu.com";//每天总在莫名其妙的给百度打广告。。

//reload() 刷新当前的页面
location.reload();

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/>");

这一讲我们学习的是BOM(浏览器对象模型)
从下一节开始,我们将开始学习JavaScript的最后一个部分,DOM编程。

posted @ 2018-02-26 20:41  roobtyan  阅读(136)  评论(0编辑  收藏  举报