Day21-DOM&事件&购物车项目

一 事件

1 概念

什么是事件

用户和页面之间的交互操作，称为事件

比如，点击、双击、鼠标移入、鼠标移出、键盘输入内容、键盘弹起来

事件的三要素

事件源：触发事件的元素

事件类型：触发了什么动作

事件处理函数：这个事件执行响应的函数

2 事件的绑定和移除

在元素上绑定事件，我们也有三种方式

1. HTML标签身上直接绑定事件，相当于css的内联样式
2. DOM0级事件，目前依然用的很多
3. 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()
        }