每周总结（一）

最新推荐文章于 2024-10-02 05:39:15 发布

一个前端初学者

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量159

点赞数

分类专栏： javascript学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45753210/article/details/107451891

版权

javascript学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为什么要进行总结

以后每一周的星期天都会对这周的学习进行一个总结。总结会使我对于知识点的印象加深，并且以后回顾的时候也有地方可以快速查询。
在这一周中，学习了关于DOM的内容，以及一些Vue入门的语法。

事件

事件就是用户和浏览器的交互行为，比如点击按钮、鼠标移动、关闭窗口··· ···

        var btn=document.getElementById("btn");
        btn.onmousemove=function(){
            alert("你还点");
        } ;//弹出"你还点"

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用。

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的。如果把script标签写在前面，在代码执行时，页面还没有加载完成，会导致无法获取属性。这时我们需要让JS代码在最后进行加载。

    <script>
        /* 
            onload事件会在整个页面加载完成之后才触发
            为window绑定一个onload事件
            该事件对应的相应函数将会在页面加载完成之后执行
            这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
         */

        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("hello");
            };
        };
    </script>

图片切换的练习

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #outer{
            width: 540px;
            height: 700px;
            margin: 50px auto;
            background-color: yellowgreen;
            text-align: center;
            
        }
        #ss{
            width: 500px;
            height: 500px;
            margin: 50px 20px;
        }
    </style>

    <script>
        window.onload=function(){
            /* 
                点击按钮切换图片
             */
            
            //获取两个按钮
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");

            /* 
                要切换图片就是要修改img标签的src属性

             */

            //获取img标签
            var img=document.getElementsByTagName("img")[0];


            //创建一个数组,用来保存图片路径
            var imgArr=["img/1.png","img/4.png","img/5.png","img/6.png","img/7.png"];

            //创建一个变量,来保存当前正在显示的图片的索引
            var index=0;

            //设置提示文字
            //获取id为info的p元素
            var info=document.getElementById("info");
            // info.innerHTML="共 5 张图片,当前是第 "+(index+1)+" 张";
            info.innerHTML="共 "+imgArr.length +" 张图片,当前是第 "+(index+1)+" 张";

            //分别为两个按钮绑定单击响应函数
            prev.onclick=function(){
                /* 
                    切换到上一张,索引自减
                 */
                index--;
                // alert("上一张");
                //判断index是否小于0
                if(index<0){
                    index=imgArr.length-1;
                }
                img.src=imgArr[index];
                info.innerHTML="共 "+imgArr.length +" 张图片,当前是第 "+(index+1)+" 张";
            }

            next.onclick=function(){
                // alert("下一张");

                //切换图片就是修改img的src属性
                //要修改一个元素的属性 元素.属性=属性值
                index++;
                //判断index有没有超过数组长度
                if(index>imgArr.length-1){
                    index=0;
                }
                img.src=imgArr[index];
                info.innerHTML="共 "+imgArr.length +" 张图片,当前是第 "+(index+1)+" 张";
            }

            
        }
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="img/1.png" alt="山水" id="ss">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

在做这个练习时，我们应该先有一个思路：首先如何将多张图片存放起来，让其可以都在一个页面中显示。

在这里选择用一个数组来存放每张图片的路径。

var imgArr=["img/1.png","img/4.png","img/5.png","img/6.png","img/7.png"];

再通过

var img=document.getElementsByTagName("img")[0];

来获取img标签。注意因为该方法返回的是一个数组，所以需要指定img为该数组的第一个元素。如果去掉 [0] 将无法实现修改img标签里的src。

DOM的增删改

对于DOM元素节点的增加，我们要想一想，与这个元素相关其他元素的层级关系。

document.createElement()//可以用来创建某个元素
document.createTextNode()//创建文本节点
 element.appendChild()//向一个父节点添加一个新的子节点

一般来说，我们需要逐层添加。先从逐一创建好需要的相关元素，再由内向外添加。

我们还可以使用 element.innerHTML()进行添加。

但是该方法将对整块代码进行改动，我们也需要与element.appendChild()结合使用。

元素的删除可以使用 element.removeChild()来删除指定的子节点。

操作内联样式

在这一节学习的是如何通过JS去修改元素的样式
语法：
元素.style.样式名=样式值

example:

var box1 = document.getElementById("box1");
box1.style.width="300px";

注意:
如果CSS的样式名中含有 - ,这种名称在JS中是不合法的。
比如

background-color

需要将这种样式修改为驼峰命名法。

backgroundColor

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示。

但是如果在样式中写了!important,则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式,此时会导致JS修改样式失效。通过style属性读取和设置的都是内联样式。

读取元素的样式

在除IE外的浏览器，我们可以使用getComputedStyle()这个方法来获取元素当前的样式。这个方法是window的方法,可以直接使用。
需要两个参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般都传null
该方法会返回一个对象,对象中封装了当前元素对应的样式

var obj= getComputedStyle(box1,null);

事件的冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素的事件被触发时，其祖先元素也被触发。

<script>
        window.onload=function(){
            //为s1绑定一个单击响应函数
            var s1=document.getElementById("s1");
            s1.onclick=function(event){
                event=event||window.event;
                alert("我是span");
                //取消冒泡
                //可以将事件对象的cancelBubble设置为true,即可取消冒泡
                event.cancelBubble=true;
            }

            //为div绑定单击响应函数
            var box1=document.getElementById("box1");
            box1.onclick=function(){
                event=event||window.event;
                event.cancelBubble=true;
                alert("我是div");
            }

            //为body绑定单击响应函数
            document.body.onclick=function(){
                alert("我是body");
            }
        }
    </script>

事件的委派

指将事件统一绑定给元素的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的相应函数来处理事件。
事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。

Vue

先创建一个HTML页面，再通过如下的方式<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>引入Vue

Hello Vue

var hello =new Vue({
                el:'helloVue',
                data:{
                    message:"你好 Vue!"
                }
            }

在Vue中，先创建一个对象，再向里面添加符号选择器，以及想要表示的元素。
最后再在div中表示

<div id="helloVue">
        {{message}}
    </div>

结语

这篇总结肯定还有不严谨缜密的地方，学习是一件日积月累的事。在以后的学习过程中，回过头来看看以前做的一些学习记录，修改有错误的地方也是一种进步吧。

一个前端初学者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录