事件代理操作:
//有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul id="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
var ul=document.getElementById('ct');
function ulclick(e){
console.log(e.target.innerText);
}
ul.addEventListener('click', ulclick);
添加节点操作：
<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>
// 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
// 当点击每一个元素li时控制台展示该元素的文本内容。
var ul=document.getElementsByClassName('ct')[0];
var fir_btn=document.getElementById('btn-add-start'),
end_btn=document.getElementById('btn-add-end');
function getValue(){
return document.getElementsByClassName('ipt-add-content')[0].value;
}
function endadd(){
var end=document.createElement("li");
end.innerText=getValue();
ul.appendChild(end);
}
function firstadd(){
var first=document.createElement('li');
first.innerText=getValue();
ul.insertBefore(first, ul.firstChild);
}
end_btn.addEventListener('click', endadd);
fir_btn.addEventListener('click', firstadd);
</script>
节点属性操作：
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
var ct=document.getElementsByClassName('ct')[0];
var div=document.getElementsByClassName('img-preview')[0];
function pic_add(p){
if(div.childNodes.length>0){
div.removeChild(div.childNodes[0]);
}
var pic_name=p.target.attributes['data-img'].value;
var img=document.createElement('img');
img.src=pic_name;
div.appendChild(img);
}
ct.addEventListener('mouseover', pic_add);
</script>
轮播头图:
//实现Tab切换的功能
<div class="mod-tab">
<ul class="tabs">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active">内容1</div>
<div class="panel">内容2</div>
<div class="panel">内容3</div>
</div>
<script>
var tabs=document.getElementsByClassName('tabs')[0],
li=document.getElementsByTagName('li'),
panels=document.getElementsByClassName('panel'),
li_len=li.length,
pan_len=panels.length,
active=new RegExp("active");
function tab(p){
for(var i=0;i<li_len;i++){
li[i].className=li[i].className.replace(active, '');
}
p.target.className+=' active';
for(var j=0;j<pan_len;j++){
panels[j].className=panels[j].className.replace(active, '');
if(p.target==p.target.parentElement.children[j]){
panels[j].className+=' active';
}
}
}
tabs.addEventListener('mouseover', tab);
模态框基本功能：
<style>
.full{
width: 400px;
height: 400px;
border: 1px solid #ccc;
position: relative;
}
#click{
position: absolute;
}
#shake{
width: 100%;
height: 100%;
background-color: rgba(96,96,96,0.5);
position: absolute;
display: none;
}
#login{
position: absolute;
z-index: 10;
width: 200px;
height: 100px;
border: 1px solid grey;
margin:25%;
background-color: #fff;
display: none;
}
#login .close{
background-color: #fff;
margin-left: 100px;
}
.button_click{
display: block;
}
</style>
<body>
<div class="full">
<button id="click">点我</button>
<div id="shake"></div>
<div id="login">
<div class="h1">
我是标题
<button class="close">X</button>
</div>
<p>我是正文-我是正文-我是正文-我是正文-我是正文-</p>
</div>
</div>
<script>
var button=document.getElementById('click'),
close=document.getElementsByClassName('close')[0],
shake=document.getElementById('shake'),
login=document.getElementById('login');
button.addEventListener('click', function(){
shake.style.display='block';
login.style.display='block';
});
close.addEventListener('click', function(){
shake.style.display='none';
login.style.display='none';
})
</script>
网友评论