修改表单元素属性
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。
- 正常的有属性有取值的 跟其他的标签属性没有任何区别。
表单属性的总结：
-
设置普通的输入框 input.value =“表单的值”
-
设置按钮的禁用
button.disabled = true 禁用
button.disabled = true 禁用
-
设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
-
设置下拉列表 select
option.selected = true 选中
-
文本域标签 属于表单元素 又是双标签 。
获取文本内容：
-
获取文本内容可以用 .value 和 innerHTML ，innerText 使用无效。
-
想要设置textarea 里面文本内容的时候，用.value 原样获取内容。
-
用innerHTML ，获取的内容如果包含html 会转移。
通过js方式来设置内容：
- textarea.value = `` 都可以使用
- textarea.innerText = `` 都可以使用
- textarea.innerHTML= `` 都可以使用
-
示例：
<body>
<!-- 文本框 -->
<input type="text" class="name">
<!-- 多选框 -->
<input type="checkbox" class="isarg" >
<!-- 下拉列表 -->
<select class="sel">
<option>牛奶</option>
<option>咖啡</option>
<option>果汁</option>
<option>可乐</option>
</select>
<textarea name="" id="" cols="30" rows="10">哈哈哈哈哈</textarea>
<script>
let name = document.querySelector('.name')
//设置文本输入框的文本内容 .value
name.value ='wenwen'
let isarg = document.querySelector('.isarg')
//多选框 选中 或者取消 .checked
isarg.checked = true; //选中
isarg.checked = false; //取消选中
//获取下拉列表的第几个
let sel = document.querySelector('option:nth-child(3)')
//下拉列表 .selected = true 选中
sel.selected = true;
//获取文本域
let textarea = document.querySelector('textarea')
//设备文本域内容 用以下三种都可以
// textarea.value = '<h1>你好</h1>'
// textarea.innerHTML = '<h1>你好</h1>'
// textarea.innerText = '<h1>你好</h1>'
// 获取文本域中的值 .value,.innerHTML 可以获取 。 innerText 获取不了
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
</script>
</body>
事件
-
什么是事件？ **事件 **是在编程时系统内发生的动作或者发生的事情。 比如：用户在网页上单击一个按钮。
-
什么是事件监听？ 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件。
-
语法
元素.addEventlistener（'事件'，要执行的函数）
事件监听
事件监听三要素：
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事。
语法示例
<body>
<button class="btn1">抽奖</button>
<button class="btn2">取消</button>
<div>1</div>
<script>
//获取3个元素过来
let bnt1 = document.querySelector('.btn1')
let bnt2 = document.querySelector('.btn2')
let div = document.querySelector('div')
//元素.addEventlistener（'事件'，要执行的函数）
//click 鼠标点击的时候
bnt1.addEventListener("click", function () {
console.log('开始抽奖拉')
})
bnt2.addEventListener("click", function () {
console.log('取消抽奖')
})
//mouseover 鼠标悬停在元素区域
div.addEventListener("mouseover",function(){
console.log('鼠标悬停div区域我显示了')
})
</script>
课堂案例
1.点击-倒计时递减案例
实现点击按钮，1000开始倒数；
<body>
<!-- 点击按钮，1000开始倒数 -->
<button>1000</button>
<script>
let btn = document.querySelector('button')
let num = 1000;
//鼠标点击 执行里面的函数
btn.addEventListener("click", function () {
//倒计时
setInterval(function () {
num--;
//按钮文本显示倒计时的数字
btn.innerText=`${num}`
},100)
})
</script>
</body>
1.2 点击-递减案例 （优化）
<body>
<button>1000</button>
<script>
let btn = document.querySelector('button');
btn.addEventListener("click",function(){
setInterval(function(){
//不用重新去定义一个1000的数字，直接把按钮的文本拿过来用,注意他搬运过来是个字符串，减法的话会自动转换数字类型，但是加法的话要注意转换成数字类型。
--btn.innerText;
},100)
})
</script>
</body>
2.案例-点击关闭广告
以下示例就是实现点击让div隐藏即可 ：（同关闭广告原理一样）
<body>
<div></div>
<script>
//获取元素
let div = document.querySelector('div')
//鼠标点击div
div.addEventListener("click",function(){
div.style.display="none"
})
</script>
</body>
3.定时器随机点名点击停止
实现 ：按按钮1时。h1里出现姓名随机滚动，按按钮2时，h1停止滚动，出现一个随机的姓名。
<body>
<h1></h1>
<button class="btn1">开始随机点名</button>
<button class="btn2">停止点名</button>
<script>
let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
let name = document.querySelector('h1')
let arr = ['赵云', '刘备', '张飞', '关羽', '周瑜']
//定义一个定时器的id，不在全部区域定义这个变量的话，按钮2清除定时器的时候会找不到对象。或者可以把按钮2放到按钮1里面
let stop;
//第一个按钮 当鼠标点击时
btn1.addEventListener('click', function () {
//开启定时器并把他返回到 stop这个id
stop = setInterval(function () {
let index = Math.round(Math.random() * (arr.length - 1))
//h1 文本内容修改为数组[随机数]
name.innerText = arr[index];
}, 50)
})
//第二个按钮 当鼠标点击时
btn2.addEventListener('click', function () {
//清除定时器
clearInterval(stop)
})
</script>
</body>
3.2 定时器随机点名点击停止 （优化）
bug： 第一个按钮开启定时器，点击多次的时候， 第二个按钮清除之后，名字还会继续滚动 。在我们行业中，有专业的术语 节流！
解决方法：
使用disabled = true 禁用按钮，不让再次点击
开启定时器的时候，直接禁用按钮1，点击按钮2清除定时器时， 重新启用按钮1。
示例
<body>
<h1></h1>
<button class="btn1">开始随机点名</button>
<button class="btn2">停止点名</button>
<script>
/* 优化
bug： 第一个按钮开启定时器，点击多次的时候， 第二个按钮清除之后，名字还会继续滚动 。在我们行业中，有专业的术语 节流！
解决方法：
1.开启定时器的时候，直接禁用按钮1，点击按钮2清除定时器时， 重新启用按钮1。
*/
let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
let name = document.querySelector('h1')
let arr = ['赵云', '刘备', '张飞', '关羽', '周瑜']
let stop;
//第一个按钮
btn1.addEventListener('click', function () {
//优化方法1 禁用按钮 不让再次点击
btn1.disabled = true
stop = setInterval(function () {
let index = Math.round(Math.random() * (arr.length - 1))
name.innerText = arr[index];
}, 50)
})
//第二个按钮
btn2.addEventListener('click', function () {
//优化方法1 设置按了第二个按钮时，重新启用第一个按钮 开始按钮
btn1.disabled = false;
clearInterval(stop)
})
</script>
</body>
4.商品全选
1.实现全选框一点，所有的单选框跟着被选中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>01-全选商品</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
//1. 获取全选标签
let all = document.querySelector('#checkAll');
//2.多个类名叫ck的，获取成一个数组
let checkboxlist = document.querySelectorAll('.ck');
//3.绑定全选点击事件
all.addEventListener("click", function () {
//4.循环数组里的多个类名叫ck的 选中状态 等于 全选标签的 选中状态
for (let index = 0; index < checkboxlist.length; index++) {
checkboxlist[index].checked = all.checked;
}
})
</script>
</body>
</html>
2.实现单选框全部选中时，全选框跟着选中：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>01-全选商品</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
//1. 获取全选标签
let all = document.querySelector('#checkAll');
//2.多个类名叫ck的，获取成一个数组
let checkboxlist = document.querySelectorAll('.ck');
//3.绑定全选点击事件 ，点中全选键，所有单选键跟着一起选中
all.addEventListener("click", function () {
//4.循环数组里的多个类名叫ck的 选中状态 等于 全选标签的 选中状态
for (let index = 0; index < checkboxlist.length; index++) {
checkboxlist[index].checked = all.checked;
}
})
/////////////////////////////////////////////////////////////////////
//上面部分是实现全选框控制单选框
//以下部分是单选框控制全选框
//要求：单选绑定控制全选， 单选框全选中了的话，全选框也跟着选中。
//一 ，用个函数封装判断 当单选框选中数和商品数量是一样的时候返回true，否则返回假。
function isAllChecked() {
//1.定义个变量是单选框选中的数量
let checkednum = 0;
//2.遍历数组看下 数组中有几个是选中的， 每一个选中的选中数就加1
for (let index = 0; index < checkboxlist.length; index++) {
if (checkboxlist[index].checked) {
checkednum++
}
}
//3.判断选中商品的数量和 商品总数之间的关系
if (checkednum === checkboxlist.length) {
return true;
} else {
return false;
}
}
//二，给数组遍历，让每个商品绑定点击事件
for (let index = 0; index < checkboxlist.length; index++) {
checkboxlist[index].addEventListener("click", function () {
//定义一个获取 上面函数结果， 判断是否达到了全选条件
let checked = isAllChecked();
//设置全选按钮=上面的判断函数结果是真的话就选中，假则不选中
all.checked = checked
})
}
</script>
</body>
</html>
5.批量给标签绑定事件
如下案例 如把所有的 li 标签 批量绑定事件。
1.先获取所有的 li 为一个数组；
2.循环该数组 ；
3.在循环里面给每个 li 绑定事件。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
//获取所有li为一个数组
let lilist = document.querySelectorAll('li');
//循环数组
for (let index = 0; index < lilist.length; index++) {
//给每个li标签绑定事件
lilist[index].addEventListener('click',function(){
console.log("您好")
})
}
</script>
不同方式绑定点击事件
DOM L0
事件源.on事件 = function() { } (少用)
DOM L2
事件源.addEventListener(事件， 事件处理函数) （常用）（上面都是在用该方法）
发展史：
DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型。
注意：
- 使用addEventlistener 对一个事件类型，可以绑定多个处理函数。
- 使用on+事件 对事件类型 只能绑定一个处理函数。
on事件 = function() { } 语法示例：
<body>
<div></div>
<script>
//获取div
let div = document.querySelector('div')
//使用旧方式 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
//click 鼠标点击
div.onclick = function(){
console.log('鼠标点击出现')
}
//缺点： 使用on+事件 对事件类型 只能绑定一个处理函数。 重复设置了也无效，
//使用 addEventListener 对一个事件类型，可以绑定多个处理函数
div.onclick = function(){
console.log('鼠标点击出现')
} //无效
div.onclick = function(){
console.log('鼠标点击出现')
} //无效
</script>
</body>
不同事件类型
鼠标事件
| 鼠标触发 | |
|---|---|
| click | 鼠标点击 |
| mouseenter | 鼠标经过 |
| mouseleave | 鼠标离开 |
<body>
<div></div>
<script>
let div = document.querySelector('div')
// 鼠标事件 鼠标触发
//click 鼠标点击
div.addEventListener("click",function(){
console.log('鼠标点击')
})
//mouseenter 鼠标经过
div.addEventListener("mouseenter",function(){
console.log('鼠标经过')
})
//mouseleave 鼠标离开
div.addEventListener("mouseleave",function(){
console.log('鼠标离开')
})
</script>
焦点事件
只有表单元素有获得焦点 失去焦点事件。
| 表单获得光标 | |
|---|---|
| focus | 获得焦点 |
| blur | 失去焦点 |
<body>
<!-- 只有表单元素有获得焦点 失去焦点事件 -->
<input type="text">
<script>
let input = document.querySelector('input')
//焦点事件
// focus 获得焦点
input.addEventListener("focus",function(){
console.log('输入框 获得焦点')
//输入框获得焦点时，body页面背景色变蓝
document.body.style.backgroundColor='skyblue'
})
// blur 失去焦点
input.addEventListener("blur",function(){
console.log('输入框 失去焦点')
//失去焦点时，页面背景色变白
document.body.style.backgroundColor='#fff'
})
</script>
</body>
键盘事件
键盘事件 键盘触发 div不行 表单可以使用。
给body标签添加比较多。
| 键盘触发 | |
|---|---|
| keydown | 键盘按下 |
| keyup | 键盘抬起 |
<body>
<script>
// 键盘事件 键盘触发 div不行 表单可以
// 给body标签添加比较多
// keydown 键盘按下触发
document.body.addEventListener("keydown",function(){
console.log('keydown 按下')
})
// keyup 键盘抬起触发
document.body.addEventListener("keyup",function(){
console.log('keyup 抬起')
})
</script>
</body>
文本事件
input 用户输入事件。
<body>
<input type="text">
<script>
// 文本事件 表单输入触发
// input 用户输入事件
input.addEventListener("input",function(){
console.log('只要在该输入框输入了内容，我就会触发')
})
</script>
