JavaScript学习笔记15

最新推荐文章于 2024-11-02 19:19:35 发布
最新推荐文章于 2024-11-02 19:19:35 发布
阅读量116 收藏
点赞数
分类专栏： JS 文章标签： javascript 学习 前端
原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha/?p=317&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=720efe45336d5eabd781d1ed31bafef8
版权

  • 目录

    JS执行机制

    location对象

    URL：统一资源定位符，

    五秒之后自动跳转页面案例

    获取URL参数案例

    location对象的方法

    location.assign()

    location.replace()

    location.reload()

    userAgent

    history对象

    PC端特效

    元素偏移量offset系列

    element.offsetParent 

    element.offsetTop 

    element.offsetLeft

    element.offsetWidth

    element.offsetHeight

    offset与style的区别

    获取鼠标在盒子内的坐标案例

  • JS执行机制

    • 先执行执行栈里面的同步任务。

    • 异步任务放入任务队列中。

    • 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取异步任务结束等待状态，进入执行栈，开始执行。

    • 事件循环：主线程不断地获得任务、执行任务、再获取任务

    • 异步进程处理

    • location对象

      • window对象下的location对象，获取或者设置窗体的url，因为这个属性返回的是一个对象

      • URL：统一资源定位符，

        • 是互联网上的标准资源地址，互联网上的每个文件，都有唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

      • 获取或者设置整个URL：location.href

      • 返回主机（域名）：location.host

      • 返回端口号：location.port

      • 返回参数：location.search

      • 返回片段（#后面内容，常见于链接锚点）：location.hash

    • 五秒之后自动跳转页面案例

      • 利用定时器

      • 时间到了，就添加使用location.href

      • 案例

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function () {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            }
            div.innerHTML = '您将在' + timer + '之后跳转到首页';
            timer--;
        }, 1000);
    </script>

</body>

</html>

      • 结果

         

    • 获取URL参数案例

      • 1第一个登陆页面，里面有提交表单，action提价到index.html页面

      • 2.第二个页面可以使用第一个页面的参数，location.search参数

      • 在第二个页面中，需要把?username = red里面的参数red单独提取出来

      • 第一步去掉？利用substr截取字符串，语法substr('起始位置'，截取几个字符)

      • 第二步，利用=号分隔键和值split（‘=’）

      • 案例

        • index.html

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div></div>
    <script>
        console.log(location.search);//得到?uname=red
        //1.先去掉问号 substr('起始位置'，截取几个字符)
        var params = location.search.substr(1,);
        console.log(params);
        //2.利用=号将字符串分隔为数组，split('=')分隔
        var arr = params.split('=');
        console.log(arr);//得到数组['uname' , 'red']
        var div = document.querySelector('div');
        //3.把分隔出来的数据写入div中
        div.innerHTML = arr[1] + '欢迎您';//得到red

    </script>

</body>

</html>
        • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- 提交给index.html页面 -->
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>

</body>

</html>

      • 结果

        • 跳转之前的结果

      •  跳转之后的结果

         

    • location对象的方法

      • location.assign()

        • 跟href一样，可以跳转页面

      • location.replace()

        • 替换当前页面，因为不记录历史，所以不能后退

      • location.reload()

        • 重新加载页面，相当于刷新按钮

        • 参数如果为true强制刷新

        • 案例

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            //location.assign('http://www.itcast.cn');//assign记录浏览历史可以实现后退功能
            location.replace('http://www.itcase.cn');//replace不记录浏览历史，所以不能后退
            location.reload();//相当于刷新按钮
        })
    </script>

</body>

</html>

      • 包含有关浏览器信息

      • userAgent

        • 返回客户机发送服务器的user-agent头部的值

      • 下面代码可以判断用户那个终端夜绵绵打开页面，实现跳转

    • history对象

      • back()可以后退功能

      • forward()前进功能

      • go(参数) 前进后退功能，参数如果是1前进一个页面，-1 是后退一个页面

  • PC端特效

    • 元素偏移量offset系列

      • 动态获取元素的位置、大小等

      • 获取元素自身的大小

      • 获取元素距离带有定位父元素的位置

      • 注意：返回的数值不带单位

      • element.offsetParent 

        • 返回作为该元素带有定位的父级元素，如果没有父级元素就返回body

      • element.offsetTop 

        • 返回元素相对带有定位元素上方偏移

      • element.offsetLeft

        • 返回元素相对带有定位元素左方偏移

      • element.offsetWidth

        • 返回自身包括padding、边框、内容区的宽度，返回数值不带单位

      • element.offsetHeight

        • 返回自身包括padding、边框、内容区的宽度，返回数值不带单位

      • 案例

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            /* 如果想要得到子盒子到父亲的距离，必须要给父亲添加定位 */
            position: relative;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 150px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin-left: 45px;
        }

        .w {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        //1可以得到元素的偏移 返回的不带单位
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        //他以带单位的父盒子为准 ，如果复合子没有定位，则以body为准
        console.log(son.offsetLeft);
        //2可以得到元素大小宽度和高度  包含padding+border+width
        var w = document.querySelector('.w');
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        //3.返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent);
        console.log(son.parentNode);//parentNode返回父亲 是最近一级的父亲 不管有没有定位
    </script>

</body>

</html>

      • 结果

         

    • offset与style的区别

      • 获取元素大小使用offset

      • 改变元素值，则需要用style

      • 案例

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>

</head>

<body>
    <div class="box" style="width:200px;"></div>
    <script>
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);//offset行内样式表和内嵌样式表的值都可以得到
        console.log(box.style.width);//style只能获取行内样式表的值
        //box.offsetWidth = '300px';//此代码无效 不能改变
        box.style.width = '300px';//代码有效 width改变为300px
    </script>

</body>

</html>

      • 结果

         

    • 获取鼠标在盒子内的坐标案例

      • 利用e.pagex，e.pagey获得鼠标在页面的坐标

      • 得到盒子在页面中的坐标box.offsetLeft、box.offsetTop

      • 用鼠标距离页面的坐标减去盒子在页面的距离就可以得到

      • 想要一定鼠标就获得最新的坐标，使用mousemove

      • 案例

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            margin: 200px;
        }
    </style>


</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function (e) {
            /* console.log(e.pageX);
            console.log(e.pageY);
            console.log(box.offsetLeft); */
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
        })
    </script>

</body>

</html>

      • 结果

      • JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

正在加载jjj
关注
专栏目录
location.href表示当前访问的网址url
易天海
03-10 1206
这样我们用url中的参数在 js中直接即可利用，比如下一页上一页等 比如当前访问网址是http://127.0.0.1/index.php?m=&amp;c=Commic&amp;a=read&amp;commic_id=5&amp;chapter_id=21683 在js中 console.log(location.href) 的输出结果为一下： http://127.0.0.1/i...
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦）
11-23 6799
大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上co
关于window.location.href跳转绝对地址的问题
热门推荐
The night of summer
07-13 2万+
今天遇到一个奇葩的问题，使用window.location.href实现页面跳转的时候，跳转的是相对地址。 （说明：我们是在机顶盒上写的页面，所以都是处理的遥控器的key） function setti(e){         e=window.event||e;         if(e.keyCode == 13){             //url = "file://"
js调试之console.log()
铁柱的博客
08-15 1993
俗话说的好，不会前端是phper不是好的php,可是我这对前端真的是一窍不通，连基础的ajax都差点不会写。调试也花了不少时间，因此在这里记录一下。 一、console.log()的定义console.log（）相当于在浏览器的控制台打印相关的信息，并不会影响程序的进程，这点就和alert()形成了鲜明的对比。alert()相当于程序杀手，调试的时候是在是不好用。 *
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1139
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4678
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
qq_53388077的博客
03-30 1624
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1117
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1128
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 120
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1367
项目功能：商品分类,商品信息,用户。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 679
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 224
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
最新发布
m0_67428300的博客
11-02 603
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
JavaScript的第十一天
全栈学习ing
10-31 722
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值