原生小实战

2017-08-30  本文已影响0人  王翔爱摇滚乐爱电影爱心理学爱哲

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

答案

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task-22-1" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
  //方法1， 直接给元素绑定事件
  var liArr = document.getElementsByClassName('ct')[0].getElementsByTagName('li');    //这样更安全一些
  for(var i=0;i<liArr.length;i++){
    liArr[i].addEventListener('click', function(){
      console.log(this.innerText);
    })
  }
  
  
  
 //方法2 ，使用事件代理，把事件监听绑定到父容器上，根据事件的来源进行处理
 /*
  var ct = document.querySelector('.ct');
  ct.addEventListener('click', function(e){
    console.log(e.target.innerText);
  });
 */
</script>

</body>
</html>

2、 补全代码，要求：

当点击按钮开头添加时在<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>
//你的代码
</script>

答案：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .ct{
      background: pink;
      padding: 20px;
    }
  </style>
</head>
<body>
<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<input id="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
  var ct = document.querySelector('.ct'),
      addStartBtn = document.querySelector('#btn-add-start'),
      addEndBtn = document.querySelector('#btn-add-end'),
      ipt = document.querySelector('#ipt-add-content');
  
  ct.addEventListener('click', function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
       console.log(e.target.innerText);
      }
  });
  
  addEndBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     li.innerText = ipt.value;
     ct.appendChild(li);
  });
  
  addStartBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     li.innerText = ipt.value;
     ct.insertBefore(li,ct.firstChild);
  });
</script> 

</body>
</html>

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

<body>
<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>
var ct = document.querySelector('.ct'),
    childs = ct.querySelectorAll('li'),
    preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){
    childs[i].addEventListener('mouseenter', function(){
       var dataImg = this.getAttribute('data-img');
       preview.innerHTML = '![](' + dataImg + ')'
    });
}
  //也可以考虑不使用循环，用事件代理把事件绑定到父元素上
</script>
</body>
上一篇下一篇

猜你喜欢

热点阅读