冯娜_20210115冯娜

知识点总结

一、DOM:文档对象模型,用于操作网页中的元素

1、在每个HTML页面被浏览器解析的时候会在内存中创建一棵DOM树,通过DOM模型,可以访问所有的HTML元素,可以对其内容进行修改和删除,也可以创建新的元素,创建新的元素需要挂到DOM树上才可以在网页中显示出来。

2、查找节点

document.getElementById();//根据id获取一个元素,所以id值不可以有相同的
document.getElementsByClassName();//根据class获取一(多)个元素,得到的数据类型是数组,具体的某一个元素可以用数组下标来寻找
document.getElementsByName();//根据name获取一(多)个元素,得到的数据类型是数组,具体的某一个元素可以用数组下标来寻找
document.getElementsByTagName();//根据标签名获取元素
document.querySelector();//根据选择器获取元素 (与css选择器的规则一样)
document.querySelectorAll();//根据选择器选择一(多)个元素,返回的是数组

3、案例:复选框的全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="item"  value="99" " />a
        <input type="checkbox" name="item"  value="9.9" "/>b
        <input type="checkbox" name="item"  value="199" " />c
        <input type="checkbox" name="item"  value="299" "/>d
        <input type="checkbox" name="item"  value="399" "/>e
        <br>
        <input type="checkbox" id="all" onclick="quan()" />全选/全不选
        <button type="button" onclick="fan()">反选</button>
        <button type="button" onclick="sum()">结算</button>
        <p>总计:<span id="price">0</span>元</p>
        
        <script type="text/javascript">
            var it=document.querySelectorAll("[name=item]");
            //全选、全不选 事件
            function quan(){
                //获取全选框
                var all = document.querySelector("#all");
                //遍历每一个input元素
                for(var i=0;i<it.length;i++){
                    //当前循环被遍历的元素
                    var cur=it[i];
                    //设置全选
                    cur.checked = all.checked;
                }
            }
            //反选事假
            function fan(){
                for(var i=0;i<it.length;i++){
                    var cur =it[i];
                    //设置反选
                    cur.checked=!cur.checked;
                }
            }
            //求合计事假
            function sum(){
                var sum=0;
                for(var i=0;i<it.length;i++){
                    var cur=it[i];
                    //若被选中
                    if(cur.checked){
                        //parseFloat解析一个字符串,返回一个浮点数
                        sum=sum+parseFloat(cur.value);
                    }
                }
                //将价格写入sum
                document.querySelector("#price").innerText=sum;
            }
        </script>
    </body>
</html>

4、DOM操作

document.createElment();//创建元素节点
document.createTextNode();//创建文本节点
元素对象.appendChild();//向节点的子节点列表末尾添加新的子节点
元素对象.removeChild();//删除子节点
元素对象.hasChildNodes();//返回元素是否拥有子节点

5、js操作css样式

//方式一
.style.样式名="样式值";
.className="类名";

案例:鼠标点击效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //获取html元素
            var html=document.querySelector("html");
            //给html添加监听事件
            html.addEventListener("click",heart,false);
            //写heart函数方法
            function heart(e){
                var fontsize=16;
                //鼠标位置 clientX,clientY 鼠标位置的坐标 -fontsize/2是为了让箭头居中显示
                var left=e.clientX-fontsize/2;
                var top=e.clientY-fontsize/2;
                //创建一个b元素
                var b=document.createElement("b");
                //b元素的内容
                b.innerText="❤";
                //设置b元素的属性
                b.style="font-size: " + fontsize + "px;color:" + randomColor() + ";position:absolute;left:"+ left + "px;top:" + top + "px;opacity:1;";
                //将b元素添加到body中,显示在页面上
                document.body.appendChild(b);
                 // 定义一个 定时任务, 修改他的 style 属性
                var timer = setInterval(function(){
                // 去掉 top 值的 单位 px
                var top = b.style.top.replace("px", "");
                // 调整位置
                b.style.top = top - 1 + "px" ;
                // 隐藏
                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()) + ")";
            }
        </script>
    </body>
</html>

6、表单校验

web网页的安全问题,表单数据验证通过后提交给服务器(客户端),并且发送请求给服务端,服务端再次验证数据,不合法的数据响应给客户端。

二、web常见的安全问题

web攻击动机:

1、恶作剧;

2、关闭Web站点,拒绝正常服务;

3、篡改Web网页,损害企业名誉;

4、免费浏览收费内容;

5、盗窃用户隐私信息,例如手机号、Email等个人信息;

6、以用户身份登执行非法操作,从而获得暴利;

7、以此为跳板攻击企业内网其他系统;

8、网页挂木马,攻击访问网页的特定用户群;

9、仿冒系统发布方,诱骗用户执行危险操作,例如用木马替换正常下载文件,要求用户汇款等

三、JavaScript

1、作用:与用户进行交互

2、历史:ECMA:es1~es10,现在主要 使用es6

3、JavaScript是脚本语言,是可插入HTML页面的编程代码,轻巧灵活,兼顾函数式编程和面向对象编程,解释型语言,不会生成中间文件,解释一行,执行一行;弱类型语言,不同类型的数据可以赋值给同一个变量

4、JavaScript语法组成:ECMASript(核心部分)、BOM、DOM

5、JavaScript的编写方式

 //1、在head中书写
<head>
    <script type="text/javascript">
     // JavaScript 代码
    </script>
  </head>
//2、在body中书写
<body>
    <script type="text/javascript">
     // JavaScript 代码
    </script>
  </body>
//3、通过script标签的src属性导入
<script src="xxx.js" type="text/javascript"></script> 

6、可以使用中文命名变量

7、JavaScript区分大小写

心得体会

​ 今天做的练习相对之前几天难度有所增加,昨天理解错了一个问题,就是document是DOM中的查找DOM节点的操作,昨天错把document理解为了BOM中的操作。之前被问道过web网站前端页面是否安全的问题,当时从来没有想过这个问题,原来这里的安全问题还是很明显的。

标签

评论


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