js对页面的一些简单的操作

Posted 2021-01-28 彼岸花纽约

面向对象:

// 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("我是类方法")

    }

}

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

// 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)

 

 

Js选择器

 

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

// id获取:

// getElementById(‘id名‘)

// 只能由document来调用

 

// class获取

// getElementsByClassName(‘class名‘)

// 可以由document以及所属父级调用

 

// tag获取

// getElementsByTagName(‘标签名‘)

// 可以由document以及所属父级调用

 

querySelector:

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

// querySelector()

 

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

// querySelectorAll()

 

// 1.参数: 就采用的是css选择器语法

// 2.可以由document及父级来调用

// 3.对id检索不严谨

 

 

 

事件的初识:

 

// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件

// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件

// 指定功能: 就是开发者根据实际需求完整相应的功能实现

 

// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)

// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)

 

// 获取页面标签是前提

var div = document.querySelector(‘.div‘);

// 钩子条件: 双击 = 指定功能(自身背景颜色变红)

div.ondblclick = function () {

    this.style.backgroundColor = ‘red‘;

}

 

 

Js操作页面的内容:

文本内容: // box.innerText

// 可以设值, 也可以获取值

 

 

标签内容: // box.innerhtml

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

 

// box.outerHTML

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

 

 

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

 

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

 

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