第六十五天 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.teache  // 李四正在教学，this指向p2对象

// 3.ES6类语法

class Student{

　　// 需要构造器（构造函数）来完成对象声明与初始化

　　constructor(name){

　　　　// 属性在构造器中声明完成初始化

　　　　this.name = name;

　　}

　　// 类方法

　　static fn(){

　　　　console.log("我是类方法")
　　}

}

// 类中的普通方法由类的具体实例化对象来调用

// 类中的类方法由类直接调用（这类型的方法大多是功能性方法，不需要对象的存在）

3.js选择器

直接通过id名（不严谨，也不推荐使用）

getElement系列（最严谨）

// id获取：
// getElementById('id名'）
// 只能由document来调用

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

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

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

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

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

4.事件初识

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

// 钩子函数：就是满足某种条件被系统回调的函数（完成指定功能）
// 点击事件：明确激活钩子的条件 = 机会钩子后该处理什么逻辑，完成指定功能（函数）

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

5.js操作页面内容

文本内容

// box.innerText
// 可以设值，也可以取值

标签内容

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

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

样式

// box.style.样式名 ==》可以设值，可以取值，但操作的只能是行间式
// getComputedStyle(box,null). 样式名 ==》只能取值，不能设值，能获取所有方式设值的值（行间式 与 计算后样式）

// 注：获取计算后样式，需要关注值得格式