目录
1. web APIs 和JS基础关联性
1.1 JS 的组成
- JavaScript由以下三部分组成
- ECMAScript： JavaScript的语法（JavaScript基础）
- DOM：页面文档对象模型 （Web APIs）
- BOM： 浏览器对象模型（Web APIs）
- JS基础阶段：掌握ECMAScript标准语法 ，做不了网页交互，为JS打基础，做铺垫
- Web APIs阶段：是w3c的基础，是JS独有的部分，主要学习DOM和BOM，可以实现页面交互功能
web APIs 是JS的应用，大量使用JS基础语法做交互效果
1.2 API 和 Web API
1.2.1 API
API（application programming interface 应用程序编程接口）是一些预先定义的函数，目的是提供开发人员基于软件或者硬件得到访问一组例程的能力，而无需访问源码，理解内部工作机制的细节
简单理解：API 是给程序员提供的一种工具，以便可以轻松的完成需要的功能
1.2.2 Web API
是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM），主要是做交互效果
1.2.3 总结
1.API 是我们开发的一个接口，帮助实现功能，会使用就行
2.web API 一般都有输入输出（函数的传参和返回值），web API 很多都是方法（函数）
3.学习Web API可以结合学习对象方法的思路学习
2. DOM
2.1 DOM 简介
文档对象模型（document object model），是w3c组织推荐的处理可拓展标记语言（html或者xml）的标准编程接口。可以改变网页的内容、结构、样式
2.1.1 DOM 数
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面的所有标签都是元素，用element表示
- 节点：网页中所有的内容都是节点（标签、属性、文本、注释），用node表示
DOM 把以上内容都看做是对象
3. 获取元素
3.1 ID获取
var element = document.getElementById(id);
- 页面从上往下执行，所有script标签写在标签的下面
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID- 返回值：返回的是元素对象
3.2 标签名获取
Document.getElementsByTagName()
- 返回带有指定标签名的对象的集合，以伪数组的形式存储，操作元素需要遍历
- 得到的元素是动态的，内容变也会跟着变
- 如果页面只有一个元素，也是伪数组形式返回，空的也是元素为空的伪数组
获取某个元素（父元素）的指定字标签：
element.getElementsByTagName(‘标签名’)
父元素必须是单个对象（必须指定哪一个元素的对象），获取不包括父元素
3.3 HTML5 新增方法获取
1. getElementsByClassName()
document.getElementsByClassName('类名’) // 根据类名返回元素对象集合
2. document.querySelector()
document.querySelector(‘选择器’) // 根据指定选择器返回第一个元素对象
注意：里面的选择器需要加符号 id加. 类加 #
3. Document.querySelectorAll()
Document.querySelectorAll(‘选择器’) 根据选择指定返回所有元素对象集合
3.4 特殊元素获取
特殊元素 body、html、元素等
1. body 标签获取
var bodyEle = document.body;
2. html 元素获取
var h = document.documentElement
4. 事件基础
4.1 事件概述
JavaScript 创建动态页面，而事件可以被JavaScript 侦测到的行为
简单理解：触发---响应机制
网页中每个元素都可以产生可以触发JavaScript的事件，如点击按钮实现某个操作
4.2 事件三要素
事件三要素：事件源，事件类型，事件处理程序
- 事件源：事件被触发的对象，谁，按钮
- 事件类型：如何触发，如：鼠标点击onclick，经过，按键
- 事件处理程序：通过一个函数赋值方式 完成
4.3 执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序
4.3.1 常见的鼠标事件
| 鼠标事件 | 触发事件 |
| onclick | 鼠标经过左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmouesedown | 鼠标按下触发 |
5. 操作元素
操作原始可以改变网页内容、结构、样式，元素里面的属性等
5.1 改变元素的内容
1、element.innerText = （非标准）
从开始位置到终止位置的内容，但不识别html标签，同时空格和换行也会去去掉
2、element.innerHTML = （w3c标准，使用较多）
起始位置到终止位置，识别html标签，同时保留空格和换行
这两个属性是可以读写的，可以获取元素里面的内容
5.2 常用元素的属性操作
- innerText、innerHTML
- scr、href
- id、alt、title
5.3 分时间问候案例
案例：根据不同时间问候
- 分析：根据系统不同时间来判断，用到日期对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，根据时间修改图片，用来scr属性
- 需要div元素，显示不同问候语，修改元素内容
5.4 修改表单属性
DOM可以操作如下元素的表单属性：
type、value、checked、selected、disabled
注意：表单里面的值是通过value来修改的，用innnerHTML修改不了
5.4.1 仿京东显示密码的案例
案例：点击按钮将密码框切换为文本框，并可以查看密码明文
- 核心思路：点击按钮，把密码框类型改文本框，就可以看见密码了
- 一个按钮有两个状态，点击一次，切换文本框，继续点击切换密码框
- 算法：利用flag变量，判断flag值，flag设置为0，o密码框，1文本框
<!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>
<style>
.box {
width: 800px;
height: 75px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 300px;
height: 30px;
border: 0px solid black;
}
img {
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<span>密码：</span>
<label for="">
<img src="images/close.jpeg" alt="">
</label>
<input type="password" id="pwd">
</div>
<script>
var pwd = document.getElementById('pwd');
var imgs = document.querySelector('img');
// 处理
var flag = 0;
imgs.onclick = function () {
// 点击加一
if (flag == 0) {
pwd.type = 'text';
imgs.src = 'images/open.jpeg';
flag = 1;
} else {
pwd.type = 'passsword';
imgs.src = 'images/close.jpeg';
flag = 0;
}
}
</script>
</body>
</html>5.5 样式属性操作
通过js修改元素的大小，颜色，位置
element. style 行内样式操作
element. className 类名样式操作
前者在修改样式少或者功能简单下使用
注意：JS的样式命名采用驼峰命名法
JS 修改style 样式操作，产生的是行内样式，css权重比较高；
5.5.1 关闭二维码案例
- 核心思路：用样式的显示和隐藏完成，display.none，display.block
- 点击按钮，让二维码的盒子隐藏
<!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>
<style>
</style>
<body>
<div class="box">
<img src="images\taobao.png" alt="">
<i> × </i>
</div>
<script>
var box = document.querySelector('.box');
var closes = document.querySelector('i');
closes.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>5.5.2 循环精灵图案例
- 分析：图片排列是有规律的
- 核心思路：用for循环，修改精灵图的背景位置 background-position
- 循环里面的 i 索引号*44就是每个图标的y位置
<!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>
<style>
ul {
width: 140px;
margin: 100px auto;
}
li {
float: left;
list-style: none;
width: 24px;
height: 24px;
margin: 5px 5px;
background-color: rgb(220, 168, 168);
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px'; //0-44 px
}
</script>
</body>
</html>5.5.3 显示隐藏文本框内容
表单需要2个新的表单事件，获得焦点onfocus，失去焦点onblur
获得焦点，判断表单内容是否为默认内容，如果是则清空内容
失去焦点，判断表单内容是否为空，为空则显示默认内容
5.5.4 用className修改样式属性
element. className 类名样式操作
- 修改较多属性下使用
- 会直接更改元素类名，会覆盖原先的类名
- 保留原先的类名：element. className=‘原先类 修改类’
5.5.5 密码框验证信息案例
案例：用户输入密码框，输入个数不是6-10，则提示错误信息
- 分析：判断事件是失去焦点onblur
- 如果输入正确，则提示正确信息，颜色为绿色，小图标变化
- 如果输入错误，则提示错误信息，颜色为红色，小图标变化
- 里面样式较多，采用className修改样式
<!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>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(images/wrong.png);
}
.right {
color: green;
background-image: url(images/right.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var msg = document.querySelector('.message');
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16) {
msg.className = 'message wrong';
msg.innerHTML = '您输入的密码长度错误';
} else {
msg.className = 'message right';
msg.innerHTML = '您输入正确';
}
}
</script>
</body>
</html>5.6 操作元素总结
操作元素有：
- 操作元素内容：innnerHTML、innnerText
- 操作常见的元素属性：src、href、title、alt
- 操作表单元素属性：type、value、disabled
- 操作元素样式属性：element. style、className
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
