学习JS第六周

最新推荐文章于 2024-07-25 22:24:14 发布

长期顽固性肥胖

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量39

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_75004747/article/details/130978131

版权

BOM(2)

1.JS执行队列

1.1JS是单线程

JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JS这门脚本语言诞生的使命所致——JS是为处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。

1.2同步和异步

利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，于是JS 出现了同步和异步。它们的本质区别在于在流程线上各个流程的执行顺序不同。
同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：在做一件任务的同时，还可以处理其他任务。
同步任务：同步任务都在主线程上执行，形成一个执行线。
异步任务：JS的异步是通过回调函数实现的。异步任务有以下三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

1.3JS执行机制

先执行执行线中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行线中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行线，开始执行。

由于主线程不断的重复获取任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。

2.location对象

2.1什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL（统一资源定位符）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式：
protrcol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2.2location对象的属性

在这里插入图片描述

五秒之后自动跳转页面

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

获取URL参数（案例分析）
- 第一个登陆页面，里面有提交表单，action提交到index.html页面
- 第二个页面可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
- 在第二个页面中，需要把这个参数提取
- 第一步去掉？利用substr（‘起始位置’，截取几个字符）
- 第二步利用=号分割键和值 split（‘=’）

2.3location对象的方法

在这里插入图片描述

<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
location.assign('http://www.baidu.com');//记录浏览历史，故可以实现后退功能
location.replace('http://www.baidu.com');//不记录浏览历史，无法实现后退功能
location.reload();//刷新页面
})
</script>
</body>

3.navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
下面前端代码可以判断用户哪个终端打开页面，实现跳转

4.history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL

<body>
   <a href="index.html"></a>
   <button>按钮</button>
   <script>
     var btn = document.querySelector('button');
     btn.addEventListener('click',function(){
     history.back();//后退
     history.forward();//前进
     history.go();//前进或后退
     })
   </script>
</body>

PC端网页特效

1.元素偏移量offset系列

1.1offset概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
offset系列常用属性
- 以带有定位的父元素（position：relative；）为准，若没有父元素或者父元素没有定位，则以body为准
- 对于元素大小（宽度和高度）是包含padding+border+width的
- offsetParent返回带有定位的父元素，否则返回的是body；parentNode返回的是最近一级的父元素，不论父元素带不带定位。
- offset和style的区别
案例：获取鼠标在盒子内的坐标
- 鼠标在盒子内移动，想要得到鼠标距离盒子左右的距离
- 首先得到鼠标在页面中的坐标（e.pageX e.pageY）
- 其次得到盒子在页面中的距离（box.pageX box.pageY）
- 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的距离

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

案例：拖动模态框
案例：仿京东放大镜效果

2.元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可动态的得到该元素的边框大小、元素大小等。
在这里插入图片描述

client求宽度和offsetWidth最大的区别就是其不包含边框（border）
案例：淘宝flexibleJS源码分析

3.元素滚动scroll系列

scroll翻译过来就是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
在这里插入图片描述

scroll宽度和client最大的区别就是scroll是计算的盒子里面内容实际的宽度，而client只是盒子的宽度

<body>
    <div>很多的文字</div>
    <script>
      var div = document.querySelector('div');
      console.log(div.scrollHeight);
      div.addEventListener('scroll',function(){
      console.log(div.scrollTop);
      })
    </script>
</body>

案例：仿淘宝固定侧边栏
对于以上三大系列总结：
- offset系列经常用于获取元素位置
- client系列经常用于获取元素大小
- scroll系列将常用于获取滚动距离
- 注意页面滚动的距离通过window.pageXOffset获得
  mouseenter和mouseover的区别（都是鼠标移动到元素上时会触发事件）
- mouseover鼠标经过自身盒子会触发事件，经过子盒子还会触发；而mouseenter只会经过自身盒子触发
- 之所以这样，是因为mouseenter不会冒泡；跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

长期顽固性肥胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习JS第六周

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。URL（统一资源定位符）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）
复制链接

扫一扫