目录
例如:为按钮绑定单击(click)事件。当单击按钮时弹出信息
3.操作元素的属性:在JavaScript中操作元素的HTML属性
一、继承
1.抽象基类(抽象类)
(1)有些类不能实例化,专门用于其他类的继承,这样的类称为
Person、Animal都是抽象基类,实例化没有实际意义,专门用于派生子类,在抽象基类中定义的方法,在其子类中会被覆盖(重写),通常抽象基类中的方法没有具体的实现
(2)JavaScript中实现抽象基类:在js中没有专门支持抽象类的语法,但是可以通过new.target来实现
class Animal{
constructor(){
if(new.target === Animal){//new.target代表的是新创建的对象的类型
throw new Error('抽象类不能实例化')
}
}
eat(){}
sleep(){}
}
2.super使用时注意的问题
(1)super在类继承过程中代表基类
(2)使用super时影注意的问题:
A.super可以在派生类的构造方法中使用(调用基类的构造方法)
B.在派生类中可以通过super调用基类的成员方法
C.在类的构造方法中,不能在调用super()之前使用this
D.如果在派生类中显示的定义了构造方法,则要么必须调用super(),要么必须在其中返回一个对象
二、DOM
1.webAPI
是浏览器提供的一套操作浏览器功能的页面元素的接口(包括DOM、BOM)
2.JavaScript的组成
(1)核心语法:ECMAScript5 -- ECMAScript2015(ES6) -- ECMAScript2016
(2)DOM:文档对象模型
(3)BOM:浏览器对象模型
3.DOM(Document Object Model)
文档对象模型,W3C推荐标准的标记语言是HTML,在DOM中把HTML文档看做成一棵树的结构,文档中的标签、标签的属性、标签的内容都是树的节点
(1)文档(document):一个页面(html文件)就是一个文档
(2)元素(element):页面中的标签
(3)节点(node):页面中的所有元素(包括元素节点、属性节点、内容节点、注释节点等),节点都是对象,都有属性和方法
4.DOM的应用
(1)通过document获取页面元素
A.通过id获取
document.getElementById(‘id属性值’)
因为元素的id属性值是不能重复的,因此该方法返回一个对象
B.根据标签名获取元素
document.getElementsByTagName(‘标签名’)
返回值是对象的集合,是一个类数组,不能使用push()方法,但是可以用数组名带索引的方式访问
C.根据标签的name属性名获取元素
document.getElementsByName(‘name属性名’)
标签的name属性值可以重复,所以该方法的返回值是一个集合
<body>
<label><input type="checkbox" name="fruit" value="苹果">苹果</label>
<label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
<label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
</body>
<script>
let arr = document.getElementsByName('fruit')
arr[1].checked = true
</script>
(2)HTML5中新增获取元素的方法
A.querySelector(‘#id’):根据id选择
B.querySelectorAll(‘标签名或.class属性值’):根据标签名或class属性值选择
C.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'
//让;‘数学’背景色为红色
two[0].style.backgroundColor = 'red'
</script>
(3)document对象的属性
A.title:页面标题
B.body:页面的body元素
C.forms:页面的表单元素
D.images:页面的图像元素
E.documentElement:返回页面的html元素
三、事件
可以被JavaScript侦听到的行为,是一种‘触发-响应’机制,在网页交互中起着非常重要的作用
1.事件的三要素
(1)事件源:触发事件的元素(谁触发了事件)
(2)事件的类型:触发了什么样的事件(单击、双击、鼠标移动等)
(3)事件处理程序(事件处理函数):当事件被触发后所执行的代码
例如:为按钮绑定单击(click)事件。当单击按钮时弹出信息
<body>
<button id="btn" onclick="show()">我是按钮</button>
<script>
function show(){
alert('你单击了按钮')
}
</script>
</body>
2.操作页面元素的内容
(1)innerHTML:起始标签和结束标签之间的内容,保留了空格和换行,以及html标签
(2)innerText:起始标签和结束标签之间的文本内容,去掉了空格和换行,对特殊字符进行转义
(3)textContent:起始标签和结束标签之间的文本内容,保留了空格和换行,对特殊字符进行转义
3.操作元素的属性:在JavaScript中操作元素的HTML属性
练习:页面中包含一个button和一个单行文本框
1.初始时button是不可用的
2.当文本框获取焦点可以输入内容时,按钮可用
<body>
<input type="text" id="text">
<button id="btn">确定</button>
<script>
let btn = document.querySelector('#btn')
btn.disabled = true //按钮不可用
let text = document.querySelector('#text')
text.onfocus = function(){ //当文本框获得焦点(触发focus事件),按钮可用
btn.disabled = false
}
text.onblur = function(){ //当文本框失去焦点(触发blur事件),按钮不可用
btn.disabled = true
}
</script>
</body>
4.操作元素的样式
(1)操作元素的style属性
元素对象.style.样式属性名
注意:JavaScript中使用样式属性名与css中的样式名是不同的:去掉原css样式属性名中‘-’,其后的单词首字母大写
示例:通过JavaScript设置div的style属性
</style>
<body>
<div class="first">西安邮电大学</div>
</body>
<script>
//获取元素
let box = document.querySelector('.first')
//给元素绑定click事件,改变box样式
box.onclick = function(){
this.className = 'change'
}
</script>
(2)操作元素的className样式
元素对象.className
练习:做注册页面
<style>
#form {
position: relative;
width: 400px;
border: 1px none #ccc;
padding: 2px;
}
#mm {
position: relative;
width: 250px;
border: 1px none #ccc;
padding: 2px;
}
#mm img {
position: absolute;
top: 4px;
right: 6px;
width: 24px;
cursor: pointer;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.ok {
color: green;
}
.no {
color: red;
}
</style>
<body>
<div id="form">
用户名:<input type="text" id="text">
<span class="span"></span>
</div>
<br><br>
<div id="mm">
<label>
<img src="./26127698e1681dbe1e5cd0e6f1464a0.png" id="eye" alt="">
密 码:
<input type="password" id="pwd">
</label>
</div>
</body>
<script>
//获取元素
let eye = document.querySelector('#eye')
let pwd = document.querySelector('#pwd')
//设置图片和input的type属性
let flag = 0 //标记变量,0显示明文,1显示密码
let text = document.querySelector('#text')
let span = document.querySelector('.span')
let form = document.querySelector('#form')
text.onblur = function () {
if (this.value === 'abc') {
span.textContent = '用户名可用'
span.className = 'ok'
} else {
span.textContent = '用户名不可用'
span.className = 'no'
}
}
eye.onclick = function () {
if (flag === 0) {
pwd.type = 'text'
this.src = './8f05c8292c4d2efc110ac233e3e3c94.png'//this代表当前元素
flag = 1
} else {
pwd.type = 'password'
this.src = './26127698e1681dbe1e5cd0e6f1464a0.png'
flag = 0
}
}
</script>