贺佳磊_20210115贺佳磊

知识点总结

1、DOM

eg1:dom选择

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>dom选择</title>
    </head>
    <body>
        <input type="checkbox" name="good" value="44" />裤子
        <input type="checkbox" name="good" value="55" />鞋子
        <input type="checkbox" name="good" value="66" />羽绒服
        <hr />  
        <input type="checkbox" id="select" onclick="selectall()"/>全选/全不选
        <button type="button" onclick="fanxuan()">反选</button>
        <hr />
        <button type="button" onclick="sum()">结账</button>
        <p>总计<span id="price">0</span>元</p>
        <script type="text/javascript">
            var goods=document.querySelectorAll("[name=good]");
            function selectall(){
                var select=document.querySelector('#select');
                for(var i=0;i<goods.length;i++){
                var cur=goods[i];               
                cur.checked=select.checked;
            }
            }
            function fanxuan(){
                for(var i=0;i<goods.length;i++){
                    var cur=goods[i];
                    cur.checked=!cur.checked;
                }
            }
            function sum(){
                   var sum=0;
                for(var i=0;i<goods.length;i++){
                    var cur=goods[i];
                    if(cur.checked){
                        sum+=parseInt(cur.value);
                    }
                    document.querySelector("#price").innerText=sum;
                    
                }
                
            }
            
        </script>
    </body>
</html>

eg2:鼠标点击效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鼠标点击动画</title>
    </head>
    <body>
        <p style="font-size: 20px;color: aqua;">ff</p>
        <script type="text/javascript">
            //获取元素
            var html=document.querySelector("html");
            //给HTML设一个监听事件
            html.addEventListener("click",text,false);
            //函数
            function text(e){
                //字体大小
                var fontsize=30;
                //根据鼠标位置计算元素出现的位置
                var left=e.clientX-fontsize/2;
                var top=e.clientY-fontsize/2;
                //添加一个新元素b
                var b=document.createElement("b");
                //元素中的内容
                b.innerText="❀";
                //设置内容样式
                b.style="font-size: "+fontsize+"px;color: "+color()+";opacity:1;position:absolute;left:"+left+"px;top:"+top+"px;";
                //添加到body中
                document.body.appendChild(b);           
            //设一个定时任务
            var time=setInterval(change,100);
               function change(){
                //消失
                b.style.opacity-=0.05;
                if(b.style.opacity<0){
                //移除元素
                document.body.removeChild(b);
                //清除定时器
                createElement(time);
               } 
               }
               function color(){
                   //~~的作用是去掉小数部分
                                return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
                            }              
            }
        </script>
    </body>
</html>

eg3:表格颜色改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格颜色改变</title>
        <style type="text/css">
            .bg{
                background-color: darkseagreen;
            }
        </style>
    </head>
    <body>
        <table  border="1" cellspacing="0" cellpadding="3" width="400px"> 
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>贺佳磊</td>
                <td>女</td>
            </tr>
        </table>
        <script type="text/javascript">
            //获取table元素
            var table=document.querySelector("table");
            //获取tr元素
            var trs=document.querySelectorAll("tr");            
                //元素迭代
                for(var i=0;i<trs.length;i++){
                //鼠标响应函数    
                    trs[i].onmouseover=function(){
                //改变颜色
                this.className=this.className+" bg";
                }
            }
            
                //元素迭代
                for(var i=0;i<trs.length;i++){
                //鼠标响应函数
                    trs[i].onmouseout=function(){
                //颜色消除
                this.className=this.className.replace(" bg","");
                }
                }
        </script>
    </body>
</html>

2、JavaScript

(1)作用、历史、起源

(2)语法组成

组成部分 作用
ECMAScript 构成了JS核心的语法基础
BOM Browser Object Model 浏览器对象模型,用来操作客户端和浏览器窗口上的对象
DOM Document Object Model 文档对象模型,用来操作网页中的元素

(3)ECMAScript 版本

(4)基础语法

心得体会

时间过的真快,一周了,在这一周,老师讲了HTML、CSS、JavaScript,我也收获很多,在这学到的内容比在学校学到的多得多,在学校学的太皮毛了,更多的是要自己自学,如果不自律不多学一些,大学出来真的很迷茫。老师也有和我们聊一些关于就业以及与计算机相关的很多,所以我现在此刻要定下目标,大学出来一定要精通一门编程语言,就像老师一样熟练,哈哈,可能也就这样说说,加油吧!

标签

评论

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