【抽象基类继承、DOM、事件 - 学习小结】

已于 2022-07-17 21:10:39 修改
阅读量149 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端
于 2022-06-03 22:00:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46839072/article/details/125110049
版权

目录

一、继承

1、抽象基类（抽象类）

(1)有些类不能实例化，专门用于其他类的继承，这样的类称为抽象基类。

注意：在javascript中没有定义抽象基类的方法。
例如说：

class Person{
	  constructor(){}
	  show(){}
			     }
	   new Person() --- 实例化  
class Animal{
	           constructor(){}
			   eat(){ console.log('在吃饭')}
			   sleep(){}
			}
	   
let a1 = new Animal() --- 实例化
a1.eat()

我们可以看到Person、Animal都是抽象基类,实例化没有实际意义,专门用于派生子类在抽象基类中定义的方法,在其子类中会被覆盖(重写),通常抽象基类中的方法没有具体的实现。

(2)Javascript中实现抽象类：在js中没有专门支持抽象类的语法，但是可以通过new.target来实现。

class Animal{
    constructor(){
        if(new.target===Animal){//new.target代表的是创建的对象的类型。
            throw new Error('抽象类不能实例化')
        }
    }
    eat(){}
    sleep(){}
}
let a1 = new Animal()//创建抽象基类的实例化（抽象类的实例化）,会出现报错处理

在这里插入图片描述

2、super使用时注意的问题

(1)super在类继承过程中代表基类

(2)使用super时应注意的问题

A、super可以在派生类的构造方法中使用（调用基类的构造方法）。
B、在派生类中可以通过super调用基类的成员方法。
C、在类的构造方法中，不能在调用super()之前使用this。

class Animal{
    constructor(){
        if(new.target===Animal){//new.target代表的是创建的对象的类型。
            throw new Error('抽象类不能实例化')

        }
    }
    eat(){}
    sleep(){}
}
class Dog extends Animal{
    constructor(nickName){
        super()//在子类构造方法中使用
        this.nickName=nickName//必须在super之后，因为super先调用父类基类方法，放在之前会报错。
    }
    eat(){
        super.eat()
        console.log('狗在啃骨头')
    }
    sleep(){
        console.log('狗趴在地上睡觉')
    }
}
let d1 = new Dog('小黑');
d1.eat();
d1.sleep();

在这里插入图片描述
D、如果在派生类中显式的定义了构造方法，要么必须在其中调用super（），要么在其中返回一个对象。

class Vehicle{}//作为基类
class Car extends Vehicle{
    constructor(){//显式定义构造方法
     super()//要么，调用super()方法，否则报错
  
    }
}
let c1 = new Car()
console.log(c1)

在这里插入图片描述

class Vehicle{}//作为基类
class Car extends Vehicle{
    constructor(){//显式定义构造方法
    return {}//要么，使用return 返回一个对象，否则报错   
    }
}
let c1 = new Car()
console.log(c1)

在这里插入图片描述

二、DOM

1.WebAPI

WebAPI:浏览器提供的一套操作浏览器功能和页面元素的接口(包括DOM、BOM)。

2、javascript的组成

（1）核心语法：ECMAScript5 – ECMAScript2015(ES6) – ECMAScript2016
（2）DOM：文档对象模型
（3）BOM：浏览器对象模型

3、DOM(Document Object Model)

DOM(Document Object Model)：文档对象模型，W3C推荐标准的标记语言是HTML。 在DOM中把HTML文档看做是一棵树结构，文档中的标签、标签的属性、标签的内容都是树的节点。

（1）文档(document):一个页面就是（html文件）就是一个文档。
（2）元素（element)：页面中的所有标签都是元素 。
（3）节点（node):页面中的所有元素（包括元素节点、属性节点、内容节点、注释节点等)节点都是对象，都有属性和方法。

4、DOM的应用。

(1)通过document获取页面的元素
A、通过id获取页面元素

doucument.getElementById(‘id属性值’),因为元素的id属性值是不能重复的，因此该方法返回一个对象。

<!-- 说明支持H5 -->
<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安邮电大学</p>
</body>
<script>
    let st = document.getElementById('p1')
    console.log(st.innerHTML)
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安邮电大学</p>
</body>
<script>
    let st = document.getElementById('p1')
  
    console.log(st)
</script>
</html>

在这里插入图片描述

B、根据标签名获取元素

document.getElementsByTagName('标签名‘）返回值都是对象的集合，是一个类数组，不能使用push()方法，但是可以用数组名带索引的方式访问。

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安邮电大学</p>
    <p>西安石油大学</p>
    <p>西安理工大学</p>
    <p>西安工业大学</p>
    <p>西安财经大学</p>
</body>
<script>
   let arr =document.getElementsByTagName('p')
   console.log(arr[1])
</script>
</html>

在这里插入图片描述
C、根据标签的name属性获取元素。

document.getElementsByName(‘name属性名’) 标签的name属性值可以重复,所以该方法的返回值是集合,也就是一个数组。

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <span name="s1">西游记</span>
    <span name="s1">水浒传</span>
    <span name="s1">三国演义</span>
    <br><br><br>
    <label><input type="checkbox" name="fuit" value="苹果">苹果</label>
    <label><input type="checkbox" name="fuit" value="西瓜">西瓜</label>
    <label><input type="checkbox" name="fuit" value="葡萄">葡萄</label>
</body>
<script>
   let arr =document.getElementsByName('s1')//返回对象集合
   console.log(arr)
   console.log(Array.isArray(arr))
   let arr1 = document.getElementsByName('fuit')//返回对象集合
   arr1[1].checked = true //表示'西瓜'默认选中
  
</script>
</html>

在这里插入图片描述
(2)HTML5中新增的获取元素的方法

A、document.querySelector(‘#id’)：根据id进行选择

<body>
    <p id="p1">西安邮电大学</p>
    <p>西安石油大学</p>
    <p>西安理工大学</p>
    <p>西安工业大学</p>
    <p>西安财经大学</p>
</body>
<script>
   let pt = document.querySelector('#p1')
   console.log(pt)
</script>

在这里插入图片描述
B、document.querySelectorAll(‘标签名或.class属性值’)：根据标签名或class属性值选择。

<body>
    <p id="p1">西安邮电大学</p>
    <p>西安石油大学</p>
    <p class="pt">西安理工大学</p>
    <p class="pt">西安工业大学</p>
    <p class="pt">西安财经大学</p>
   -->
</body>
<script>

  let ps = document.querySelectorAll('.pt')//这个是类选择器，特别注意前面的点不能省略
  console.log(ps)
</script>

可以看到有三个节点，如下图所示：
在这里插入图片描述

C、document.getElementsByClassName('class属性值’）：根据class属性值选择。

<body>
    <span class="one">语文</span>
    <span class="one">数学</span>
    <span class="two">英语</span>
    <span class="two">化学</span>
</body>
<script>
let one = document.querySelectorAll('.one');//使用类选择器
let two = document.getElementsByClassName('two')
//让'语文'字体加粗
one[0].style.fontWeight = 'bold'
//让‘数学’的背景色为红色
one[1].style.backgroundColor = 'red'
</script>

在这里插入图片描述
(3)document对象的属性
A、title：页面的标题

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">西安邮电大学</p>
    <p>西安石油大学</p>
    <p class="pt">西安理工大学</p>
    <p class="pt">西安工业大学</p>
    <p class="pt">西安财经大学</p>
</body>
<script>

document.title='DOM对象'
console.log(document.title)
</script>
</html>

在这里插入图片描述

B、body：页面的body元素

<body>
    <p id="p1">西安邮电大学</p>
    <p>西安石油大学</p>
    <p class="pt">西安理工大学</p>
    <p class="pt">西安工业大学</p>
    <p class="pt">西安财经大学</p>
 <script>
console.log(document.body)
</script>

在这里插入图片描述

C、forms：页面的表单元素

<body>
     <form>
         姓名：<input type="text">
         性别：<input type="text">
     </form>
</body>
<script>
console.log(document.forms)
</script>

在这里插入图片描述

D、images：页面的图像元素

<body>
   <img src="../images/002.png" width="300" height="300x">
</body>
<script>
console.log(document.images)
</script>

在这里插入图片描述

E、document.Element：返回页面的html元素

三、事件

事件：可以被Javascript侦听到的行为，是一种‘触发—响应’的一种机制。在网页交互中起着非常重要的作用。

1、事件的三要素：

(1)事件源：触发事件的元素(谁触发了事件)
(2)事件的类型：触发了什么样的事件(单击、双击、鼠标移动…)
(3)事件处理程序：又称为事件响应函数，当事件被触发所执行的代码。

例如：为按钮绑定单击（click)事件，当单击按钮时弹出一个信息。
写法一：

<body>
    <button id="btn">我是按钮</button>
    <script>
        //获取按钮元素
        let btn = document.querySelector('#btn')//用此方法要考虑兼容性，个别不支持
        //给按钮绑定click事件：
        btn.onclick = function(){
            alert('你单击了按钮')
        }
        /*
        事件源：按钮（btn)
        事件类型：click(单击事件)
        事件处理程序：函数
        */
    </script>
</body>

在这里插入图片描述写法二：

<body>
    <button id="btn" onclick="show()">我是按钮</button>
    <script>
 
        function show(){
            alert('你单机了按钮')
        }
        /*
        事件源：按钮（btn)
        事件类型：click(单击事件)
        事件处理程序：函数
        */
    </script>
</body>

在这里插入图片描述

2、操作页面元素的内容

（1）innerHTML:起始标签和结束标签的内容，保留了空格和换行，以及html标签。

<body>
    <div id="box">
        西安邮电大学
        <p>
            电子商务专业
            <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hellow World</a>
        </p>
    </div>
    <script>
        let box = document.querySelector('#box')
        console.log('box的innerHTML:',box.innerHTML)
    </script>
</body>

在这里插入图片描述

（2）innerText:起始标签和结束标签的文本内容，去掉空格和换行，对一些特殊字符进行转义。(\lt符号为“<")

<body>
    <div id="box">
        西安邮电大学
        <p>
            电子商务专业
            <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hello World</a>
        </p>
    </div>
    <script>
        let box = document.querySelector('#box')
        console.log('box的innerText:',box.innerText)
    </script>
</body>

在这里插入图片描述

（3）textContent:起始标签和结束标签的文本内容，保留空格和换行，对一些特殊字符进行转义。

<body>
    <div id="box">
        西安邮电大学
        <p>
            电子商务专业 <a href="http://www.xianyd.com">&nbsp;&nbsp;&lt;Hello World</a>
        </p>
    </div>
    <script>
        let box = document.querySelector('#box')
        console.log('box的textContent:',box.textContent)
    </script>
</body>

在这里插入图片描述

3、操作元素的属性

操作元素的属性：在javascript中操作元素的HTML标签。

练习1：点击风景按钮，出现风景按钮图片，点击小狗按钮，出现小狗图片。

<body>
    <button id="fengjing" >风景</button>
    <button id="dog">小狗</button>
    <br><br>
    <img src="../images/001.png" alt="" title="风景" width="300" height="200">
    <script>
        let fengjing = document.querySelector('#fengjing')//通过id选取风景按钮
        let dog = document.querySelector('#dog')//通过id选取dog按钮
        let img=document.querySelector('img')//通过标签名选取img标签
        fengjing.onclick = function(){
            img.src = '../images/001.png'
            img.title='fengjing'
        }
        dog.onclick = function(){
            img.src="../images/002.png"
            img.title='dog'
        }
    </script>
</body>

在这里插入图片描述在这里插入图片描述

练习2：页面中有一个button和一个单行文本框。
要求：①初始时button是不可用的。②当文本框获得焦点开始输入内容时，button变成可用。③文本失去焦点，按钮不可用

<body>
    <button id="btn" >按钮</button>
    <br><br>
    <input type="text" id="wenben">
    <script>
        let btn=document.querySelector('#btn')
        btn.disabled=true
        let wenben=document.querySelector('#wenben')
        // wenben.οnclick=function(){
        //     btn.disabled=false
        // }
        wenben.onfocus = function(){//文本框获得焦点
            btn.disabled=false  //按钮可用
        }
        wenben.onblur=function(){//文本框失去焦点
            btn.disabled=true //按钮不可用
        }
          
    </script>

</body>

在这里插入图片描述在这里插入图片描述

4、操作元素的样式

(1)操作元素的style属性

格式：元素对象.style.样式属性名

注意：javascript中使用样式属性名与CSS的样式属性名是不同的；去掉原来CSS样式属性名中‘-’,其后的单词的首字符进行大写。（eg:font-size改为fontSize）

示例：通过javascript设置div的style属性。

<body>
    <div id="box"></div>
    <script>
        let box = document.querySelector('#box')
        box.style.width = '300px'
        box.style.height = '300px'
        box.style.backgroundColor='red'
        box.style.transform='rotate(30deg)'
    </script>
</body>

在这里插入图片描述
(2)操作元素的className属性

格式：元素对象.className

<style>
    .first{
        width:150px;
        height: 160px;
        background-color: pink;
    }
    .change{
        width: 100px;
        height: 100px;
        background-color: red;
        color: white;
    }
</style>
<body>
    <div class="first">西安邮电大学</div>
    <script>
        //1.获取元素
        let box = document.querySelector('.first')
        //2.给元素绑定一个click事件;改变box的样式
        box.onclick = function(){
            this.className = 'change'//this指的就是box
        }
    </script>
</body>

在这里插入图片描述在这里插入图片描述
练习：做注册页面

<style>
   .box{
      width: 400px;
      height:300px;
      margin: 100px auto; 
    }
    input{
        height:20px;
      
    }
    .pass{
      margin-top:20px;
    }
    #eye{
        position: relative;
        top:5px;
        right:30px;
        width: 24px;
    }

    .ok{
        color:green;

    }
    .fail{
        color:red;
    }
</style>
<body>
    <div class="box">
        <div class="user">
        <label>用户名：<input type="text" id="txt"> <span class="msg" ></span></label>
      </div>
        <div class="pass">
        密&nbsp;&nbsp;&nbsp;&nbsp;码:
        <input type="password" id="pwd">
        <img src='../images/close.png' alt="" id="eye">
    </div>
</div>
     
<script>
let txt =document.querySelector('#txt')
let pwd = document.querySelector('#pwd')
let msg =document.querySelector('.msg')
let img=document.querySelector('#eye')

//设置图片和input的type属性
txt.onblur =function(){ //失去焦点产生
    if(this.value==='abc'){
        msg.innerHTML='用户名可用'
        msg.className='ok'
    }else{
        msg.innerHTML='用户名不可用'
        msg.className='fail'
    }
}
let flag = 0//标记变量，为1是显示密码，0时因此隐藏密码
eye.onclick = function(){
    if(flag == 0){
        pwd.type = 'text'
        this.src = '../images/open.png'   //this代表当前元素
        flag = 1
    }else{
        pwd.type = 'password'
        this.src = '../images/close.png'
        flag = 0
    }
}  
    </script>   
</body>

在这里插入图片描述在这里插入图片描述

꒰ঌsnail໒꒱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
抽象基类的继承、DOM、JavaScript事件
weixin_61561066的博客
06-16 351
目录一、继承1、抽象基类（抽象类）2、super的使用（1）super在类继承过程中代表基类（2）使用super时应注意的问题 二、DOM1、WebAPI2、JavaScript的组成3、DOM4、DOM的应用（1）通过document获取页面的元素（2）HTML5中新增的获取元素的方法（3）document对象的属性三、事件1、事件的三要素 2、页面元素的操作内容 3、操作元素的属性 4、操作元素的样式（1）操作元素的style属性（2）操作元素的className属性（1）抽象类：有些类不能实例化，但可
Visual C++实践与提高-COM和COM+篇『PDF』
05-22
2.3.2.1 什么是抽象基类（Abstract Base Class） 2.3.2.2 实现秘诀：虚函数（Virtual Functions） 2.3.3 使用抽象基类 2.3.4 例程实现 2.3.4.1 修改接口文件 2.3.4.2 修改对象程序 2.3.4.3 修改客户程序 2.4 改由COM...
JavaScript系列之抽象基类
老__L的博客
02-19 522
抽象基类
【TypeScript】类、类的属性及抽象类（七）
suwu150
09-23 1755
传统的JavaScript程序使用基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript，允许开发者可以使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，而不需要等到下个JavaScript版本。// 类作用域。
JavaScript抽象类及Class.create备忘
weixin_33862993的博客
01-14 151
我们知道抽象在面向对象中的重要地位。而JavaScript虽不是一门户严格意义上的面向对象语言，但，它也可以有自己的面向对象实现。当然包括抽象。在JavaScript中,虚方法可以看作该类中没有定义的方法,但已经通过this指针使用了.通过下面的示例可以看出： 1vartmp=function()2{3{4this.ini.apply(this,arguments);...
抽象类 js
清风的专栏
09-07 659
<br />6.7  实现抽象类<br /><br />6.7.1  抽象类和虚函数<br /> 虚函数是类成员中的概念，是只做了一个声明而未实现的方法，具有虚函数的类就称之为抽象类，这些虚函数在派生类中才被实现。抽象类是不能实例化的，因为其中的虚函数并不是一个完整的函数，不能被调用。所以抽象类一般只作为基类被派生以后再使用。<br /> 和类的继承一样，JavaScript并没有任何机制用于支持抽象类。但利用JavaScript语言本身的性质，可以实现自己的抽象类。<br /><br /> 6.7.
JS 抽象类
dianzongfan5428的博客
05-22 559
6.7 实现抽象类 6.7.1 抽象类和虚函数 虚函数是类成员中的概念，是只做了一个声明而未实现的方法，具有虚函数的类就称之为抽象类，这些虚函数在派生类中才被实现。抽象类是不能实例化的，因为其中的虚函数并不是一个完整的函数，不能被调用。所以抽象类一般只作为基类被派生以后再使用。 和类的继承一样，JavaScript并没有任何机制用于支持抽象类。但利用JavaScript语言本身的性...
由Javascript的继承引发的：抽象类、接口、多态，甚至是类型转换！
04-21
NULL 博文链接：https://xue777hua.iteye.com/blog/1914615
js 抽象基类
weixin_42353499的博客
03-24 1140
1. 抽象基类 有时候可能需要定义这样一个类，它可供其他类继承，但本身不会被实例化。虽然 ECMAScript 没 有专门支持这种类的语法 ，但通过 new.target 也很容易实现。new.target 保存通过 new 关键字调用的类或函数。通过在实例化时检测 new.target 是不是抽象基类，可以阻止对抽象基类的实例化 // 抽象基类 class Vehicle { constructor() { console.log(new.target); if (new.
js接口 抽象类 在web开发当中的应用
zrwdopod03的专栏
09-10 1740
{CSDN:CODE:resources}
JavaScript实现抽象类
Edwin的专栏
01-08 2524
抽象类和虚函数    虚函数是类成员中的概念，是只做了一个声明而未实现的方法，具有虚函数的类就称之为抽象类，这些虚函数在派生类中才被实现。抽象类是不能实例化的，因为其中的虚函数并不是一个完整的函数，不能被调用。所以抽象类一般只作为基类被派生以后再使用。和类的继承一样，JavaScript并没有任何机制用于支持抽象类。但利用JavaScript语言本身的性质，可以实现自己的抽象类。在Ja
Typescript防止基类被实例化
07-28 245
Typescript防止基类被实例化。
DOM事件类详解，有这一篇就够了
weixin_41643133的博客
03-22 436
DOM事件的级别 DOM0 element.onclick = function(){} DOM2 element.addEventListener(‘click’, funttion(){}, false) DOM3 element.addEventListener(‘keyup’, funttion(){}, false) DOM3 较 DOM2 多了很多事件类型 DOM事件流 概念：...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 184
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值