任务22 DOM、事件-代码题

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

//方法1
var ct=document.getElementsByClassName("ct");
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    li[i].onclick=function(){
        console.log(this.innerText);
    }
}
//方法2 绑定在父亲上
  var ct=document.getElementsByClassName("ct")[0];
  // 注意此处的[0]必须要有，不然没有效果；
   ct.onclick=function(e){
    console.log(e.target.innerText);
  }
  //方法3
   var liArr=document.getElementsByClassName("ct")[0].getElementsByTagName("li");
  var handler=function(){
console.log(this.innerText);
}
 for(var i=0;i<liArr.length;i++){
liArr[i].addEventListener('click',handler,false)
}

jsbin链接

2.补全代码，要求：
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字串;当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.当点击每一个元素li时控制台展示该元素的文本内容。

  <ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script type="text/javascript">
var     ul=document.getElementsByClassName("ct")[0];
var  liArr=document.getElementsByClassName("ct")[0].getElementsByTagName("li");
var text=document.querySelector(".ipt-add-content");
var addStart=document.getElementById("btn-add-start");
var addEnd=document.getElementById("btn-add-end");

ul.addEventListener("click",function(e){    //当点击每一个元素li时控制台展示该元素的文本内容
    console.log(e.target.innerText);
});
    addStart.onclick=function(){
        var newLi=document.createElement("li");
        newLi.innerHTML=text.value;
        ul.insertBefore(newLi,ul.children[0]);
    }
    addEnd.onclick=function(){
        var newLi=document.createElement("li");
        newLi.innerHTML=text.value;
        ul.appendChild(newLi);
    };
</script>

jsbin链接

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

<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
 <div class="img-preview"></div>
<script>
//方法1，事件代理绑定父容器
var ul=document.querySelector(".ct");
var div=document.querySelector(".img-preview");
ul.addEventListener('mouseover',function(e){
    var img=e.target.getAttribute("data-img");
    div.innerHTML='<img src="'+img+'">';
});
//方法2绑定li元素
var li=document.querySelectorAll("li");
var div=document.querySelector(".img-preview");
for(var i=0;i<li.length;i++){
    li[i].addEventListener('mouseover',function(){
        var img=this.getAttribute('data-img');
        div.innerHTML='<img src="'+img+'">'
    });
};

JSbin链接

4.实现如下图Tab切换的功能
jsbin链接

5.实现下图的模态框功能
jsbin链接