一、js执行队列

1.js是单线程

编辑

解决：编辑

（1）同步

前一步任务结束后再执行后一个任务

（2）异步

可以同时执行多个任务

本质区别：这个流水线上各个流程的执行顺序不同

（3）同步任务

同步任务都在主线程上执行，形成一个执行栈

（4）异步任务

JS的异步是通过回调函数实现的

编辑

（5）js执行机制

编辑

二、location对象

1.用于获取或设置窗体的URL，并且可以用于解析URL。返回值是一个对象

编辑

2.URL

（1）

编辑

（2）属性

编辑

这两个重点记

获取练习：登录之后欢迎您

//第一个html
<body>
    <form action="登录界面2.html">
        用户名:<input type="text" name="uname">
        <input type="submit" value ="登录">
    </form>
   
</body>


//第二个html
<body>
    <div></div>
    <script>
       // var n=location.search//等到结果:？uname=
        //去掉？,substr('起始位置'，‘截取字符数’)
        var params=location.search.substr(1)
        //利用等号把字符串分割为数组 split（‘=’）
        var arr=params.split('=');
        var div=document.querySelector('div');
        div.innerHTML=arr[1]+'欢迎您'
    </script>
</body>

（3）方法

编辑

三、navigator对象

1.navigator对象包含有关浏览器的信息，他有很多属性，该属性可以返回由客户机发送服务器的user-agent头部的值

2.下面代码可以判断我们是用哪个打开，用手机，就打开移动端编辑

四、history对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

一般在实际开发中比较少用，但是会在一些OA办公系统中见到

编辑

实现：

编辑

五、元素偏移量offset系列

1.概述

编辑

注意：①可以得到元素的偏移、位置，返回不带单位的数值

②他以带有定位的父亲为准，如果没有父亲，或者父亲没有定位，则以body为准

2.offset和style区别

编辑

六、元素可视区client系列

编辑

（1）立即执行函数

就是不需要调用，立马能够自己执行的函数。最大的作用就是独立创建了一个作用域

编辑

七、元素滚动scroll系列

编辑

得到的是内容的大小（比如内容会超出盒子，得到的是内容大小）

编辑

注意：元素内容被卷去头部是.scrollTop,但是页面被卷去头部是window.pageYOffset（ie9开始支持）

页面被卷去头部：

编辑

存在兼容性问题

编辑

总结：

编辑

2.mouseenter和mouseover的区别

编辑

八、动画函数封装

1.动画实现原理

（1）核心原理：通过定时器setInterval()不断移动盒子位置

（2）实现步骤：

编辑

2.动画函数简单封装

（1）注意函数需要传递两个参数：动画对象和移动位置

实现：就是把实现过程用函数封装起来

 <script>
        var div=document.querySelector('div');
        function animate(obj,target)
        {
            var timer=setInterval(function(){
        if(div.offsetLeft>=400)
        {
            clearInterval(timer);
        }
        div.style.left=div.offsetLeft+5+'px';
       }, 30);
        }
       animate(div,300);
    </script>

（2）当不断调用函数时，会产生多个定时器，元素的速度会越来越来快。

解决方案：让元素只有一个定时器执行

（3）缓动效果原理

编辑

多个目标值之间移动：

编辑

 var one=document.querySelector('.one');
        function animate(obj,target)
        {
          
            var timer=setInterval(function(){
                //加math.ceil是向上取整，这样就能保证，我们到达了指定位置，而不是有小数，和目标距离差一点
                var step=Math.ceil((target-one.offsetLeft)/10)
        if(one.offsetLeft>=400)
        {
            clearInterval(timer);
        }
        one.style.left=one.offsetLeft+step+'px';
       }, 100);
        }
       animate(one,300);

（4）动画函数添加回调函数

编辑

实现：函数名（参数，参数，函数）；

（5）动画函数封装到单独JS文件里面

文件名.js,在使用时，记得在最前面添加src

编辑

九、移动端网页特效

1.触屏事件

（1）

编辑

（2）触摸事件对象TouchEvent

编辑

（3）移动端拖动元素

编辑

7.28-7.29学习汇报与总结

1.问题解决

（1）问题：无法显示文字

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        margin: auto;
    }
</style>
<body>
    <div class="box"></div>
    <script>
        var box=document.querySelector('.box');
       
       box.mousemove=function(e)
       {
        var x=e.pageX-this.offsetLeft;
        var y=e.pageY-this.offsetTop;
        this.innerHTML='x坐标是'+x+'y的坐标是'+y;
       }

    </script>
</body>

解决：

①，mousemove前面加上on

②采用另外一种函数书写方式，mousemove不用加on

 box.addEventListener('mousemove',function(e){
        var x=e.pageX-this.offsetLeft;
    var y=e.pageY-this.offsetTop;
    this.innerHTML='x坐标是'+x+'y的坐标是'+y;
    })

这个问题也反映出各个不同方法之间的区分没记清楚，混淆了

(2)问题：无法实现动画缓动效果

   var two=document.querySelector('.two');
        function animate1(obj,target)
        {
            var step=(target-two.offsetLeft)
            var timer=setInterval(function(){
        if(two.offsetLeft>=target)
        {
            clearInterval(timer);
        }
       two.style.left=two.offsetLeft+step+'px';
       }, 30);
        }
       animate1(two,300);

解决：要把step的计算放到定时器中，才能实现效果

function animate(obj,target)
        {
          
            var timer=setInterval(function(){
                var step=(target-one.offsetLeft)/10
        if(one.offsetLeft>=400)
        {
            clearInterval(timer);
        }
        one.style.left=one.offsetLeft+step+'px';
       }, 100);
        }
       animate(one,300);

也要注意设置动画的时间，时间不合适会发现观察不到动画效果。

【前端——JavaScript】:js执行队列、location、navigation、history、PC端网页特效、移动端网页特效