JavaScript基础Day8 JS类---DOM事件_js dom.class 写法-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoyixiaoyizhu/article/details/144122046

JavaScript 类(class)

类是用于创建对象的模板{ }
- 在{}定义类成员的位置，如方法或构造函数，每个类中包含了一个特殊的方法constructor(),类的构造函数，用于创建和初始化一个由class创建的对象
- class ClassName{constructor() {…}}
- ```
class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
```
  - Runoob类，两个属性，name和url

使用类，用new来创建对象

class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

let site = new Runoob("菜鸟教程",  "https://www.runoob.com");

类表达式，可以命名或不命名

// 未命名/匿名类
let Runoob = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// output: "Runoob"

// 命名类
let Runoob = class Runoob2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// 输出: "Runoob2"

构造方法
- constructor()
- 在创建新对象时会自动执行
- 构建方法用于初始化对象属性
- 如果不定义构造方法，js会自动添加一个空格的构造方法

类的方法

class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let runoob = new Runoob("菜鸟教程", 2018);
document.getElementById("demo").innerHTML =
"菜鸟教程 " + runoob.age() + " 岁了。";

类继承

1
js类继承extends关键字
继承允许我们依据另一个类来定义一个类
- super() 用于调用父类的构造函数
- 当创建一个类时，不需要重新编写新的数据成员和成员函数，秩序指定新建的类继承了一个已有的类的成员即可。
  - 基类(父类)：已有的类，派生类(子类)：新建的类
  - 继承代表了is a关系
  - ```
  //基类
  class Animal{
  //eat()
  //sleep()
  }
```

class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}

class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}

let noob = new Runoob("菜鸟教程", 5);
document.getElementById("demo").innerHTML = noob.show();

原型链继承还是ES6继承

getter和setter
- 都需要在严格模式下执行
- getter/setter 方法的名称不能与属性的名称相同，在本例中属名为 sitename。
- set 是一个方法，但需要不带括号
提升
- 函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会
  - 需要声明你的类，然后再访问它

静态方法

概念

类方法：static关键字修饰的方法，属于类的，但不属于对象，在实例化对象之前可以通过类名.方法名调用静态方法。静态方法不能再对象上调用，只能在类中调用

class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}

let noob = new Runoob("菜鸟教程");

// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();

// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = noob.hello();
// 以上代码会报错

JS HTML DOM（文档对象类型）

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)
HTML DOM模型被构造为对象的树
通过可编程的对象模型，js获得了足够的能力来构建动态HTML（HTLM元素、HTML属性、CSS样式、对页面中的所有事件做出反应）
查找HTML元素
- 三种方法找到该元素
  - id
    - var x=document.getElementById(“intro”);
  - 标签名
    - var x=document.getElementById(“main”);var y=x.getElementsByTagName(“p”);
  - 类名
    - var x=document.getElementsByClassName(“intro”);

DOM-改变HTML 创建动态的HTML内容

目标
- 改变HTML元素的内容(innerHTML)
- 改变样式(CSS)
- 对HTML DOM事件做出反应
- 添加或删除HTML元素

改变HTML输出流

在script中写入时间内容
- document.write(Date());
绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变HTML内容使用innerHTML属性

document.getElementById(“p1”).innerHTML=“新文本!”;

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="新标题";

改变HTML属性

document.getElementById( id ).attribute=新属性值
document.getElementById(“image”).src=“landscape.jpg”;

DOM 改变CSS

改变HTML样式

document.getElementById( id ).style. property =新样式

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";

使用事件

事件举例：元素被点击；页面加载完成；输入框被修改

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

JS-HTML DOM 事件-使js有能力对html事件做出反应

html事件
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> 【其中，onclick是事件属性，当用户点击该元素时，会执行相应的js代码】

HTML事件属性

<button onclick="displayDate()">点这里</button>

HTML DOM来分配事件

向button元素分配onclick事件 <script> document.getElementById("myBtn").onclick=function(){displayDate()};</script>

onload和onunload事件

在用户进入或离开页面时被触发。
- onload，检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
- onunload和onload用于处理cookie
- <body onload="checkCookies()">

onchange事件

结合对输入字段的验证来使用
<input type="text" id="fname" onchange="upperCase()"> 当用户改变输入字段的内容时，会调用upperCase()函数
- 在用户更改输入框的内容时，自动将内容转换为大写。

onmouseover和onmouseout事件

在用户的鼠标移至HTML元素上方或移出元素时触发函数

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

onmousedown、onmouseup以及onclick事件

鼠标点击事件的所有部分
- 点击，onmousedown事件
- 释放，onmouseup
- 完成鼠标点击，onclick事件

JavaScript基础Day8 JS类---DOM事件

JavaScript 类(class)

类继承

静态方法

JS HTML DOM（文档对象类型）

DOM-改变HTML 创建动态的HTML内容

改变HTML输出流

改变HTML内容 使用innerHTML属性

改变HTML属性

DOM 改变CSS

改变HTML样式

使用事件

JS-HTML DOM 事件-使js有能力对html事件做出反应

HTML事件属性

HTML DOM来分配事件

onload和onunload事件

onchange事件

onmouseover和onmouseout事件

onmousedown、onmouseup以及onclick事件

改变HTML内容使用innerHTML属性