知识点总结

1、关于元素节点的操作

2、js中操作css样式

方式一

style.样式名="样式值";

方式二

.className="类名"；

3、全选/反选效果（案例）

<input type="checkbox" name="item" value="10"/>a
        <input type="checkbox" name="item" value="20" />b
        <input type="checkbox" name="item" value="30" />c
        <input type="checkbox" name="item" value="40" />d
        <input type="checkbox" name="item" value="50" />e
        <hr >
        <input type="checkbox" id="qx" onclick="checkAll()"/>全选/全不选
        <button type="button" onclick="resverse()">反选</button>
        <button type="button" onclick="js()">结算</button>
        <p>结算总金额：<span>0</span>元</p>

            var item=document.querySelectorAll("[name=item]")
            //全选/全不选
            function checkAll(){
                var qx=document.querySelector("#qx")
                for(i=0;i<item.length;i++){
                    item[i].checked=qx.checked;
                }
            }
            //反选
            function resverse(){
                for(i=0;i<item.length;i++){
                    item[i].checked=!item[i].checked;
                }
            }
            //结算
            function js(){
                var span=document.querySelector("span")
                var sum=0;
                for(i=0;i<item.length;i++){
                    if(item[i].checked==true){
                        sum=sum+parseInt(item[i].value)
                    }
                }
                span.innerText=sum
            }

4、点击心（案例）

            var html=document.querySelector("html");
            html.addEventListener("click",heart,false);
            function heart(e){
                // 2、定义字体大小的变量
                var fontSize=16
                // 鼠标出现的位置 
                var left=e.clientX-fontSize/2;
                var top=e.clientY-fontSize/2;
                
                //1、创建一个b元素
                var b=document.createElement("b")
                // console.log(b)
                // b元素的内容
                b.innerText="❤";
                //设置属性   
                b.style="font-size:"+fontSize+"px;color:"+randomColor()+";position:absolute;left:"+left+"px;top:"+top+"px;opacity:1;";
                //3、添加到body中
                document.body.appendChild(b);
                
                
                //设置一个定时任务
                var timer=setInterval(function(){
                    // 先消除单位，然后获取数字
                    var top=b.style.top.replace("px","");
                    // 改变top值，调整其位置
                    b.style.top=top-1+"px";
                    // b.style.top-=1;
                    // 淡化及其隐藏
                    b.style.opacity-=0.05;
                    
                    if(b.style.opacity < 0){
                        // 移除元素
                        document.body.removeChild(b);
                        // 清除定时器
                        clearInterval(timer);
                    }
                },100);
            }
            //定义颜色的随机函数
            function randomColor(){
                //~~的作用是去掉小数部分
                return "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
            }

心得体会

想通很重要，知识需要梳理，哪里是常用的，那些是不常用的，要活学活用。

好的老师也重要，老师您讲也非常好，很喜欢您讲课，思路清晰，后端老师讲的前端也不赖嘛，反正我收获挺大的。