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

闭包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).样式名 ==>只能获取值,不能设值，能获取所有方式设置的值（行间式 与计算后样式） //注： 获取计算后样式，需要关注值的格式

原文地址：https://www.cnblogs.com/yanhui1995/p/10145154.html