js高级-课堂笔记
js高级-课堂笔记
-
变量定义：let
-
常量定义：const
-
数据类型：
- boolean：布尔类型
- number：数字类型
- string：字符串类型，单引号和双引号都可定义
- object：对象类型
- undefined：未定义类型
-
运算符：和Java的非常相似，不同的有：
-,*,/：如果有字符串，js会尝试转换成数字再运算- 如果转换不成功，结果是NaN
- 如果除以0，结果是Infinity
==：比较值。只要值相等，结果就是true===：比较值和类型。只有值和类型都一样，结果才是true
-
流程控制语句：和Java非常相似，不同的是判断条件
- js的判断条件可以是任意类型
- number：0是false，非0是true
- string："“是false，非”"是true
- object：null是false，非null是true
- undefined：始终是false
- js的判断条件可以是任意类型
-
函数
- 普通函数
function add(a,b){ return a+b; } let result = add(1, 3);- 匿名函数
//1 把匿名函数赋值给一个变量，通过变量名调用 let add = function(a,b){ return a+b; } let result = add(1, 2); //2 把匿名函数作为其它函数的实参传递进去 setInterval(function(){},1000)- 函数没有重载，同名函数会覆盖掉，只有最后一个有效
- 函数调用时，形参个数和实参个数无关，仅仅是通过函数名调用
-
事件
-
常用事件：
- 单击onclick
- 双击ondblclick
- 表单提交onsubmit
- 加载完成onload
- 域内容改变onchange
- 获取焦点onfocus
- 失去焦点onblur
- 键盘3个：onkeydown，onkeypress，onkeyup
- 鼠标5个：onmousedown，onmouseup，onmouseover，onmouseout，onmousemove
-
事件绑定
- 普通函数方式
<input type="button" value="按钮" onclick="show(this)"> <script> function show(obj){ //obj的实参值 就是按钮对象 alert(); } script>- 匿名函数方式
<input type="button" value="按钮" id="btn"> <script> let button = document.querySelector("#btn"); button.onclick = function(){ //this：当前事件源-按钮标签对象 alert(); } script>
-
-
js的引用数据类型（内置类）
- Array数组
- Date日期
- Math数学工具
- String字符串
- RegExp正则表达式
-
js的组成：
- ECMAScript：基本语法
- BOM：操作浏览器的
- DOM：操作网页的
一、bom
1. bom对象简介
目标
- 了解bom的概念
- 知道有哪些bom对象
讲解
- BOM：Browser Object Model，浏览器对象模型，可以理解为是把浏览器封装成的对象，这些对象提供了操作浏览器的方法
- 目的：让js代码调用bom对象的方法，来操作浏览器
- 有哪些bom对象：
window：浏览器窗口对象，是其它bom对象的顶级对象location：浏览器地址对象，可以实现网页跳转。window.location，可以简写成locationhistory：浏览器历史记录对象，可以实现历史记录切换。window.history，简写成historyscreen：浏览器的屏幕显示信息对象，可以操作浏览器窗口大小、位置、颜色等信息window.screennavigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息window.navigator，简写成navigator
小结
- 了解bom的概念
- 浏览器对象模型，提供了操作浏览器的方法
- 知道有哪些bom对象
- window：浏览器窗口对象，是所有bom对象的顶级对象
- location：浏览器地址信息对象，可以用来获取当前网址、设置网址（网址跳转）
- history：历史记录信息对象，可以用来操作历史记录
- screen：浏览器屏幕显示信息对象
- navigator：浏览器信息对象，可以获取浏览器的内核、版本、操作系统等信息
2. window对象
目标
- 能够使用window弹窗
- 能够开启和清除定时器
- 了解一些全局函数
讲解
让浏览器弹窗
- API：
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
alert(string) |
提示信息内容 | 无 | 普通弹窗 |
confirm(string) |
提示信息内容 | boolean | 确认弹窗 |
prompt(string) |
提示信息内容 | string/null | 输入弹窗 |
- 示例
//1.普通弹窗：用于提示、警告 没有返回值
//let v = window.alert("普通弹窗");
let v = alert("普通弹窗");
alert(v);
//2.确认弹窗：用于敏感操作前的二次确认 返回值：boolean
let v = confirm("确定要删除吗？");
alert(v);
//3.输入弹窗：用于让用户输入一些数据（不常用） 点击确定，返回输入的内容；点击取消，返回null
let v = prompt("请输入姓名：");
alert(v);
让浏览器开启定时器
- API
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
setInterval(fn,ms) |
fn：函数对象 ms：间隔毫秒值 |
number，定时器的id | 开启执行多次的定时器 |
clearInterval(id) |
id：定时器的id | 清除定时器 | |
setTimeout(fn, ms) |
fn：函数对象 ms：延迟毫秒值 |
number，定时器的id | 开启执行一次的定时器 |
clearTimeout(id) |
id：定时器的id | 清除定时器 |
- 示例
//1. 执行多次的定时器
//1.1 开启一个定时器。 setInterval函数仅仅是按了定时器的开关。浏览器自动计时，到时之后自动调用匿名函数对象
let timer = setInterval(function () {
alert();
}, 2000);
//2. 执行一次的定时器
//2.1 开启一个定时器
let timer = setTimeout(function () {
alert();
}, 2000);
//3 清理定时器
function stopTimer(){
//清理执行多次的定时器
//clearInterval(timer);
//清理执行一次的定时器
clearTimeout(timer);
}
提供了一些全局函数【了解】
- API
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
parseInt(string) |
字符串 | number | 转换成整数 |
parseFloat(string) |
字符串 | number | 转换成小数 |
eval(string) |
字符串 | 把字符串作为js代码执行一次 |
- 示例
let v = "3.99";
let v1 = parseInt(v);
//alert(v1);
let v2 = parseFloat(v);
//alert(v2);
v = "let i=1; let j=2; alert(i+j);";//字符串类型
eval(v);
小结
- window提供了弹窗方法：可以让浏览器弹窗
- 普通弹窗：
alert("普通弹窗")，没有返回值 - 确认弹窗【重点】：
confirm("确定要删除吗？")，点击确定返回true，点击取消返回false- 通常删除一些数据之前，要先弹出确认窗口。用户点击了确定之后，再删除，避免误删
- 输出弹窗：
prompt("请输入姓名：")，点击确定返回输入的内容，点击取消返回null
- 普通弹窗：
- window提供了定时器【会用】
- 执行多次的定时器
- 开启：
let timer = setInterval(fn, ms) - 清除：
clearInterval(定时器的id)
- 开启：
- 执行一次的定时器
- 开启：
let timer = setTimeout(fn, ms) - 清除：
clearTimeout(定时器的id)
- 开启：
- 执行多次的定时器
- window提供了一些全局函数【了解】
parseInt()：转换成整数parseFloat()：转换成小数eval()：把字符串作为js代码执行一次
3. location对象【重点】
目标
- 能够使用location进行页面跳转
讲解
- location对象拥有的属性和方法
| 方法/属性 | 说明 | 示例 |
|---|---|---|
href |
获取/设置网址 | 获取网址：let url = location.href网址跳转： location.href="http://www.baidu.com" |
reload() |
刷新当前页面 | location.reload() |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>locationtitle>
head>
<body>
<input type="button" value="获取当前网址" onclick="getUrl()"><br>
<input type="button" value="跳转到百度" onclick="baidu()"><br>
<input type="button" value="刷新当前页" onclick="refresh()">
<script>
function getUrl() {
//获取当前网址
let url = location.href;
alert(url);
}
function baidu() {
//跳转到百度
location.href = "http://www.baidu.com";
}
function refresh() {
//刷新当前页
location.reload();
}
script>
body>
html>
小结
- 获取网址：
let url = location.href; - 设置网址（网址跳转）【重点】：
location.href = "跳转的地址" - 重新加载当前页面：
location.reload()
4. history对象【拓展了解】
目标
- 练习：模拟浏览器的前进和后退按钮功能
讲解
API
| 方法 | 说明 | 参数 | 示例 |
|---|---|---|---|
forward() |
前进一步 | history.forward() |
|
back() |
后退一步 | history.back() |
|
go(n) |
切换n步 | n：整数。正数前进，负数后退 | history.go(-1) |
练习
- 第一页
page1.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一页title>
head>
<body>
<h1>第一页h1>
<a href="page2.html">到第二页a>
body>
html>
- 第二页
page2.html：提供 “前进一步” 和 “后退一步” 功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二页title>
head>
<body>
<h1>第二页h1>
<a href="page3.html">到第三页a>
<hr>
<input type="button" value="后退一步" onclick="goBack()">
<input type="button" value="前进一步" onclick="goForward()">
<script>
function goForward() {
history.forward();
}
function goBack() {
history.back();
}
script>
body>
html>
- 第三页
page3.html：提供 ”后退两步“ 功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三页title>
head>
<body>
<h1>第三页h1>
<hr>
<input type="button" value="后退一步" onclick="goBack()">
<input type="button" value="后退两步" onclick="goBack2()">
<script>
function goBack() {
history.back();
}
function goBack2() {
history.go(-2);
}
script>
body>
html>
- 打开
page1.html，点击超链接跳转到第二页，再点击链接跳转到第三页：目的是制造一些历史记录 - 演示历史记录切换的效果：
- 在第三页点击“后退一步”：会退回到第二页
- 在第二页点击“前进一步”：会前进到第三页
- 在第三页点击“后退两步”：会直接后退到第一页
小结
二、dom
1. 简介
目标
- 了解dom的概念
- 了解dom树的概念
讲解
dom
- dom：Document Object Model，文档对象模型，可以理解为是把整个html网页封装成的对象，dom对象提供了操作网页的方法
- 作用：操作网页的
- 可以操作标签：获取标签、创建标签、插入标签、删除标签
- 可以操作属性：获取标签的属性值，设置标签的属性值
- 可以操作css样式
dom树
- 网页被加载到浏览器的内存中后，网页上所有的标签、属性、文本全部都会转换成节点对象，然后按照层级结构形成一个树形结构，这棵树叫dom树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1IMWLoUV-1592826055085)(img/dom树.png)]
小结
- dom：文档对象模型，提供了操作网页的方法
- dom树：浏览器解析html的原理
- 浏览器加载了html之后，使用dom方式解析html
- 会把整个html封装成Document对象
- 把html里所有的标签、属性、文本都封装成节点对象，按照原本的层级结构组装成树形，这棵树叫dom树
- 整个html文档封装成Document（文档对象）
- 全部标签（元素）封装成Element（元素对象）
- 全部属性封装成Attribute（属性对象）
- 全部文本封装成Text（文本对象）
2. 使用dom操作标签
目标
-
能够使用dom操作标签
-
练习：点击按钮，把所有市添加到下拉框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UrLy6JiY-1592826055088)(img/image-20200516163313214.png)]
步骤
- 能够获取到标签对象
- 能够创建标签、插入标签、删除标签
- 能够获取和设置标签体内容
讲解
1. 获取标签
document对象提供了获取标签Element的方法
ES6提供的获取标签方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
querySelector(selector) |
获取一个标签 | 选择器字符串 | Element |
querySelectorAll(selector) |
获取多个标签 | 选择器字符串 | Element类数组 |
ES5老版本获取标签方法【了解】
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
getElementById("id值") |
根据id获取标签对象 | 标签的id | Element |
getElementsByName("name值") |
根据标签name获取标签对象 | 标签的name | Element类数组 |
getElementsByTagName("标签名") |
根据标签名称获取标签对象 | 标签名称 | Element类数组 |
getElementsByClassName("类名") |
根据标签class获取标签对象 | 标签的class | Element类数组 |
| 子元素对象.parentElement | 获取当前元素的父元素 | 无 | 父标签对象 |
2. 创建标签
document对象提供了创建标签Element的方法
注意：创建出来的标签不会立即生效，必须要插入到dom树里
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
createElement("标签名称") |
创建标签 | 标签名称，比如：option |
Element对象 |
3. 插入标签
标签Element对象提供了插入标签的方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
父标签对象.appendChild(element) |
追加插入子标签 | 要插入的标签Element |
4. 删除标签
标签Element对象提供了删除的方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
remove() |
删除标签 | ie浏览器不兼容，建议用下面这个 | |
| 父标签对象.removeChild(子标签对象) | 删除标签 | ||
5. 操作标签体内容
- Element对象提供了获取和操作标签体的API
- 获取标签体内容：
let inner = 标签element.innerHTML - 设置标签体内容：
标签element.innerHTML = "新的标签体内容"- 是覆盖式设置
- 设置的html代码会生效
- 获取标签体内容：
6. 练习：生成下拉选项
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生成下拉选项title>
head>
<body>
<input type="button" value="把数组里的市添加到下拉框" onclick="addOption()">
<br>
<select name="city" id="city">
<option value="">--选择市---option>
select>
<script>
let cityArr = ["深圳市", "广州市", "东莞市"];
let citySelect = document.querySelector("#city");
function addOption() {
//先把city下拉框里的内容清空：不要全部清除掉，要保留提示选项
citySelect.innerHTML = "";
for (let city of cityArr) {
//1. 创建一个option标签
let opt = document.createElement("option");
//2. 设置标签体内容为：城市名称
opt.innerHTML = city;
//3. 把标签插入到city下拉框里
citySelect.appendChild(opt);
}
}
script>
body>
html>
小结
- 获取标签：
document.querySelector("选择器")：查询一个标签，返回的是Elementdocument.querySelectorAll("选择器")：查询一批标签，返回的是Element的数组
- 创建标签：
document.createElement("标签名称")，返回值是创建出来的标签Element对象- 创建出来的标签，如果不插入到dom树里，是不会生效的
- 插入标签：
父标签对象.appendChild(子标签对象)
- 删除标签：
标签对象.remove()
3. 使用dom操作属性
目标
- 掌握dom操作属性的方法
- 练习：模拟浏览器的功能-查看密码框的值
讲解
API
标签Element对象提供了操作属性的方式
- 获取属性值：
let v = 标签element.属性名称; - 设置属性值：
标签element.属性名称 = 值; - 注意：因为
class是关键字，所以操作class属性的方式有点特殊：- 获取class属性值：
let className = 标签element.className - 设置class属性值：
标签element.className = "值";
- 获取class属性值：
- 操作样式：有浏览器兼容性问题，后期会被jQuery代替掉
- 获取样式：
let v = 标签element.style.样式名 - 设置样式：
标签element.style.样式名= 值
- 获取样式：
- innerText 添加文本内容，不解析标签
- innerHTML 添加文本内容，解析标签(建议使用)
拓展了解：
以下方式也可操作属性
方法 说明 参数 返回值 getAttribute(attrName)获取属性值 属性名称 属性值 setAttribute(attrName, attrValue)设置属性值 属性名称,属性值 removeAttribute(attrName)删除属性 属性名称
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
//1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
// a.setAttribute("href","https://www.baidu.com");
a.id="sad";//建议用这个来添加属性，设置属性
// a.href="https://www.baidu.com";
//2. getAttribute() 获取属性
// let value = a.getAttribute("href");
//alert(value);
// let value = a.href;//建议用这个，直接标签对象.属性名来获取属性
// alert(value);
//3. removeAttribute() 删除属性
//a.removeAttribute("href");
//4. style属性 添加样式
//a.style.color = "red";
//5. className属性 添加指定样式
// a.className = "aColor";
a.className="aColor";
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性title>
head>
<body>
<form action="#" method="get">
帐号：<input type="text" id="username" name="username" class="inputItem" value="大郎"><br>
<input type="checkbox" id="policy" checked>同意我们的许可协议
form>
<hr>
<input type="button" value="获取文本框的name属性值" onclick="getName()">
<input type="button" value="设置文本框的name属性值" onclick="setName()"><br>
<input type="button" value="获取文本框的class值" onclick="getClass()">
<input type="button" value="设置文本框的class值" onclick="setClass()"><br>
<input type="button" value="获取复选框的选中状态" onclick="getChecked()">
<input type="button" value="设置复选框的选中状态" onclick="setChecked()">
<script>
let username = document.querySelector("#username");
function getName() {
let v = username.name;
alert(v);
}
function setName() {
//设置后，在浏览器F12=》Elements里，查看源码可见
username.name = "uname";
}
function getClass() {
let v = username.className;
alert(v);
}
function setClass() {
//设置后，在浏览器F12=》Elements里，查看源码可见
username.className = "item";
}
let policy = document.querySelector("#policy");
function getChecked() {
let checked = policy.checked;
alert(checked);
}
function setChecked() {
policy.checked = false;
}
script>
body>
html>
练习：查看密码功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查看密码title>
head>
<body>
<input type="password" id="pwd">
<input type="button" value="查看密码" onmousedown="showPwd()" onmouseup="hidePwd()">
<script>
let pwd = document.getElementById("pwd");
function showPwd() {
pwd.type = "text";
}
function hidePwd() {
pwd.type = "password";
}
script>
body>
html>
小结
三、练习
1. 隔行换色功能
目标
- 实现表格的隔行换色功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJTCXitn-1592826055092)(img/image-20200512085115024.png)]
分析
- 使用js给除第1行之外的行设置背景色样式
- 如果是偶数行，设置背景色为浅绿色
- 如果是奇数行，设置背景色为浅蓝色
实现
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table {
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td, th {
border: 1px solid blue;
text-align: center;
}
style>
head>
<body>
<table>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>1td>
<td>td>
<td>td>
tr>
<tr>
<td>2td>
<td>td>
<td>td>
tr>
<tr>
<td>3td>
<td>td>
<td>td>
tr>
<tr>
<td>4td>
<td>td>
<td>td>
tr>
<tr>
<td>5td>
<td>td>
<td>td>
tr>
<tr>
<td>6td>
<td>td>
<td>td>
tr>
table>
<script>
//1.获取到所有的行tr标签对象
var rows = document.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
//判断奇偶，设置不同的背景颜色
if (i % 2) {
rows[i].style.backgroundColor = "lightblue";
}else{
rows[i].style.backgroundColor = "lightgreen";
}
}
script>
body>
html>
小结
2. 全选全消功能
目标
- 实现复选框的全选全消功能
实现
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table {
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td, th {
border: 1px solid blue;
text-align: center;
}
style>
head>
<body>
<table>
<tr>
<th style="width:100px;">
<input type="button" value="反选" onclick="inverse()">
th>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>1td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>2td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>3td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>4td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>5td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item"/>
td>
<td>6td>
<td>td>
<td>td>
tr>
table>
<script>
function check(){
//获取checkall的checked属性值
let v = document.querySelector("#checkall").checked;
//获取所有的item
let items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].checked = v;
}
}
/**
* 反选：
* 思路1：获取所有的item，循环遍历每一个，获取选中状态取反
* 思路2：获取所有的item，循环遍历每一个，模拟一次点击操作
*/
function inverse(){
let items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
//items[i].checked = (!items[i].checked);
items[i].click();
}
}
script>
body>
html>
小结
3. 省市联动功能
目标
- 实现省、市两个下拉框的联动功能
实现
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动title>
head>
<body>
<select name="province" id="province" onchange="changeCity()">
<option value="">--选择省--option>
<option value="0">广东省option>
<option value="1">广西省option>
<option value="2">山东省option>
<option value="3">山西省option>
select>
<select name="city" id="city">
<option value="">--选择市--option>
select>
<script>
var cities = [
["广州市","深圳市","惠州市"],
["桂林市","柳州市","南宁市"],
["济南市","烟台市","秦皇岛"],
["太原市","阳泉市","大同市"]
];
function changeCity(){
let city = document.querySelector("#city");
//把city里之前的选项清除掉，只保留提示选项
city.innerHTML = "";
//1. 获取选择的省
let pro = document.querySelector("#province").value;
//2. 省的值作为cities的索引，得到对应的市（数组）
let cityArr = cities[pro];
//3. 循环每个市
for (var i = 0; i < cityArr.length; i++) {
let cityName = cityArr[i];
//4. 创建一个option标签，把cityName放到option标签体里
let opt = document.createElement("option");
opt.innerHTML = cityName;
//5. 把option标签插入到city下拉框里
city.appendChild(opt);
}
}
script>
body>
html>
小结
四，javascript面向对象
1，类的定义和使用
-
定义格式
class 类名{
constructor(变量列表){
变量赋值;
}
方法名(参数列表){
方法体;
return 返回值;
}
}
- 使用格式
let 对象名=new 类名(实际变量值)；
对象名.方法名();
```js
类的定义和使用
2，字面量，类的定义和使用
实际上是直接创建对象使用
定义格式
let 对象名={
变量名 :变量值,
变量名 :变量值,
...
方法名 :function(参数列表){
方法体;
return 返回值;
},
...
}
使用格式
-
对象名.变量名
-
对象名.方法名();
<body> </body> <script> //定义person let person = { name : "张三", age : 23, hobby : ["听课","学习"], eat : function() { document.write("吃饭..."); } }; //使用person document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
"); person.eat(); //练习 let athlete={ height : 180, age :20, sport : function(type){ console.log(type); }, sing : function(){ console.log() } }; athlete.sport("many people"); </script> </html>
3，继承
继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
-
继承关键字：extends
-
顶级父类：Object
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>继承</title> </head> <body> </body> <script> //定义Person类 class Person{ //构造方法 constructor(name,age){ this.name = name; this.age = age; } //eat方法 eat(){ document.write("吃饭..."); } } //定义Worker类继承Person class Worker extends Person{ constructor(name,age,salary){ super(name,age); this.salary = salary; } show(){ document.write(this.name + "," + this.age + "," + this.salary + "
"); } } //使用Worker let w = new Worker("张三",23,10000); w.show(); w.eat(); </script> </html>
4，面向对象小结
-
面向对象
-
把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。
-
类的定义
- class 类{}
- 字面量定义
-
类的使用
-
let 对象名 = new 类名();
-
对象名.变量名
-
对象名.方法名()
-
继承
-
让类和类产生子父类关系，提高代码的复用性和维护性。
-
子类 extends 父类
-
Object 顶级父类
上午内容复习
-
如何操作浏览器
-
使用window：让浏览器弹窗
alert(string)：普通弹窗，没有返回值confirm(string)：【重点】确认弹窗，点击确定返回true，点击取消返回falseprompt(string)：输入弹窗，点击确定返回输入的内容，点击取消返回null
-
使用window：开启定时器【会用】
-
执行多次的定时器
//返回值：number类型，是定时器的id let timer = setInterval(function(){ //要执行的周期性任务的代码 }, 2000); clearInterval(timer); -
执行一次的定时器
//返回值：number类型，是定时器的id let timer = setTimeout(function(){ //要执行的延迟的任务的代码 }, 2000); clearTimeout(timer); -
-
使用window提供的一些全局函数【了解】
parseInt(string)：转换成整数parseFloat(string)：转换成小数eval(string)：把字符串作为js代码执行一次
-
-
如何操作网页
- 获取标签
- 获取一个：
let element = document.querySelector("选择器") - 获取多个：
let elements = document.querySelectorAll("选择器")
- 获取一个：
- 创建标签
let elmenet = document.createElement("标签名称")- 创建出来的标签，要插入到dom树，否则无效
- 插入标签
父标签对象.appendChild(子标签对象)
- 删除标签
标签对象.remove()
- 操作标签体
- 获取标签体的代码：
let html = 标签对象.innerHTML - 设置标签体的代码：
标签对象.innerHTML = "要设置的内容"- 设置的html代码会生效
- 是覆盖式设置
- 获取标签体的代码：
- 操作属性
- 获取属性：
let v = 标签对象.属性名称 - 设置属性：
标签对象.属性名称 = 值 - 特殊的属性操作：class
- 获取class属性值：
let cls = 标签对象.className - 设置class属性值：
标签对象.className = "值"
- 获取class属性值：
- 获取属性：
- 操作样式：
标签对象.style.样式名 = 值
- 获取标签
-
东西太多了，记不住：没有人听一遍，就永远的记住了
- 你期望学多少东西？学的越多越好
- 能少点吗？不能少，满足功能需求的最少的知识集合了
- 如何才能尽快记住？
- 以API为核心的记法：把所有API全记录下来。=》不好
- 以实现功能为目标：想做什么，哪个API可以实现
- 时间久了会忘？生理现象
- 坚持复习，定期回顾
-
听的似懂非懂，听的时候知道，写的时候不知道怎么办
- 你期望达到什么效果？听一遍，下笔如有神，什么东西都能很快做出来
- 现实呢？完全做不到
- 应该做的是什么？
- 听了之后，自己先敲几遍，把课堂上讲的东西吸收消化成自己的
- 经过练习、长期的使用，稳固成自己的知识