• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

webApi学习的第三天

互联网 diligentman 5天前 6次浏览

学习目标:

一周内学习完webApi


学习内容:

1、 掌握创建元素

createElement("标签名")  返回在内存中创建好的标签

父元素.appendChild(子元素) 将子元素添加到父元素的最后

2、 掌握对元素操作

2.1  removeChild(子元素)   删除子元素,返回被删除的子元素

2.2 replaceChild(新节点,旧节点)  将新节点覆盖旧节点,返回被替换的节点

2.3 insertBefore(新节点,添加节点的位置)  将新节点添加到指定位置

2.4  元素.cloneNode([布尔值]) 将元素克隆一份返回
              默认浅克隆 false:  只克隆标签,不克隆内容
              深克隆     true:   克隆标签有克隆内容

3、 掌握查找元素之间的关系

3.1找父亲   eg:findParent.parentElement   findParent.parentNode

3.2找儿子   eg:console.log(findSon.children); console.log(findSon.childNodes);

3.3找兄弟   eg.找兄弟
                         上:previousElementSibling  下:nextElementSibling
                         上:previousSibling         下:nextSibling

4、鼠标事件

      

 var divs = document.querySelectorAll(".containner div");
    divs[0].onclick=function () {
        alert("这是鼠标点击事件");
    };
    divs[1].ondblclick=function () {
        alert("这是鼠标双击击事件");
    };
    divs[2].onmouseover=function () {
        alert("这是鼠标移入事件");
    };
    divs[3].onmouseout=function () {
        alert("这是鼠标移出事件");
    };
    divs[4].onmousemove=function () {
        console.log("这是鼠标移动事件");
    };
    divs[5].onmousedown=function () {
        alert("这是鼠标按下事件");
    };
    divs[6].onmouseup=function () {
        alert("这是鼠标弹起事件");
    };

学习时间:

时间:2020.11.18
1、上午 晚上9:30-下午6:30分


当日作业:

1、 克隆小练习

      

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul{
        overflow: hidden;
    }
    li{
        float: left;
        margin:50px 20px;
    }
    p img{
        margin-left: 10px;
    }
</style>
<body>
<ul>
    <li><img src="../img/01.gif" alt=""></li>
    <li><img src="../img/02.gif" alt=""></li>
    <li><img src="../img/03.gif" alt=""></li>
    <li><img src="../img/04.gif" alt=""></li>
    <li><img src="../img/05.gif" alt=""></li>
    <li><img src="../img/06.gif" alt=""></li>
    <li><img src="../img/07.gif" alt=""></li>
    <li><img src="../img/08.gif" alt=""></li>
    <li><img src="../img/09.gif" alt=""></li>
    <li><img src="../img/10.gif" alt=""></li>
    <li><img src="../img/11.gif" alt=""></li>
    <li><img src="../img/12.gif" alt=""></li>
</ul>
<p>请发言:<img src="../img/01.gif"></p>
<script>
    //给每一个按钮添加事件
    var nodeListImg = document.querySelectorAll("ul li img"); //获取ul>li>img
    var getP = document.querySelector("p");                   //获取p的位置
    nodeListImg.forEach(function (item) {                      //给每一个img添加点击事件
        item.onclick=function () {
            var cloneNodeItem= item.cloneNode(true);          //将img深克隆
            getP.appendChild(cloneNodeItem);                   //父元素getP追加一个克隆后的节点添加入p标签里边
        }
    })


</script>
</body>
</html>

 

webApi学习的第三天
2、发布微博

<div class="bg">
    <textarea style=" resize:none"></textarea>
    <input type="button" value="发布">
</div>
<div class="content">
    <ul>
        <li><span>滴答滴啦嗲嗲啦</span><a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a></li>
        <li><span>一起来发布微博吧</span><a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a></li>
        <li><span>一起来发布微博吧</span><a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a></li>
        <li><span>一起来发布微博吧</span><a href="javascript:;" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</a></li>
    </ul>
</div>
 *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .bg{
        width: 501px;
        height: 162px;
        border: 1px solid black;
        position: relative;
        left: 28%;
    }
    .bg textarea{
        display: block;
        width: 400px;
        height: 100px;
        border: 1px solid orange;
        position: relative;
        left: 50px;
        top: 20px;
        white-space: normal
    }

    .bg input{
        width: 68px;
        height: 23px;
        background-color: 	#FFEFD5;
        position: relative;
        left: 10%;
        top: 20%;
        font-size: 13px;
    }
    .content{
        width: 501px;
        border: 1px solid orange;
        border-bottom:1px solid snow;
        text-align: center;
        color: 	#DAA520;
        position: relative;
        left: 28%;
    }

    .content li{
        width: 502px;
        height: 22px;
        border-bottom: 1.5px dashed gray;
        overflow: hidden;
    }
    .content li a{
        display: block;
        float: right;
        text-decoration: none;
        font-size: 15px;
        color: black;
    }

    <!--查找元素-->
    /*获取文本框的值*/
    var content = document.querySelector(".content");
    var bg = document.querySelector(".bg");
    var txt = document.querySelector("textarea");
    var btn = document.querySelector("input[type=button]");
    var ul = document.querySelector("ul");
    var getLi = document.querySelectorAll("li");
    // var getSpan = document.querySelectorAll("ul li span");
    // var get = document.querySelectorAll("ul li a");
    console.log(bg.children);//  //查找发布按钮和文本域
    console.log(content.children);
    // /*获取删除按钮*/
    /*鼠标点击事件*/
    btn.onclick=function () {
        var txtValue=txt.value;
        /*获取文本框的值*/
        if(txtValue=="") {
            alert("请输入内容");
            }else if(txtValue.length>120){
                alert("长话短说,不能超过120个字");
        }else{
            /*创建一个li标签*/
            var liList=document.createElement("li");
            // var creatA = document.createElement("a");
            liList.innerHTML=txtValue+"<a>"+"删除"+"</a>";
            // creatA.innerHTML="<a>"+"删除"+"</a>";
            //每次添加到ul>li里面的第一个儿子之前,insertBefore(新节点,位置)
            ul.insertBefore(liList,getLi[0]);//li增加一个li的位置和下边框
            // ul.insertBefore(creatSpan,getLi[0]);//
            txt.value="";
            // ul.insertBefore(creatA,getLi[0]);
        }
    };
    /*删除remove*/
    function deleteTr(obj) {
        //通过this找到父级元素节点
        var li1=obj.parentNode;
        //找到li
        var ul1=li1.parentNode;
        ul1.removeChild(li1);
    }

webApi学习的第三天
 


喜欢 (0)