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

元素创建的不同方式

方式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>

navigator对象

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

window.navigator.userAgent // 浏览器的类型
window.navigator.platform  // 系统平台

posted @ 2020-05-17 11:18 赐我白日梦阅读(256) 评论(0) 编辑收藏举报

刷新页面返回顶部

赐我白日梦

赐我白日梦的技术博客