事件代理操作:
//有如下代碼，要求當點擊每一個元素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>
