复习：
webAPI ：就是函数方法的整体 用 js 来操作
再次介绍 webAPI：API是应用程序接口
抽象：系统提供接口标准，你来使用接口标准，就可以扩展功能
抽象：系统提供函数，你来按照我们的语法调用函数，就可以实现新的功能
API，约定于函数集合
扩展：我的网站提供请求地址与参数地址，你按照我们地址与参数的设置就可以向我请求数据
聚合数据接口
今天 学习 学习交互了
1、事件操作
什么是事件(event()) 我们像浏览器做一件事情，浏览器给我们一个反应
浏览器时时对我们的行为有一个监视，浏览器知道我们做的所有事情：鼠标与键盘触控操作
正常情况，浏览器什么都不说
2、表达属性
3、亲属访问
click 事件 DEMO 事件操作
<body>
<button>click</button>
</body>
<script type="text/javascript">
// 我们需要浏览器在我们点击按钮的时候给我们一个响应
// 这时候我们就需要注册事件
// 就是告诉 浏览器，我们在点击按钮的时候调用一个函数
function func(){
alert('我们调用自定义的函数行为执行');
}
// 注册事件的语法：
// 1、什么事件触发 我们做什么行为的时候
// 2、什么元素触发 是说我们在操作什么元素的时候
// 3、触发什么东西 我们需要浏览器调用的函数
// 语法
// 元素 . on 事件名 = 函数 on 是在
// 这句话就是说：元素 在 xxx 什么的时候进行调用
// 点击事件名是click
var btn = document.getElementsByTagName('button')[0];
btn.onclick = func; //注意不是func() 的返回值赋值给 click 所以不需要加括号
// 事件操作解答：
// 1、找到元素
// 2、注册事件： 元素. on事件名 等于 = 函数
// 3、用户在执行某一个行为的时候，函数就会调用
</script>
1、事件操作
1、事件操作
语法的说明：
1、事件相关的函数(事件处理函数) 可以单独的写，也可以直接在注册事件的时候赋值
2、我们需要注意的是，同一个事件只允许注册一次，重复给onxxxx 赋值只会覆盖以前的函数
3、我们可以给同一个元素注册多个事件。例如鼠标进入与离开
4、事件的书写也可以直接写到onclick 标签属性中 属性值就是一个匿名 函数
### Demo
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var box = document.querySelector('.box');
/*
1、事件相关的函数(事件处理函数) 可以单独的写，也可以直接在注册事件的时候赋值
function fun(){
alert('div 被点击了');
}
box.onclick = fun;
*/
box.onclick = function(){
alert('div 被点击了');
}
//2、我们需要注意的是，同一个事件只允许注册一次，重复给onxxxx 赋值只会覆盖以前的函数
box.onclick = function(){
alert('第二次点击');
}
3、我们可以给同一个元素注册多个事件。例如鼠标进入与离开
box.onmouseenter = function(){
box.style.backgroundColor = 'red';
}
box.onmouseleave = function(){
box.style.backgroundColor = '';
}
</script>
</html>
DEMO 2、
<body>
<!-- onclick ="" onclick 后面的双引号就是一个匿名函数 属性值就是一个匿名函数 -->
<div class="box" onclick="alert('123')">123</div>
<div class="box1" onclick="func()">点击我</div>
<!--
这样的写法等价于
div.onclick = function(){
alert('123');
}
-->
<script type="text/javascript">
function func(){
alert('在onclick 里面调用 func() ');
}
</script>
</body>
this 的用法第一次
关于 this this 就是它一个共有四个表示
如果一个对象的方法调用了，在方法中 this 就是这个对象的本身,因为我们的事件是被注册到元素上
事件处理函数中的 this 就是这个元素
<body>
<div class="box">11</div>
<script type="text/javascript">
var div = document.querySelector('.box');
div.onclick = function(){
// 在事件处理函数中如果需要使用当前的 元素 一般都会使用 this 来代替
console.log(div === this);
}
</script>
批量 注册 方法
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
var div = document.querySelectorAll('ul > li');
for(var i=0; i<div.length;i++){
div[i].onclick = function(){
// 在批量注册的时候 需要记住 this是谁点击谁就是谁
this.innerHTML = '改变里面文字';
}
}
</script>
</body>
<!--批量注册详解 关于 this 指向-->
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script type="text/javascript">
var li_list = document.querySelectorAll('ul > li');
for(var i= 0; i<li_list.length;i++){
li_list[i].onclick = function(){
this.innerHTML = '点击li进行改变'
}
}
//分析代码的实行步骤
// 1、获得页面中所有的按钮 一共 3个 以伪数组的形式存在 li_list 中
// 2、执行循环，再循环体中函数是不会执行的而是 注册给了按钮
// 首先 i= 0 赋值
// 判断 i < 3 成立，进入循环体 ，给 li_list[i] 即 li_list[0]绑定事件
// i++ 为 1 判断 i < 3 成立 进入 循环体， 给 li_list[i] 即li_list[i] 绑定事件
// 3、然后 继续 i++ 直到 结束循环 浏览器正常显示页面
// 4、用户点击按钮，触发执行时间处理函数
// 进入函数体， 一步步执行函数中的 代码
</script>
排他案例
实现有两种方案：
1、暴力法：在 点击之前，将所有的按钮都设置为请点击
2、使用一个变量记录点击的按钮
暴力法
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
<script type="text/javascript">
var li_list = document.querySelectorAll('ul>li');
for(var i=0; i<li_list.length; i++){
li_list[i].onclick = function(){
for(var j=0; j<li_list.length;j++){
li_list[j].innerHTML = '暴力法';
}
this.innerHTML = '这里点击后更改暴力拍他法';
}
}
</script>
记录变量点击按钮
思路：一开始准备一个变量，点击按钮后将按钮的引用存储在变量中，那么每次在点击的时候，这个
变量中存储的都是上一次点击的按钮，除了第一次变量中 没有数据
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
<script type="text/javascript">
var li_list = document.querySelectorAll('ul>li');
var prevLi = ""; //存储上一个按钮
for(var i=0; i<li_list.length;i++){
li_list[i].onclick = function(){
prevLi.innerHTML = '请点击';
this.innerHTML = '点击变量更改';
prevLi = this
}
}
</script>
事件 使用介绍
常用事件
1、鼠标类
click 单机事件
dblclick 双击事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件
mouseenter 鼠标进入事件
mouseleave 鼠标离开事件
mouseover 鼠标进入事件
mouseout 鼠标离开事件
mousemove 鼠标移动事件
2、键盘类事件：
keypress 击键事件：键盘按下与抬起组合到一起
keydown 键盘按下
keyup 键盘抬起
鼠标案例DEMO
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.dv1,.dv2{
width: 200px;
height:200px;
border:1px solid red;
margin: 20px 0;
}
</style>
</head>
<body>
<ul>
<li class="box">111</li>
<li class="dv1">enter与leave</li>
<li class="dv2">over与out</li>
<li class="move">444</li>
<li>555</li>
</ul>
</body>
<script type="text/javascript">
/*
1、第一个案例DEMO
双击事件
document.querySelector('.box').ondblclick = function(){
alert('我们被点击了');
}
鼠标单击与鼠标的按下与抬起
*/
/*
2、第二个案例DEMO
var li_list = document.querySelector('.box');
li_list.onclick = function(){
alert('单击发生事件');
// 单击是按下与抬起 一起 才是发生一个完整的流程
}
// 鼠标 mouse 按下 dowm
li_list.onmousedown = function(){
// alert('alert缺点事件是一个阻塞浏览器');
// 鼠标按钮就执行了
console.log('鼠标按下了');
}
// 鼠标 mouse 抬起 up
li_list.onmouseup = function(){
console.log('鼠标抬起');
}
*/
/*
3、第三个案例 DEMO
mouseenter 鼠标进入
mouseleave 鼠标离开
mouseover 鼠标进入
mouseout 鼠标离开
这里我们留一个悬念，明天讲他们的区别
var dv1 = document.querySelector('.dv1');
var dv2 = document.querySelector('.dv2');
dv1.onmouseenter = function(){
console.log('鼠标进入');
// 这里使用 this 最好 使用dv1 也是 ok的
this.style.backgroundColor = 'red';
}
dv1.onmouseleave = function(){
console.log('鼠标离开');
this.style.backgroundColor = '';
}
// over 愿意 ：悬浮 理解为 鼠标 进入的意思即可
// out 离开
dv2.onmouseover = function(){
console.log('鼠标进入');
this.style.backgroundColor = 'yellow';
}
dv2.onmouseout = function(){
console.log('鼠标离开');
this.style.backgroundColor = '';
}
*/
/*
4、第四个案例：mousemove 鼠标移动
*/
var move = document.querySelector('.move');
move.onmousemove = function(){
console.log('鼠标移动');
this.style.backgroundColor = 'red';
// 这里写的是 事件对象 Date
// toLocaleString() 当地的 日期 与事件的字符串
this.innerHTML = '添加了' + new Date().toLocaleString();
}
</script>
</html>
键盘事件：
<body>
<input type="text" name="">
</body>
<script type="text/javascript">
var input = document.getElementsByTagName('input')[0];
/* 按键 事件
input.onkeypress = function(){
console.log(new Date().toLocaleString());
}
键盘 按下 事件
input.onkeydown = function(){
console.log('按下' + (new Date().toLocaleString()));
}
以后实际开发中记住使用 onkeyup 键盘 抬起事件
input.onkeyup = function(){
console.log('抬起');
}
*/
</script>
操作 表单属性 重要 实际开发中很多使用
表单属性
1、表单的复习
1、什么是表单，作用是什么
答：就是收集用户信息
2、常见的表单标签有哪些，各个是怎么使用的
答：文本框，选框，按钮
3、基本使用
<form action="提交地址" method="方法">
<input type="text">
</form>
4、操作标签
文本框
单行文本
<input type="text">
常用属性 value
readyonly
disabled
默认文本框：<<input type="text"><br>
设置value值的文本框 <input type="text" name="" value="设置value"><br>
设置了readyonly 只读属性 <input type="text" value="设置了readyonly" name="" readonly="readonly"><br>
设置了disabled 禁用 <input type="text" name="" value="设置了disabled" disabled="">
在 js 中操作表单的属性，与 操作一般的属性几乎一样，不同的是单值属性利用 js 来操作的时候使用
boolean 值
当设置这个属性为 true 的时候，表示标签具有该属性
当设置这个属性为 false 的时候，表示标签不具备该属性
操作案例的DEMO
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
默认的文本框：<input type="text" name="" value="value是可以更改的"><br>
<button>设置value</button><br>
<button>设置readyonly</button><br>
<button>设置disabled</button><br>
<button>设置type</button><br>
</body>
<script type="text/javascript">
var input = document.querySelector('input');
//设置value 这里使用了 querySelector 这里从上往下第零个 获取到的是 value
// 这里使用的是简化的方式
document.querySelector('button').onclick = function(){
// 设置文本
input.value ='点击按钮更改的内容';
}
// 设置 readonly 只读 属性 他就是只有true 和false
document.querySelectorAll('button')[1].onclick= function(){
// 写的时候 注意 这里是 readOnly only 要大写
// input.readOnly = true
var nat = input.readOnly = true; //true 表示 有这个有 false 表示没有
console.log(nat);
}
// 设置 disabled 禁用
document.querySelectorAll('button')[2].onclick = function(){
// 这里也是true 表示生效有禁用 false 表示没有
// 但是你要是点击 第一个按钮 会发现可以更改的 代码可以使用，但是 用户不能输入
input.disabled = true;
}
document.querySelectorAll('button')[3].onclick = function(){
// passWord 是 用户拿不到密码 ，但是要是在 consol控制台里面 嘿嘿嘿 你们懂的
// 这个需要大家想一下，要是想不到 留言告诉我
input.type = 'passWord';
}
</script>
</html>
选框类
单选框
<input type="radio">
复选框
<<input type="checkbox">
下拉框
<select><option value=""></option></select>
列表框形态
1、size 属性来控制显示多少行内容
2、使用multiple 来表示是否允许多选
下面是单选框与复选框 按钮 操作DEMO
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
checked 是单值属性，如果选中了就选中，没有就是为选中
-->
<!-- <input type="radio"> -->
<input type="checkbox" name="">
<br>
<button>点击</button>
<button>不选中</button>
</body>
<script type="text/javascript">
var btn = document.querySelectorAll('button')[0];
var btn1 = document.querySelectorAll('button')[1];
var input = document.querySelectorAll('input')[0];
btn.onclick = function(){
// true 代表有这个 属性
input.checked = true;
}
btn1.onclick = function(){
input.checked = false;
}
</script>
</html>
### 下拉框
下拉框 多选 情况 下 使用
<form>
<!-- 这里可以设置 size 就会 变成 展示类型 name 就是获取 value 值
select 默认是单选的 multiple也是 单值 是多选
在存在多选的时候 给 name 里面 最好 加上小括号
-->
<select name="sel[]" size="13" multiple>
<option value="1">HTML</option>
<option value="2">css</option>
<option value="3">JS</option>
<option value="4">WEBAPI</option>
</select>
<input type="submit" name="" value="提交">
下拉框
1、下拉框使用形态
为什么要提供value呢 是提供选中形态选中的那个
注意标准的html标准用法 语法是 select 标签中的option 标签 要含有value 属性
使用js 来控制 select 标签的选中情况
使用 select 对 value 属性对选中 情况进行读写
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>选中web api</button>
<form>
<!-- select 选择 要是给选择的option 添加 selected 就会默认先选择这个
在select 里面 进行添加name 提交的时候 会 拿到 所提交的 value 值
-->
<select name="sel">
<option value="1">HTML</option>
<option value="2" selected>CSS</option>
<option value="3">JS</option>
<option value="4">WEBAPI</option>
</select>
<input type="submit">
</form>
</body>
<script type="text/javascript">
//下拉框形态 使用
document.querySelector('button').onclick = function(){
// 语法select 标签对象 .value = 对应项的 value 值
var sel = document.querySelector('select');
console.log(sel)
sel.value = 4;
}
</script>
</html>
## 列表框形态的多选使用
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="" >
<select name="sel[]" size="14" multiple>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">JS基础</option>
<option value="4">WEB API</option>
</select>
</form>
<button type="submit">提交</button>
</body>
<script type="text/javascript">
var sel = document.querySelector('select');
var btn = document.querySelectorAll('button')[0];
btn.onclick = function(){
// sel.value = 4;
// 如果我们需要实现 多选 则需要找到option 设置起 selected 属性
var opts = document.querySelectorAll('option');
opts[0].selected = true;
opts[3].selected = true;
}
</script>
</html>
实战 案例 DEMO 1、相册
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.cont ul li img{
float: left;
margin:20px 10px;
}
.neirong{
clear:both;
}
</style>
<body>
<div class="content">
<div class="cont">
<ul>
<!-- 这里使用了 ul 里面嵌套了 li 之前有讲过 ul 里面一定是li 然后 li里面可以写任何标签
这里我们给src 图片就行展示，然后把需要变成大图片的地址放到alt 里面， 把需要展示的文字
给title 这样到时候我们进行获取 alt 和 title
-->
<li><img src="./lol.jpg" alt="./1.jpeg" title="第一张图片"></li>
<li><img src="./lool.jpg" alt="./2.jpeg" title="第二张图片"></li>
<li><img src="./loool.jpg" alt="./3.jpg" title="第三张图片"></li>
<li><img src="./looool.jpg" alt="./4.jpg" title="第四张图片"></li>
</ul>
</div>
<div class="neirong">
<!-- 这里是更改展示的图片位置 -->
<img src="./imglol.jpg" alt="">
<p class="neirong_p">这是图片的第</p>
</div>
</div>
</body>
<script type="text/javascript">
//这里使用 query All 获取 使用后代选择器 img 的集合
var img = document.querySelectorAll('.cont > ul > li > img');
// 这里 获取到 需要展示图片的地址
var img1 = document.querySelector('.neirong >img');
// 这里获取到需要插入图片的地方
var p = document.querySelector('.neirong_p');
/*
这里我写了两种 写法 都能 实现点击后图片 更改
我写一些思路：
1、这里我们使用for 循环 获取到 全部的 img 图片集合 然后遍历
2、在循环里面进行点击事件函数,然后this.alt 这里的this 就指向了alt获取到里面存储的图片地址
3、这个方法使用了变量存储的形式给到url 然后复制给需要点击的图片变大，然后下面的for 循环是直接赋值形式
4、这里非常重要记住你说要给 图片赋值 就是给src所有 属性.src = 赋值的内容
地址呢是 属性.innerHTML = 赋值的文本
也可以使用属性.innerText = 赋值的文本 谨记
for(var i=0; i<img.length;i++){
img[i].onclick = function(){
var url = this.alt;
var desc = this.title;
img1.src = url;
p.innerHTML = desc;
}
};
*/
for(var i=0; i<img.length;i++){
img[i].onclick = function(){
img1.src = this.alt;
p.innerHTML = this.title;
}
}
</script>
</html>
总结：
1、事件操作
解答：
1、简单来说就是找到元素
2、注册事件，元素.on 事件名 = 函数
3、用户执行某一个行为的时候，函数就会调用
2、表单属性
解答：
1、文本框 2、选框 3、按钮
2、js操作表单 都是 键值对形式存在 和 单值属性 单值属性是boolear 来操作的 true 是设置 false 是未设置
3、选框类:下拉框 和 选框类 下拉框 每个 option 里面 必须带 value 因为没有value会把中文提交 使用select的value 是直接给select 赋值
