JS的组成
Web APIs与javascript基础的区别
Web APIs是js基础的应用，大量使用js基础做页面交互效果
API 与 Web AIP的区别
- API是提供给程序员的一种工具，以便更好的完成想要实现的功能。(充电接口)
- Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)
API 与 Web API的总结
- API是为程序员提供的一个接口，帮助我们实现某种功能，会用即可。
- Web AIP 主要是针对于浏览器提供的接口，主要针对浏览器做交互效果
- Web API一般都有输入和输出（函数的传参与返回值） Web ApI很多都是方法
DOM
DOM:文档对象模型，提供访问与操作网页内容的接口与方法。通过DOM，可以改变网页的结构与外观与样式
DOM树
- 一个页面就是一个文档，DOM中用document表示
- 页面中所有的元素被称为标签，DOM中用element表示
- 网页中所有的内容都是节点（标签 属性 文本 注释），DOM中使用node 表示
以上内容都可以看作对象
获取元素
通过id名获取
通过getElementById(id)获取
注意事项
- 返回元素对象
- 参数是一个大小写敏感的字符串
- 页面加载是从上往下加载的，所以script元素写在内容之下
- console.dir（）可以打印返回的元素对象，更好的查看元素对象的属性与方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">hello </div>
<script>
var box = document.getElementById('box');
console.log(box) //打印元素对象
console.log(typeof box) //查看元素对象类型
console.dir(box)
</script>
</body>
</html>
根据标签名获取元素
根据getElementsByTagName('标签名')获取
注意事项
- 参数为一个大小写敏感的字符串
- 返回值是一个元素对象集合，以伪数组的方式进行存储
- 可以通过遍历获取每一个元素对象
- 获取到的元素对象是动态的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>WEB前段自学者</li>
<li>WEB前段自学者</li>
<li>WEB前段自学者</li>
<li>WEB前段自学者</li>
<li>WEB前段自学者</li>
<li>WEB前段自学者</li>
</ul>
<script>
var lis = document.getElementsByTagName('li'); // 通过标签名来获取元素
console.log(lis) //打印元素对象
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]) //通过遍历获取每一个元素对象
}
</script>
</body>
</html>
如何获取某个元素里面的标签呢
思路
- 可以先获取元素的id
- 再通过id名获取标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 要求：获取第二个ul里面的li标签 -->
<ul>
<li>WEB前端</li>
<li>WEB前端</li>
<li>WEB前端</li>
<li>WEB前端</li>
<li>WEB前端</li>
<li>WEB前端</li>
</ul>
<ul id="uls">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<script>
var uls = document.getElementById('uls');
var lis = uls.getElementsByTagName('li');
console.log(lis)
</script>
</body>
</html>
根据类名获取元素(html5新增方法）
getElementsByClassName('类名')
注意事项
- 参数为一个大小写敏感的字符串
- 返回值为元素对象集合
- 具有兼容性，是html5新增的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs)
</script>
</body>
</html>
通过querySelector('选择器')来获取元素
注意事项
- 获取的是指定选择器的第一个元素对象
- 参数里面选择器必须要加符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="boxs">盒子1</div>
<div class="boxs">盒子2</div>
<script>
var boxs = document.querySelector('.boxs');
console.log(boxs) //获取的是指定选择器的第一个元素对象
</script>
</body>
</html>
通过通过querySelectorAll('选择器')来获取元素
注意事项
- 返回值为指定选择器的所有元素对象集合
- 参数里面的选择器必须要加符号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="box">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<script>
var boxs = document.querySelectorAll('.box');
console.log(boxs);
var lis = document.querySelectorAll('li');
console.log(lis)
</script>
</body>
</html>
获取特殊元素（html body）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var body = document.body;
console.log(body)
console.dir(body)
var html = document.documentElement;
console.log(html)
console.dir(html)
</script>
</body>
</html>
事件基础
javascript使我们有能力创建动态页面，而事件是可以被javascript侦测到的行为。
触发 --->响应机制
事件三要素
- 事件源：事件被触发的对象
- 事件类型：触发了什么类型 如点击事件 键盘按下事件
- 事件处理程序：采用函数赋值的方式完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="bth">锄禾日当午</button>
<script>
var bth = document.getElementById('bth');
bth.onclick = function() {
alert("汗滴禾下土")
}
</script>
</body>
</html>
事件执行的步骤
1.获取事件源
2.绑定事件
3.事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
console.log('hello 你好')
}
</script>
</body>
</html>
常见的鼠标事件
操作元素
通过DOM可以改变网页的外观 结构 内容。通过DOM来操作元素来改变元素内容 结构 样式
注意：以下都是属性来实现的
改变元素的内容
element.innerHTMLelement.innerText
区别如下
- innerHTML是W3C推荐的标准，识别HTML标签，识别空格与换行
- innerText非W3C推荐的标准，不识别HTML标签，不识别空格与换行
- innerHTML与innerText都是实现可读写的
案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击显示时间</button>
<div></div>
<script>
var bth = document.querySelector('button');
var div = document.querySelector('div')
bth.onclick = function() {
div.innerHTML = getData()
}
function getData() {
var date = new Date(); //实例化对象
var year = date.getFullYear() //返回当前的年份
var month = date.getMonth() + 1 //获取当前的月份，由于返回的月份比实际月份小一 所以加1
var dates = date.getDate(); // 获取当前日期
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var days = date.getDay() //获取当前星期几
return '今年是:' + year + "年" + month + "月" + dates + "日 " + arr[days]
}
</script>
</body>
</html>
案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>
hello
<span>123</span>
</p>
<script>
var div = document.querySelector('div');
div.innerHTML = '<strong>hello</strong>'
var p = document.querySelector('p')
console.log(p.innerHTML);
console.log(p.innerText);
</script>
</body>
</html>
常用元素的属性
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
margin-right: 400px;
}
</style>
</head>
<body>
<button id="spring">春天</button>
<button id="summer">夏天</button>
<hr>
<img src="../upload/spring.jpg" alt="">
<script>
var spring = document.getElementById('spring');
var summer = document.getElementById('summer');
var img = document.querySelector('img')
spring.onclick = function() {
img.src = '../upload/spring.jpg';
img.title = "春天"
}
summer.onclick = function() {
img.src = '../upload/summer.jpg';
img.title = '夏天'
}
</script>
</body>
</html>
根据不同的时间来显示不同的照片
思路如下
- 根据系统时间来判断，所以需要内置日期对象
- 利用多分支语句来判断并设置不同的照片
- 需要一个图片，根据不同的时间段来修改图片的src路径
- 需要一个div，根据不同的时间来修改内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<img src="../upload/Morning.jpg" alt="">
<div></div>
<script>
var img = document.querySelector('img');
var div = document.querySelector('div');
var date = new Date();
var h = date.getHours();
if (h < 12) {
img.src = '../upload/Morning.jpg';
div.innerHTML = "<strong>上午好</strong>"
} else if (h < 18) {
img.src = '../upload/Afternoon.jpg';
div.innerHTML = "<strong>下午好</strong>"
} else {
img.src = '../upload/evening.jpg';
div.innerHTML = "<strong>晚上好</strong>"
}
</script>
</body>
</html>
表单常用属性
注意事项
- 表单的值不能通过innerHTML及innerText改变
- 表单的值通过value改变
- this是指当前事件函数的调用者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="可用">
<script>
var bth = document.querySelector('button');
var input = document.querySelector('input');
bth.onclick = function() {
input.value = "禁用";
this.disabled = true
}
</script>
</body>
</html>
仿京东密码框
核心思路：点击眼睛按钮 将input的类型从密码框的类型转换为文本框类型
思路如下
- 一个按钮有两个状态 点击一次切换为文本框类型 再点击一次切换为文本框类型
- 可以利用flag变量，当flag为0的时候，点击切换为文本框，flag设置为1，当flag为1时，点击切换为密码框，flag设置为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 400px;
margin: 200px auto;
border-bottom: 1px solid black;
}
input {
width: 380px;
height: 30px;
border: none;
outline: none;
}
img {
position: absolute;
top: 2px;
right: 2px;
width: 20px;
}
</style>
</head>
<body>
<div class="box">
<lable>
<img src="../upload/close.png" alt="" id="eyes">
</lable>
<input type="password" id="pwd">
</div>
<script>
// 获取事件源
var eyes = document.getElementById('eyes');
var pwd = document.getElementById('pwd');
// 绑定事件 注册事件源
var flag = 0;
eyes.onclick = function() {
if (flag == 0) {
pwd.type = "text";
eyes.src = '../upload/close.png';
flag = 1;
} else {
pwd.type = 'password'
eyes.src = '../upload/open.png';
flag = 0
}
}
</script>
</body>
</html>
样式属性操作
element.style 行内样式操作
element.className 类名样式操作
注意
1.修改样式采用驼峰式命名法 如fontSize backgroundColor等等
2.js修改的样式 属于行内样式 占的权重比较高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = "yellow"
}
</script>
</body>
</html>
淘宝二维码案例
核心思路
- 利用样式的显示与隐藏完成 display:none隐藏 dispaly:block显示
- 点击按钮：就让二维码隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 400px;
margin: 200px auto;
}
#bth {
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="../upload/二维码.png" alt="">
<img src="../upload/关闭按钮.png" alt="" id="bth">
</div>
<script>
var bth = document.querySelector('#bth');
var box = document.querySelector('.box');
bth.onclick = function() {
box.style.display = "none"
}
</script>
</body>
</html>
淘宝精灵图
注意事项
- 首先精灵图的图片的排列顺序要有规律可寻
- 利用for循环 修改精灵图片的背景位置 background-position
- for循环里面的索引i*44就是y坐标的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 128px;
margin: 200px auto;
list-style: none;
}
li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin-right: 8px;
margin-bottom: 4px;
background: url(../upload/sprite.png) no-repeat;
}
</style>
</head>
<body>
<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>
<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';
}
</script>
</body>
</html>
显示与隐藏文本内容
思路如下
-首先需要两个事件 获得焦点事件onfocus与失去焦点事件onblur
- 获得焦点事件时 判断表单里面是否有默认文字 如果有默认文字 则清空表单内容
- 失去焦点事件时，判断表单内容是否为空，如果为空，则将表单内容修改为默认文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
if (this.value === '手机') {
this.value = ''
}
this.style.color = "#333"
}
text.onblur = function() {
if (this.value === '') {
this.value = '手机'
}
this.style.color = '#999'
}
</script>
</body>
</html>
使用className来实现样式属性操作
注意事项
- 如果样式比较多，直接采用类名修改样式属性操作
- class是个保留字，因此使用className来修改样式属性操作
- className会直接更改元素的类名，会覆盖原先的类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
margin: 200px auto;
}
.box2 {
width: 600px;
height: 600px;
background-color: chartreuse;
margin: 200px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
this.className = 'box box2'
}
</script>
</body>
</html>
密码框格式提示错误信息
- 首先判断的事件是表单失去焦点 onblur
- 如果输入正确 则提示正确的信息并且提示图标为绿色
- 如果输入的不是6到16位，则提示错误的信息并且字体图标显示为红色
- 采用className来实现样式属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.register {
width: 800px;
margin: 200px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999999;
background: url(../upload/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
background: url(../upload/wrong.png) no-repeat left center;
color: red;
}
.right {
background: url(../upload/right.png) no-repeat left center;
color: green;
}
</style>
</head>
<body>
<div class="register">
<input type="password">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var input = document.querySelector('input');
var message = document.querySelector('p')
input.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '输入错误 请重新输入'
} else {
message.className = 'message right';
message.innerHTML = '输入正确'
}
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。