JS之BOM的window对象

javascript组成部分：
　　EMCAScript（基本语法）

　　DOM
　　BOM( Browser Object MOdel) 浏览器对象模型.

1、BOM
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。

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

2、window对象常用的方法：

open() 打开一个新的窗口。

　　其有四个属性，第一个为URL地址；第二个是窗口打开的方式；第三个是窗口打开的大小、地址栏是否存在、工具栏是否存在、距离窗口的位置等等；第四个参数时如果　　 URL找不到就用这个取代
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。

<head>
<script type="text/javaScropt>
    function showAd(){
            open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");        
    }
    
    setTimeout("showAd()",2000);
    
    //var id = window.setInterval("showAd()",2000);
    
    
    function small(){
        resizeTo(300,200); //相对于原本窗口改变指定的大小。    
    }
    
    
    function move(){
        for(var i = 0 ; i<100 ; i++){
            window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值。    
            moveBy(0,50);
            window.moveBy(-50,0);
            window.moveBy(0,-50);
        }
    }
    
    function move2(){
        window.moveTo(500,200);    
    }
    
    
    
    /*
    function clearTest(){
        window.clearInterval(id);    
    }
    */

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <input type="button" onclick="showAd()" value="下载电影"/>
    <input type="button" onclick="small()" value="变小"/>
    <input type="button" onclick="move()" value="moveBy"/>
     <input type="button" onclick="move2()" value="moveTo"/>
      <input type="button" onclick="clearTest()" value="取消定时任务"/>
     
</body>

3、window中常用事件

事件：
注册事件的方式：

　　方式一：直接在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>

posted @ 2017-02-26 15:34 mslog 阅读(1074) 评论(0) 编辑收藏举报

刷新页面返回顶部

mslog

JS之BOM的window对象

公告