JavaScript每日一学 —— 第十天-CSDN博客

var btn = document.getElementById('btn')
btn.onclick = function(){
    var a = confirm('你确认提交吗？') //点击了确定a的值就是true,点击了取消a的值就是false
    if(a){
        alert('确认')
    }else{
        document.write('这个页面不改变')
    }
}

4.close() 关闭浏览器窗口 close()方法用于关闭浏览器窗口

语法：window.close（）;

5.open() 打开一个窗口

var btn = document.getElementById('btn')
btn.onclick = function(){
    // 参数1表示打开窗口的地址
    // 参数2表示是否在新窗口打开
    // 参数3表示窗口样式，存在兼容问题，有些浏览器起作用，有些不起作用
    // window.open('https://www.jd.com', '_self') 当前窗口
     window.open('https://www.jd.com', '_target') 新窗口
    window.open('https://www.jd.com', '_target', 'width=50; height=200')
}

6.setInterval 定时器,每隔一段时间程序会自动执行

setInterval(callback, 毫秒)

clearInterval('定时器的序号')

注意：

每一个定时器都会返回一个唯一的序号（定时器的id号，用于关闭定时器）

定时器的序号默认都是从1开始的，但是由于浏览器内置的插件或者咱们主动安装的一些插件的影响，导致开启定时器的序号有可能不是从1开始的

定时器累加问题

当连续点击开起定时器按钮时，相当于一次性开启了很多个定时器，当你点击关闭按钮时关闭的是当前的定时器，之前的定时器是没有被关闭的，因此形成定时器累加问题

解决方案

先清除，再开启

var aBtn = document.getElementsByTagName('button')
var timer = null
var i =0
aBtn[0].onclick = function(){
    //先清除，再开启
    clearInterval(timer)
    timer = setInterval(function(){
        i += 1
        console.log('定时器序号', timer)
    }，1000)

//清除定时器
aBtn[1].onclick = function(){
    clearInterval(timer)
}

function fn(a){
    console.log(123)
    console.log(a)
}
//fn()有两层含义：表示函数调用 表示接收函数的返回值
//给函数名称加括号设置了一个引号，表示不是函数自己调用自己
//而是通过定时器去调用它（这个时候定时器内部会默认去执行eval函数）
setInterval("fn('王成')", 1000)

7. setTimeout延时器，只会执行一次，类似于生活的定时炸弹

setTimeout(callback, 毫秒)

clearTimeout('延时器的序号')

注意

每一个延时器都会返回一个唯一的序号（延时器的id号，用于关闭延时器）

延时器的序号默认都是从1开始的，但是由于浏览器内置的插件或者咱们主动安装的一些插件的影响，导致开启延时器的序号有可能不是从1开始的

var timer = null
timer = setTimeout(function(){
    console.log('王成炸了')
},3000)
clearTimeout(timer)

三、location地址栏对象

1、hostname 设置或返回当前URL的主机名

2、href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;

3、pathname：文件路径及文件名

4、protocol：协议，如：http://、ftp://

5、hash：锚点名称。如：#top 哈希

6、reload([true])：刷新网页。true参数表示强制刷新 location.search 获取查询字符串

7.search 拿到查询字符串，如username=zhanhgsan&password=123

var btn = document.getElementById('btn')
btn.onclick = function(){
    // reload(true) 如果传递一个true作为参数那么表示强制刷新（不走缓存）
    location.reload(true)
}

8. meta表示源信息：专门用来配置网页头部信息的

表示刷新页面，和几秒后跳转到某个网页

四、history对象

1、back（）后退

2、forward（）前进

3、go（）

4、history.back（）=== history.go（-1）浏览器中的后退

5、history.forward() === history.go ( 1 ) 浏览器中的前进

五、screen屏幕对象

1、width：返回屏幕的宽度，只读属性。 window.screen.width

2、height：返回屏幕的高度，只读属性。 window.screen.height

3、availWidth：屏幕的有效宽度，不含任务栏。只读属性。

4、availHeight：屏幕的有效高度，不含任务栏。只读属性。

六、navigator对象

navigator对象：指的是浏览器软件信息

1、appName：浏览器软件名称 appCodeName 浏览器软件名称现在没有多大参考意义了

2、appVersion：浏览器软件的核心版本号。

3、platform：平台

4、userAgent浏览器版本信息（记住）

七、windows对象事件

1.onscroll 滚动事件，当网页的滚动条滚动的时候触发这个事件

onscroll = function(){
    // 滚动距离
    // 正常的获取，但是在没有声明文档类型的时候是获取不到的
    //document.documentElement.scrollTop
    //只有在没有声明文档类型的时候才能获得到
    //document.body.scrollTop
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollTop)
}

2.onresize 窗口事件，当浏览器的窗口大小发生改变的时候触发这个事件

onresize = function(){
    //window.innerWidth
    //window.innerHeight
    if(window.innerWidth <= 1024){
        document.documentElement.style.fontSize = '80px'
    }else if(window.innerWidth <= 750){
        document.documentElement.style.fontSize = '50px'
    }

3.onload 当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)

八、DOM

1.DOM对象介绍

（1）DOM Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。

（2）DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。

（3）DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。

2.DOM的分类

（1）核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。

（2）HTML DOM：针对HTML文档提供的专用的属性方法。

（3）XML DOM：针对XML文档提供的专用的属性和方法。(了解)

（4）CSS DOM：提供了操作CSS的属性和方法。

（5）Event DOM：事件对象模型。如：onclick、 onload等。（讲事件时再说）

3.DOM中节点的类型

document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点

element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点

attribute属性节点。指HTML标记的属性

text节点。是节点树的最底节点

comment注释节点

<!-- document 表示的是文档、网页 -->
<!DOCTYPE html>
<!-- element元素节点 -->
<html lang="en">
<head>
    <!-- attribute属性节点 lang、charset、name、content -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- comment注释节点 -->
    <!-- text文本节点（最底层的）在网页中的文字、空格、换行 -->
</body>
</html>

4.DOM中的访问节点

firstChild：第1个子节点

lastChild：最后1个子节点

childNodes：子节点列表，是一个伪数组 childNodes[0]

parentNode：父节点

nodeName：节点名称返回标签名

nodeValue 属性节点的的属性值

nodeType 节点类型，返回值是数字

如果节点是元素节点，则 nodeType 属性将返回 1。如果节点是属性节点，则 nodeType 属性将返回 2。返回3是文本节点。如果是注释节点，返回8。如果是文本节点，返回3

5.访问元素节点

firstElementChild：访问第一个元素节点

lastElementChild：访问最后一个元素节点