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("我是类方法")
}
}
// 类中的普通方法由类的具体实例化对象来调用
// 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
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).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式)
// 注: 获取计算后样式,需要关注值的格式
