Js 基础补充

前端开发 作者: 2024-08-23 10:20:01
js参考手册: 作用域 全局变量 在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>

局部变量

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

隐式全局变量

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

预解析

<script>
    console.log(number)
    var number = 1
</script>
<script>
    var number
    console.log(number)
    number = 1
</script>
<script>
   f()
   function f() {
       console.log("函数执行")
   }
</script>
<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>

日期相关

字符串相关

元素创建的不同方式

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

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

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

<script>
    window.onload = function () {
        console.log(window.location)
    }
</script>
<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对象

<!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>
<!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  // 系统平台
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_67190.html
Js 基础补充