首頁 > 開發者 > JavaScript
緊接著上次的《決戰JS》，分析總結一些比較實用的DEMO與新手分享，望大神拍磚。 demo5.點擊隱藏: 要實現這個功能只需要知道在onclick事件中加入對父節點的樣式dislay設定為none就完全足夠了。實現的效果是當使用者點擊“hide this”時，該連結的父節點的樣式自動隱藏。對於網上的很多廣告或通知之類的用這種實現，只需將ul,li換為div，然後再稍作修改，實現方法是比較輕鬆。 複製代碼<html><head><meta charset="utf-8"><title></title><script>window.onload=function(){ var aA=document.getElementsByTagName('a');//用getElementsTagName擷取標籤<a>,類型為數組 var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++) { aA[i].onclick=function(){//添加onclick事件 this.parentNode.style.display='none';//將父節點的樣式display設定為none }; }}; </script></head> <body><ul id="ul1"> <li>aaaaaa <a href="javascript：;">hide this</a></li> <li>bbbbbb <a href="javascript：;">hide this</a></li> <li>cccccc <a href="javascript：;">hide this</a></li> <li>dddddd <a href="javascript：;">hide this</a></li> <li>eeeeee <a href="javascript：;">hide this</a></li></ul></body></html>複製代碼 demo6. 類分享模組: 實現這個DEMO最需要掌握的就是定時器的使用和js實現一些簡單的運動。這裡採取的定位方式是相對定位，詳細的分析程式碼分析已經附在代碼的末尾。然而，這兩個運動函數由於只有部分的區別，完全可以將其合并為同一個函數，直接將速度定義，實現方法為：判斷div1的左邊（offsetLeft）是否大於目標座標（最開始在樣式表中設定的），如果大於，那麼將速度設為-10，否則設為10，實現時需要更改函數的參數。這次更新《決戰JS》 應博友要求加上注釋，確實節約了閱讀成本。再次感謝博友的意見。 複製代碼<!DOCTYPE HTML><html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title>share</title> <style> #div1 {width:150px;height:200px;background:red;position:absolute;left:-150px;} #div1 span{position:absolute;width:20px;height:60px;line-height:20px;background:blue;right:-20px;top:70px;} </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); //取元素div1 oDiv.onmouseover=function() //對div1加上onmouseover事件 {startmove();}; oDiv.onmouseout=function()//對div1加上onmouseout事件 {startmove2();}; }; var timer=null; function startmove(){ //實現滑鼠在div上移動過程 var oDiv=document.getElementById('div1'); clearInterval(timer); //在實現之前需要關閉所有的定時器 timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+10+'px';//在此設定的運動速度是10px } },30); } function startmove2(){//實現滑鼠在div1上移出過程 var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft==-150){//在style樣式中定義的是-150px，隱藏起來 clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft-10+'px';//速度為負，向左運動 } },30); } </script> </head> <body> <div id="div1"> <p><a href="http://itred.cnblogs.com">ITRED的部落格</a></p> <p><a href="http://itred.cnblogs.com">ITRED的部落格</a></p> <p><a href="http://itred.cnblogs.com">ITRED的部落格</a></p> <span>分享到</span> </div> </body> </html>複製代碼 demo7 .刪除元素： 實現這個和前面實現的隱藏類似。這裡只是為了體現removeChild的用法。 其實現過程就只需要會一句話，即僅僅一條代碼就可實現：oUl.removeChild(this.parentNode);關於實現過程的解析見代碼後的注釋。 複製代碼<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ //load事件，取元素---->模板 var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++) { aA[i].onclick=function(){ oUl.removeChild(this.parentNode);//重點在這兒：移除這個節點的父級元素 }; } }; </script> <body> <ul id="ul1"> <li><a href="http://itred.cnblogs.com">前往itRed的部落格</a><a href="javascript：;">刪除</a></li> <li><a href="http://itred.cnblogs.com">itRed的部落格</a><a href="javascript：;">刪除</a></li> <li><a href="http://itred.cnblogs.com">前往itRed</a><a href="javascript：;">刪除</a></li> <li><a href="http://itred.cnblogs.com">前往部落格</a><a href="javascript：;">刪除</a></li> <li><a href="http://itred.cnblogs.com">itRed</a><a href="javascript：;">刪除</a></li> </ul> </body> </html>複製代碼 demo8.建立元素： 本DEMO以建立ul中的li元素為例。簡單分析關於建立li元素的過程和步驟。然後再來進行擴充。實現這個DEMO需要掌握兩點知識，其一是應用document.createElement(‘ ’)語句來建立自己需要的元素標籤，即在括弧中需要填寫自己想要實現的標籤名稱；其二是將建立好的元素放到應該放得位置，通過語句appendChil()實現。 複製代碼<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title>建立元素</title> </head> <script> window.onload=function(){//模板，onload事件,然後擷取需要的元素 var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function(){ var oLi=document.createElement('li'); //建立標籤為li的元素 oUl.appendChild(oLi);//將建立好的標籤元素添加到oUl中，使其能夠在頁面中顯示出來 }; }; </script> <body> <input type="button" id="btn1" value="建立li元素"/> <ul id="ul1"> </ul> </body> </html>複製代碼 demo9.類微博，部落格等留言版： 知道如何建立元素之後，就是將該文字框放在相應位置，但使用者進行留言，發帖時，就將該內容加到相應的位置上面。根據DEMO 8 可輕鬆實現本DEMO。 複製代碼<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){ var oLi=document.createElement('li');//加入標籤元素---建立 oLi.innerHTML=oTxt.value; //將使用者輸入在文字框中的值添加到innerHTML中 oUl.appendChild(oLi);//在父級上添加子節點 }; }; </script> <body> <input type="text" id="txt1"/> <input type="button" id="btn1" value="創 建"> <ul id="ul1"> </ul> </body></html>複製代碼 demo10.對DEMO 9進行最佳化： DEMO 9中雖然能夠實現所需的效果，但是新增內容時，總是從下面開始添加，與我們實際在網站中看到的有一定的差距。因此，我們需要對此進行最佳化。思路其實很簡單：當使用者在新增內容時，我們只需要做一下判斷，但使用者第一個輸入，好，那麼就直接添加子節點就行；否則說明ul裡面的li已經有了內容，我們可利用insertBefore在第0個元素之前插入。詳細實現過程，見代碼注釋。 複製代碼<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){ var oLi=document.createElement('li');//加入標籤元素---建立 oLi.innerHTML=oTxt.value; //將使用者輸入在文字框中的值添加到innerHTML中 var aLi=oUl.getElementsByTagName('li'); //擷取ul中的li，存放在數組aLi中 if(aLi.length>0){ //對li的個數進行判斷 oUl.insertBefore(oLi,aLi[0]); //如果存在li,那麼只需要運用insertBefore在前面插入新的內容 }else{ oUl.appendChild(oLi);//否則直接添加子節點 } }; }; </script> <body> <input type="text" id="txt1"/> <input type="button" id="btn1" value="創 建"> <ul id="ul1"> </ul> </body></html>複製代碼 希望大神不吝拍磚，有好方法，簡單方法，希望提出來，我們共同學習，共同進步！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
