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 = ''
});
}
//也可以考虑不使用循环，用事件代理把事件绑定到父元素上
</script>
</body>
网友评论