x-js学习笔记8

最新推荐文章于 2024-08-03 17:05:14 发布

Find_first

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量279

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/xmc20050422/article/details/131378273

版权

BOM

范围比dom更大，浏览器对象模型

    <script>
        // window.document.querySelector()
        var num = 10;
        console.log(num);    //相当于console.log(window.num);

        function fn() {
            console.log(11);

        }
        fn();
        window.fn();
        alert(11);   //window.alert(11)
        // var name = 10; //不推荐使用
        console.log(window.name);//会输出一个空格
    </script>

1 window 对象的常见事件

1.1窗口加载事件

//js先写在前面的方法：window.onload=function(){ }    //也可以将script写在head标签里面了
<script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('哟！dream！');
            })
        }
</script>
<button>jisung</button>
//如果设置两个onload只会执行后面那一个
//解决方法：window.addEventListener('load', function() { })
<script>
        window.addEventListener('load', function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('哟！dream！');
           })
        })
        window.addEventListener('load', function() {
           alert('nct');
        })
</script>
<button>jisung</button>

        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
        //先33后22
        // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
        // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

1.2调整窗口大小事件

例如随着页面实时宽度的大小，显示或隐藏某元素

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

2 定时器

setTimeout（）和 setInterval （）

setTimeout（）

window.setTimeout( 调用函数，[延迟的毫秒数] )

window在调用的时候可以省略
延迟时间是毫秒，可以省略，省略默认的是0
调用函数可以直接写函数还可以写函数名 || 还有一个写法 '函数名()'（不推荐）
页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

        function callback() {
            console.log('pjs');
        }
        var timer1 = setTimeout(callback, 3000);

setTimeout（）函数也叫回调函数 callback

setInterval（）

window.setInterval(调用函数, 延时时间);

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器

setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

clearInterval(timer)清除

<button class="stop">停止定时器</button>

<script>
        var timer = null; // 全局变量  null是一个空对象

        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
</script>

this指向

一般情况下this的最终指向的是那个调用它的对象

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向调用者

构造函数中this指向

 function Fun() {
    console.log(this); // this 指向的是fun 实例对象
    }
 var fun = new Fun();

3 js执行队列

同步与异步

js单线程，同一时间只能做一件事

同步：程序顺序与执行顺序相同

异步：做一件事时可以处理其他事情

执行机制：先执行同步任务，再执行异步任务

location对象

获取或设置窗体的URL

navigator对象

判断用户是移动端还是pc端

history对象

<body>
  <a href="list.html">点击去list</a>
  <button>前进</button>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
      history.forward();  
      // history.go(1)
    })
  </script>
</body>

4 面向对象

  class name={
    //class body
  }
  //创建实例：var xx =new name();
  //类必须使用new实例化对象
  <script>
    class Nct{
      constructor(uname){
        this.uname=uname;
      }
    }
    var pjs=new Nct('jisung');
    console.log(pjs.uname);
  </script>

  <script>
    class Father{
      constructor(){}
      money(){
        console.log(100);
      }
    }
    class Son extends Father{};

    var son=new Son();
    son.money();    //100
  </script>

super关键字

用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

  <script>
    class Father{
      constructor(x,y){
        this.x=x;
        this.y=y;
      }
      sum(){
        console.log(this.x+this.y);
      }
    }
    class Son extends Father{
      constructor(x,y){
        super(x,y); //调用了父类中的构造函数
      }
    }

    var son=new Son(2,5);
    son.sum();
  </script>

1.继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类

2.子类没有就查找父类，父类中有就执行父类的。

  <script>
    class Father{
      constructor(x,y){
        this.x=x;
        this.y=y;
      }
      sum(){
        console.log(this.x+this.y);
      }
    }
    //继承父类加法，同时拓展减法。
    class Son extends Father{
      constructor(x,y){
        super(x,y); //ps:super必须在子类this之前调用
        this.x=x;
        this.y=y;
      }
      subtract(){
        console.log(this.x-this.y);
      }
    }

    var son=new Son(2,5);
    son.sum();
    son.subtract();
  </script>

1.在ES6里面，类没有变量提升，所以必须先定义类，才能进行类实例化对象。

2.类里面共有的属性和方法一定要加this使用。

方法里的this指向的是方法的调用者，constructor里面的this指向的是实例化对象

init初始化操作让相关元素绑定事件

动态创建元素

element.insertAdjacentElement(position, element);

A DOMString 表示相对于该元素的位置；必须是以下字符串之一：

'beforebegin': 在该元素本身的前面。
'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
'afterend': 在该元素本身的后面。

Find_first

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
x-js学习笔记8

方法里的this指向的是方法的调用者，constructor里面的this指向的是实例化对象init初始化操作让相关元素绑定事件。
复制链接

扫一扫