學習目標：

一周內學習完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>

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);
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225367.html

標籤：其他

上一篇：node搭建web服務器

下一篇：vue腳手架開發+百度地圖API的使用（帶實體）

webApi學習的第三天

學習目標：

學習內容：

學習時間：

當日作業：