事件题目

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis=document.querySelectorAll(".ct>li")

lis.forEach(function(value){
  value.addEventListener("click",function(){
    console.log(this.innerText)
  })
})
</script>

补全代码，要求：

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
        var btnHeadAdd=document.querySelector("#btn-add-start");
    var btnEndAdd=document.querySelector("#btn-add-end");
    var btnContent=document.querySelector(".ipt-add-content");
    var firstLi=document.querySelector(".ct>li:first-child")
    var ct=document.querySelector(".ct")
    var lis=document.querySelectorAll(".ct>li");

    btnHeadAdd.addEventListener("click",function(){
        if (!btnContent.value=="") {
            headAddEvent()
        }     
    })

    btnEndAdd.addEventListener("click",function(){
        if (!btnContent.value=="") {
            footerAddEvent()
        }
    })

    ct.addEventListener("click",function(e){
        var target=e.target
        console.log(target.innerText)
    })

    function headAddEvent(){
      var Newli=document.createElement("li")
      var btnText=btnContent.value
      var NewliText=document.createTextNode(btnText)
      Newli.appendChild(NewliText)
      ct.insertBefore(Newli,ct.firstChild)
    }

    function footerAddEvent(){
      var Newli=document.createElement("li")
      var btnText=btnContent.value
      var NewliText=document.createTextNode(btnText)
      Newli.appendChild(NewliText)
      ct.appendChild(Newli)
    }
</script>

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

function $(id){
        return document.querySelector(id)
  }
    function $$(cls){
        return document.querySelectorAll(cls)
  }
    
    console.log($$(".ct>li"))

    $$(".ct>li").forEach(function(value){
        value.addEventListener("mouseover",function(){
            var dataImg = this.getAttribute('data-img');
            $(".img-preview").innerHTML='![](' + dataImg + ')'
        })
    })

实现如下图Tab切换的功能

Paste_Image.png

http://js.jirengu.com/gofunopucu/1/edit?html,css,js,output

实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏

Paste_Image.png

http://js.jirengu.com/gexedeyopa/11/edit?html,css,js,output