016Day-移动端事件、BOM、windows对象常用方法、定时器方法、计时牌练习

最新推荐文章于 2023-07-21 22:58:42 发布

VIP文章码小白的求学之路

最新推荐文章于 2023-07-21 22:58:42 发布

阅读量225

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/108310349

版权

一、移动端事件介绍

<style>
        div{
    
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.querySelector("div");
    div.ontouchstart = function () {
    
        console.log ("触屏开始");
    }
    div.ontouchend = function () {
    
        console.log ("触屏结束");
    }
    div.ontouchmove = function () {
    
        console.log ("触屏中");
    }
</script>

二、移动端事件属性

移动端事件属性
touches: TouchList {0: Touch, length: 1}
屏幕上所有的触摸点的信息。
targetTouches: TouchList {0: Touch, length: 1}
响应事件的元素对象上面的所有的点的信息
changedTouches: TouchList {0: Touch, length: 1}
触发当前事件的屏幕上的触摸点的信息

<style>
        div {
    
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.querySelector ("div");
    div.ontouchstart = function (e) {
    
        e = e || window.event;
        console.log (e);
    }
</script>

三、BOM介绍

js的三大组成部分：
1：ECMAScript
js的核心。规定了js的基本语法，基本类型，流程控制，函数、对象等等。
2：DOM：Document Object Model
规定了如何通过js访问页面文档。核心对象是 document。
document 是规范的核心，用于让各个浏览器厂商来表示页面文档对象的。
通过document对象就可以访问整个页面的文档。
3：BOM：Broswer Object Model
BOM 也是js 的规范的一部分。规定了如何通过js语言来访问浏览器对象。
在BOM中代表了整个浏览器窗口对象的对象是 window 对象。
【window 对象是各个不同浏览器厂商根据BOM规范提供给js用于访问自己浏览器对象的对象。】
学习BOM 就是学习window对象的使用。
window对象的使用：
window对象的属性+方法的学习。
window对象的很多重要的属性也是对象。还要学习window对象的属性的属性和方法。
document对象就是window对象的一个属性对象。

四、 window对象介绍

window对象：
1：window对象是BOM的核心，是BOM规范中的顶层对象。代表了当前的浏览器窗口对象。
2：通过window对象可以访问整个浏览器窗口中的内容。
3：window对象是一个全局对象，直接使用即可。document对象就是window对象的一个属性。作为window对象的属性和方法，都是可以直接使用的。也可以通过[window.属性|方法]来访问。
4：如果在全局作用域下，定义的全局变量或者是全局函数，那么也会作为window对象的属性和方法存在。
5: 如果在全局作用域下使用 this ，那么this 代表了window对象。全局函数中的this同样也代表了window对象。可以使用this 来区分同名的局部变量和全局变量。
6：对于window对象来说，该对象不需要创建，当浏览器窗口被打开的时候，该对象就已经创建好了，直接使用即可。而且一个浏览器窗口对应一个window对象。多个浏览器窗口就对应多个window对象。通过不同的window对象访问不同的浏览器窗口。当窗口被关闭的时候，对应的window对象被销毁。
补充：函数中的this，代表了当前对象。代表了当前调用该方法的对象。

<script>
    console.log (window);
    var num = 10;
    console.log (window.num);
    function test() {
    
        console.log (1);
        var num = 100;
        console.log (num);//局部的
        console.log (this.num);//全局的
        console.log (window.num);//全局的
        console.log (this === window);//true
    }

    console.log (this === window);//true

    window.test();

    var obj = {
    
       name:"小刚",
       study:function () {
    
           console.log (this);
       }
    }
    obj.study();

</script>

五、 window对象的常用方法

window对象的常用方法：
1：alert(msg): 警告提示框
在当前窗口中弹窗显式实参的内容。弹窗的显示的风格取决于浏览器。
而且该方法具有暂停当前程序执行的功能。阻塞式方法。只有点击了确定，才能继续后续代码的执行。
返回：void
2：confirm(msg): 确认提示框
用于确认某些操作的，自带确定取消按钮。
返回：布尔。点击确定返回true，点击取消返回false。
3: prompt(msg) : 输入框，返回输入的内容，string类型。
4：isNaN(num): 用来判断当前实参是否是NaN的。如果是返回true，否则返回false。
5: isFinite(num): 判断实参是否是有穷数。是true，不是false。

<script>
    //alert
    window.alert("轻轻的我将离开你，请将眼角的泪拭去！");
    console.log ("hello");

    //confirm
    var con = window.confirm("轻轻地我将离开你？");
    console.log (con);

    window.prompt("请输入你的目前资产？");

    console.log (window.isNaN(NaN));//true

    console.log (window.isFinite(Infinity));//false

</script>

六、 window对象的常用方法-open

window对象的常用方法：open
作用：用来打开一个浏览器窗口对象。
语法：window.open(url,windowName,windowFeature)
url: 打开的窗口的默认打开的网址信息。string
url 省略：about：blank
windowName：给窗口起的名字。如果已经存在改名字的窗口，那么会在已经存在的窗口中打开新内容。不会打开新窗口。
省略：_blank
windowFeature：窗口的属性信息。
返回：新的窗口对象。

<script>
    var div = document.createElement('div');
    div.style.width = "200px";
    div.style.height = "200px";
    div.style.backgroundColor = "red";
    div.onclick = function(){
    
        //打开空白窗口。
        // window.open();
        var newWin = window.open("http://www.163.com","neteasy","width=300,height=300,top=300,left=300");
        console.log (newWin);
    };
    document.body.appendChild(div);

</script>

七、 window对象常用方法

window对象常用方法：
window.close():
作用：关闭当前窗口对象。
自己关闭自己：测试结果。谷歌、火狐、IE都可以

<style>
        div{
    
            wi

最低0.47元/天解锁文章

码小白的求学之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
016Day-移动端事件、BOM、windows对象常用方法、定时器方法、计时牌练习

一、移动端事件介绍<style> div{ width: 300px; height: 300px; background-color: red; } </style></head><body><div></div><script> var div = document.querySelecto
复制链接

扫一扫