js面向对象

1.闭包

// 函数的嵌套定义, 定义在内部的函数就称之为 闭包
// 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);

2.面向对象js

// 1.单一对象
var obj = {
    // 属性
    name: 'Zero',
    // 方法
    teach: function () {
        console.log("教学");
    }
};
obj.name | obj.teach()

// 2.构造函数
function Person(name) {  // 类似于python中的类一样来使用
   	// this代表Person构造函数实例化出的所有具体对象中的某一个
    this.name = name;  
    this.teach = function () {
        console.log(this.name + "正在教学");
    }
}
// ①通过构造函数实例化出具体对象
// ②通过对象.语法调用属性与方法
var p1 = new Person("张三"); 
p1.name  // 张三, this指向p1对象
var p2 = new Person("李四"); 
p2.teach  // 李四正在教学, this指向p2对象

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

3.js选择器

• 直接通过id名(不严谨, 也不推荐使用)
• getElement系列(最严谨)

// id获取:
// getElementById('id名')
// 只能由document来调用

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

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

• querySelector

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

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

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

4.事件初识

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

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

// 获取页面标签是前提
var div = document.querySelector('.div');
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
    this.style.backgroundColor = 'red';
}

5.js操作页面内容

• 文本内容

// box.innerText
// 可以设值, 也可以获取值

• 标签内容

// box.innerHTML
// 可以设值, 也可以获取值, 能解析html语法代码

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

• 样式

// box.style.样式名  ==> 可以设值,也可以获取,但操作的只能是行间式

// getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式)

// 注: 获取计算后样式,需要关注值的格式