js闭包 选择器 面向对象 事件 操作页面

Posted 2021-01-28 路口有雾

闭包
js函数的嵌套定义,定义在内部的函数 就称之为闭包
为什么使用闭包:
    1.一个函数要使用另一个函数的局部变量
    2.闭包会持久化包裹自身的函数的局部变量
    3.解决循环绑定

    function outer() {
        var num =10;
        function inner() {
            //1.在inner函数中,使用了outer的局部变量num
            return num;
        }
        return inner;
    }
    var innerFn = outer();
    //2.借助闭包,将局部变量num的声明周期提升了
    var num = innerFn();
    console.log(num);



面向对象
对象:特征与行为的结合体,是一个具象的实体
    对象使用属性与方法, 采用.语法

    var  obj = {
        //属性
        name:‘Zero‘,
        //方法
        teach:function () {
            console.log(‘教学‘);
        }
    };
    console.log(obj.name);
    obj.teach();

    构造函数:声明与普通函数一样,只是方法(函数)名采用大驼峰命名规则
    function Persor(name) { //类似于python中的类来使用
        //函数内部属性方式不同于普通函数
        this.name=name; //this代表Persor构造函数实例化的对象本身
        this.teach = function () {
            console.log(this.name+ "正在教学");
        }
    }

    ES6类语法
        class Student{  //, 可以实例化对象,但实例化的对象需要加以区分
        //需要构造器(构造函数)来完成对象的声明与初始化
        constructor(name){
            //属性在构造器中声明并初始化
            this.name=name;
        }
        // 类中规定普通方法
        study() {
            console.log(this.name+ "正在学习");
        }
    }
        //类方法
        static fn() {
        console.log(‘我是类方法‘)
    }
    类中的普通方法由类的具体实例化对象来调用
    类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)



js选择器
直接通过id名(不严谨,也不推荐使用)
getElement系列(最严谨)
    id 获取:
    getElementById(‘id名‘)
    只能由document

    class 获取:
    getElementsByClassName(‘class名‘)
    可以由document以及所属父级调用

    tag 获取
    getElementsByTagName(‘标签名‘)
    可以由document以及所属父级调用

querySelector
    获取第一个满足要求的目标
    querySelector()

    获取所有满足要求的目标
    querySelectorAll()

    1.参数:就采用的是css选择器语法
    2.可以由document及父级来调用
    3.对id检索不严谨



事件初识
    js事件:页面标签在满足某种条件下可以完成指定功能的这种过程,称之为事件
    某种条件:如鼠标点击标签:点击事件 | 鼠标双击标签:双击事件 | 键盘按下:键盘按下事件
    指定功能: 就是开发者根据实际需求完成相应的功能实现

    钩子函数:就是满足某种条件被系统回调函数(完成某种功能)
    点击事件:明确激活钩子的条件 = 激活钩子后该处理什么逻辑,完成指定功能(函数)


js操作页面内容
 文本内容
 //box.innerText
 //可以设值,也可以获取值

 标签内容
 //box.innerhtml
 //可以设值,也可以获取值,能解析html语法代码

 //box.outerHTML
 //获取包含自身标签信息的所有字内容信息

 样式
 //box.style.样式名 ==>可以设值,也可以获取,但操作的只能是行间式
 //getComputedStyle(box.null).样式名 ==>只能获取值,不能设值，能获取所有方式设置的值（行间式 与计算后样式）
 //注： 获取计算后样式，需要关注值的格式