1、有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<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 ，使用事件代理，把事件監(jiān)聽(tīng)綁定到父容器上，根據(jù)事件的來(lái)源進(jìn)行處理
/*
var ct = document.querySelector('.ct');
ct.addEventListener('click', function(e){
console.log(e.target.innerText);
});
*/
</script>
</body>
</html>
2、 補(bǔ)全代碼，要求：
當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶(hù)輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶(hù)輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</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="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</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、 補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片。
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片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 = ''
});
}
//也可以考慮不使用循環(huán)，用事件代理把事件綁定到父元素上
</script>
</body>
