- 补全代码，要求：当鼠标放置在
li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="https://www.baidu.com/img/baidu_jgylogo3.gif">鼠标放置查看图片1</li>
<li data-img="http://news.hangzhou.com.cn/shxw/images/attachement/gif/site2/20110704/b8ac6f87bfff0f7bae5e0b.gif">鼠标放置查看图片2</li>
<li data-img="http://news.hangzhou.com.cn/shxw/images/attachement/png/site2/20180512/001aa02787381c60adfa37.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var dar1 = document.querySelector('.ct')
var dar2 = document.querySelector('li')
var dar3 = document.querySelector('.img-preview')
dar1.addEventListener('mouseover',function(e){
var img = e.target.getAttribute('data-img')
dar3.innerHTML = "<img src="+img+">"
})
</script>
注意： 使用addEventListener传入的参数
e是该事件函数的固有参数，target表示的是鼠标指示的内容。第二题：补全代码，要求：
当点击按钮开头添加时在<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 dar1 = document.querySelector('.ct')
var dar2 = document.querySelectorAll('li')
var input = document.querySelector('.ipt-add-content')
var but1 = document.querySelector('#btn-add-start')
var but2 = document.querySelector('#btn-add-end')
but1.addEventListener('click',function(){
var text = document.createElement('li')
if (input.value.length == 0){
alert('请输入内容')
}
else{
text.innerText = input.value
dar1.insertBefore(text,dar1.firstChild)
} })
but2.addEventListener('click',function(){
var text = document.createElement('li')
if (input.value.length == 0){
alert('请输入内容')
}
else{
text.innerText = input.value
dar1.appendChild(text)
}
})
注意代码的流程：① 首先定义各种搜索得到的结果；② 对于第一个button使用事件监听；③ 创建一个元素‘li’并赋给‘text’；④ 使用if语句向text中塞东西，塞input的value；⑤ 最后使用在之前插入，定位为dar1中的第一个子元素之前。对于后面的but2,注意是对dar1使用aPPendchild属性。
-
第三题：实现该效果
image.png
<style>
.content{
padding: 10px ;
border: 1px solid;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.14);
}
.active {
background-color: black
}
</style>
<div class = 'content'>
<h1>hello</h1>
<p>jirengu</p>
</div>
<button class= 'add'>add</button>
<button class = 'remove'>remove </button>
<button class = 'tog1'>toggle1</button>
<button class = 'tog2'>toggle2</button>
<script>
var addbtn = document.querySelector('.add')
var rembtn = document.querySelector('.remove')
var change1btn = document.querySelector('.tog1')
var change2btn = document.querySelector('.tog2')
var con = document.querySelector('.content')
addbtn.onclick = function(){
con.classList.add('active')
}
rembtn.onclick = function(){
con.classList.remove('active')
}
change1btn.onclick = function(){
if (con.classList.contains('active')){
con.classList.remove('active')
}
else{ con.classList.add('active')}
}
change2btn.onclick = function(){
if (con.classList.contains('active')){
con.classList.remove('active')
}
else{ con.classList.add('active')}
}
</script>
实现结果是： 点击第一个按钮，背景色变黑，点击第二个按钮，背景色变白；点击第三个按钮，背景色变得和之前的不一样；第四个和第三个相同
