一 事件
1 概念
什么是事件
用户和页面之间的交互操作,称为事件
比如,点击、双击、鼠标移入、鼠标移出、键盘输入内容、键盘弹起来
事件的三要素
事件源:触发事件的元素
事件类型:触发了什么动作
事件处理函数:这个事件执行响应的函数
2 事件的绑定和移除
在元素上绑定事件,我们也有三种方式
- HTML标签身上直接绑定事件,相当于css的内联样式
- DOM0级事件,目前依然用的很多
- DOM2级事件,后面补充
1) HTML标签上绑定事件
<button id="btn1" type="button" onclick="fun1()">点我啊</button>
<script>
function fun1(){
alert("我被点击了")
}
//移除事件
//a.拿到事件源
let obtn1 = document.querySelector("#btn1")
//b.删除事件源的onclick属性
obtn1.removeAttribute("onclick")
</script>
2) DOM0级事件
<button id="btn2" type="button">再点我啊</button>
<script>
//a.拿到事件源
let obtn2 = document.querySelector("#btn2")
//2.绑定事件
obtn2.onclick = function(){
alert("我又被点了")
}
//移除DOM0级事件(null表示空,什么都没有的意思)
obtn2.onclick = null
</script>
所有的标签都可以绑定单击事件
二 复选框渲染
1 数据驱动
<div id="box"></div>
<script>
let f = false
let obox = document.querySelector("#box")
//${f&&"checked"} 设置复选框的选中状态
obox.innerHTML = `<input type="checkbox" ${f&&"checked"}>`
</script>
2 DOM驱动
<input id="checkbox1" type="checkbox">
<script>
let ocheckbox1 = document.querySelector("#checkbox1")
ocheckbox1.checked = false
</script>
三 样式操作
语法: 元素.style.样式名=样式值
注意:
样式名如果是多个单词组成,在js中必须使用小驼峰命名
比如 background-color 在js中必须写成 backgroundColor
四 项目-购物车
html
<style>
table{
border: 1px black solid;
/* 取消单元格间隙 */
border-collapse: collapse;
width: 800px;
/* 让表格中的内容水平居中 */
text-align: center;
}
th,td{
border: 1px black solid;
}
</style>
<table>
<thead>
<tr>
<th>选择</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>
<input type="checkbox" id="checkAll" onclick="selectAll()">全选
</td>
<td>
<button type="button" onclick="deleteChecked()">删除选中</button>
</td>
<td></td>
<td></td>
<td>
合计: <span id="totalMoney">0</span>
</td>
<td>
<button id="pay" type="button" >结算</button>
</td>
</tr>
</tfoot>
</table>
数据
// {编号,名称,单价,数量,选中状态true表示选中 false表示不选中}
let arr = [
{id:1,name:"冰箱",price:35,count:1,state:true},
{id:2,name:"手机",price:1355,count:1,state:true},
{id:3,name:"空调",price:847,count:1,state:false},
]
表格动态渲染
/**
* 表格的动态渲染
*/
function show(){
//拿到tbody
let otbody = document.querySelector("tbody")
//拿到结算按钮
let payBtn = document.querySelector("#pay")
//拿到合计标签
let ospan = document.querySelector("#totalMoney")
//拿到全选框
let ocheckAll = document.querySelector("#checkAll")
let str = ""
for(let i=0;i<arr.length;i++){
str = str +
`
<tr>
<td>
<input type="checkbox" ${arr[i].state&&"checked"}>
</td>
<td>${arr[i].name}</td>
<td>${arr[i].price}</td>
<td>
<button type="button">-</button>
${arr[i].count}
<button type="button">+</button>
</td>
<td>${arr[i].price * arr[i].count }</td>
<td>
<button type="button">删除</button>
</td>
</tr>
`
}
//把数组渲染到页面上
otbody.innerHTML = str
//渲染结算按钮的颜色-----------------------
//判断是否有某些商品的state属性为true
let flag = arr.some(e =>e.state == true )
if(flag){//修改结算按钮的颜色为红色
payBtn.style.backgroundColor="red"
}else{//修改结算按钮的颜色为灰色
payBtn.style.background="gray"
}
//计算合计------------------------------
let sum = 0
for(let i=0;i<arr.length;i++){
//计算选中商品的合计
if(arr[i].state == true){
sum = sum + arr[i].price*arr[i].count
}
}
//显示合计
ospan.innerText = sum
//渲染全选框-------------------------
//判断数组中的商品是否都被选中
let flag2 = arr.every(e => e.state == true)
if(flag2){
ocheckAll.checked = true
}else{
ocheckAll.checked = false
}
}
/**
* 主函数
*/
function main(){
//调用show函数
show()
}
main()
数量加
<button type="button" onclick="add(${i})">+</button>
/**
* 数量增加
* 参数index:商品在数组中的下标
*/
function add(index){
arr[index].count++
//当数组的数据发生改变时,重新渲染表格数据
show()
}
数量减
<button type="button" onclick="decrement(${i})">-</button>
/**
* 数量减少
*/
function decrement(index){
if(arr[index].count > 0){
arr[index].count--
//当数组的数据发生改变时,重新渲染表格
show()
}
}
删除一个商品
<button type="button" onclick="deleteOne(${i})">删除</button>
/**
* 删除一个商品
*/
function deleteOne(index){
//根据下标删除数组中的元素
arr.splice(index,1)
//当数组的数据发生改变时,重新渲染表格
show()
}
删除选中的商品
<button type="button" onclick="deleteChecked()">删除选中</button>
/**
* 删除选中的
*/
function deleteChecked(){
//过滤出没有被选中的商品
arr = arr.filter(e =>e.state == false)
//当数组的数据发生改变时,重新渲染表格
show()
}
点击单个复选框
<input type="checkbox" onclick="checkOne(${i})" ${arr[i].state&&"checked"}>
/**
* 单个复选框的事件处理函数
*
*/
function checkOne(index){
//当鼠标点击单个复选框时,让商品state属性的值取反
arr[index].state = !arr[index].state
//当数组的数据发生改变时,重新渲染表格
show()
}
点击全选框
<input type="checkbox" id="checkAll" onclick="selectAll()">全选
/**
* 全选框的事件处理函数
*/
function selectAll(){
//拿到全选框
let checkboxAll = document.querySelector("#checkAll")
//拿到全选框的状态
let allState = checkboxAll.checked
//因为商品的状态跟全选框的状态是一致的,我们修改数组中商品的状态等于全选框的状态
arr = arr.map(e =>{
e.state = allState
return e
})
console.log(arr);
//当数组的数据发生改变时,重新渲染表格
show()
}