Js 基础补充

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了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  // 系统平台
原文链接：https://www.f2er.com/js/992056.html

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作