Js 基础补充

js参考手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

作用域

全局变量

在js种 一堆{} 就是一个作用域。使用var声明的变量是全局变量, 全局变量可以在任何变量的任何位置使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    {
        var number = 1
        console.log(number) //1
    }
    console.log(number) //1
</script>

<script>
    console.log(number) //1
</script>
</html>

由此看出,全局变量的生命周期并没有被{}限制着,这是因为全局变量会发生变量的提升,也就是会被提升的

在if,for,while条件的{}种使用var生命的变量都是全局变量。

局部变量

在函数内部声明的变量是局部变量。下面的js就会报错。说找不到number

<script>
   function f() {
       var number = 1
       console.log(number)
   }
    f()	
    console.log(number)
</script>

当函数被调用完后,函数占用的空间就会被释放掉。

隐式全局变量

如果函数种的变量没有被var修饰,就会自动的转换成隐式全局变量, 函数执行完后,变量所占的空间不会被释放掉。

<script>
   function f() {
       number = 1
       console.log(number)
   }
    f()	
    console.log(number)
</script>

预解析

示例1:

<script>
    console.log(number)
    var number = 1
</script>

上面的代码经过预解析会变成下面这样, 所以控制台上会输入undefined

<script>
    var number
    console.log(number)
    number = 1
</script>

示例2:下面的函数是可以正常执行的,也就是说,经过预解析,函数定义会被提前到函数的定义前面去。

<script>
   f()
   function f() {
       console.log("函数执行")
   }
</script>

示例3:

<script>
   f()
   var num = 10
   function f() {
      console.log(num)
      var num  = 20
   }
</script>

会被解析成下面这样

<script>
   function f() {
      var num
      console.log(num)
      num  = 20
   }
   f()
   var num = 10
   
</script>

所以最终的结果就是undefined

日期相关

参考手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

字符串相关

参考手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

元素创建的不同方式

方式1:document.write("")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点我创建p</button>
</body>
<script>
    document.getElementById("btn").onclick = function () {
        document.write("<p>123</p>")
    }
</script>
</html>

这种write的方式创建标签,会覆盖原来的文档流

方式2:innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv">

</div>
</body>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerHTML = "<p>123</p>"
    }
</script>
</html>

通过innerHtml创建元素,可以实现在当前元素的基础上实现累加。原文档流依然存在。

方式3:document.createElement("tagName")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv">

</div>
</body>
<script>
    document.getElementById("btn").onclick = function () {
        var pObj = document.createElement("p")
        pObj.innerText="this is a p"
            document.getElementById("dv").appendChild(pObj)
    }
</script>
</html>

事件的冒泡

什么是事件的冒泡?

事件的冒泡指的是,如果多个元素嵌套在一起,并且他们绑定了相同的事件,这时,如果内层的元素的事件被触发了,事件会往外冒泡,导致外层的事件也被触发。

如下例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv1 {
               width: 100px;
               height: 100px;
               border: 1px solid;
           }
        #dv2 {
            width: 80px;
            height: 80px;
            border: 1px solid;
        }
        #dv3 {
            width: 50px;
            height: 50px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv1">
    <div id="dv2">
        <div id="dv3">

        </div>
    </div>
</div>
</body>
<script>
    document.getElementById("dv1").onclick = function () {
        console.log(this.id)
    }
    document.getElementById("dv2").onclick = function () {
        console.log(this.id)

    }
    document.getElementById("dv3").onclick = function () {
        console.log(this.id)
    }

</script>
</html>

阻止事件的冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv1 {
               width: 100px;
               height: 100px;
               border: 1px solid;
           }
        #dv2 {
            width: 80px;
            height: 80px;
            border: 1px solid;
        }
        #dv3 {
            width: 50px;
            height: 50px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<button id="btn">点我创建p</button>
<div id="dv1">
    <div id="dv2">
        <div id="dv3">

        </div>
    </div>
</div>
</body>
<script>
    document.getElementById("dv1").onclick = function () {
        console.log(this.id)
    }
    document.getElementById("dv2").onclick = function (event) {
        console.log(this.id)
        // 谷歌和火狐支持
        event.stopPropagation()
    }
    document.getElementById("dv3").onclick = function () {
        console.log(this.id)
        // 谷歌和IE支持
        window.event.cancelable=true
    }

</script>
</html>

页面加载事件

<script>
	   // 页面加载完毕后会执行这个方法 
        window.onload=function () {
            
        }   


	   // 页面关闭后执行,ie8支持,谷歌不支持
        window.onunload=function () {
            
        } 
        
         // 页面关闭前执行,ie8支持,谷歌不支持
        window.onbeforeunload=function () {
            
        } 
</script>

location对象

location对象就是浏览器的地址栏对象

<script>
    window.onload = function () {
        console.log(window.location)
    }
</script>

打印结果如下图:

下图中的href属性中,63342后面的%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0 是url中的汉字被编码后的效果

下图中的hash,指的是地址栏中#及后面的值

下图中的host,指的是地址栏中的主机名+端口号

设置跳转的页面

<body>
	<button id="btn">点我跳转</button>
</body>
<script>
    document.getElementById("btn").onclick = function () {
        // 通过这种方式可以点击浏览器的后退按钮回退页面
        location.href = "http://www.baidu.com"
    }
    
    document.getElementById("btn").onclick = function () {
        // 效果同上,只不过他属于方法
        location.assign("http://www.baidu.com")
    }
    
     document.getElementById("btn").onclick = function () {
        // 页面发生跳转后,无法通过浏览器的回退按钮返回原页面
        location.replace("http://www.baidu.com")
    }
</script>

重新加载页面

<script>
     location.reload()
</script>

history对象

history也是window内置的一个对象。

通过它可以实现页面的前进和后退

示例: html01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<button id="btn1">点我跳转</button>
<button id="btn2">点我前进</button>
</body>
<script>
    document.getElementById("btn1").onclick = function () {
        location.assign("02.html")
    }
    document.getElementById("btn2").onclick = function () {
       window.history.forward()
    }
</script>
</html>

html02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点我回退</button>
</body>
<script>
    document.getElementById("btn").onclick = function () {
            window.history.back()
    }
</script>
</html>

通过这个对象可以判断当前系统型号,当前浏览器的型号

window.navigator.userAgent // 浏览器的类型
window.navigator.platform  // 系统平台
posted @ 2020-05-17 11:18  赐我白日梦  阅读(251)  评论(0编辑  收藏  举报