冯佳丽_20210115冯佳丽

知识点总结

1、关于元素节点的操作

方法 作用
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
元素对象.appendChild() 向节点的子节点列表末尾添加新的子节点
元素对象.removeChild() 删除子节点
元素对象.hasChildNodes() 返回元素是否拥有子节点
元素对象.fifirstChild 返回元素的首个子节点

2、js中操作css样式

css js 说明
color color 一个单词的样式写法是相同
font-size fontSize 驼峰命名法

方式一

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())+")";
            }

心得体会

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

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1