js基礎練習

標籤：style   io   ar   color   sp   for   java   on   div   

最近在學習前端，當然包括js,css,html什麼的,在聽課時做的一些小練習,記錄下來：

執行個體一：

--Tab選項卡--

<script type="text/javascript">
  window.onload=function(){
  var ali=document.getElementsByTagName("li");
  var adiv=document.getElementsByTagName("div"); 
  var i=0;
  for(i=0;i<ali.length;i++)
  {
   ali[i].index=i;
   ali[i].onclick=function()
   {
    for(i=0;i<ali.length;i++)
    {
     ali[i].className="";
     adiv[i].style.display=‘none‘;
    }
       this.className=‘active‘;
     //alert("這是第"+ this.index + "個按鈕"); 
       adiv[this.index].style.display=‘block‘;
   };
   }
  };
</script>

相應的css,以及div:

<style type="text/css"> ul{ margin:0px; padding:0px; list-style:none;} li{float:left; height:34px; width:80px; line-height:34px; text-align:center; background:#000; color:#F00; border:#CCC solid 1px;} li:hover{ text-decoration:underline; border:#999 solid 1px;} .active {float:left; height:34px; width:80px; line-height:34px; text-align:center; background:#000; color:#CCC; border:#CCC solid 1px;}div{ background:#CCC; margin-left:2px; width:320px; height:200px; border:#333 solid 1px; display:none;}

</style>

<ul>  <li >妙味課堂</li>  <li>妙味茶館</li>  <li>js基礎課堂</li>  <li>更多<<</li> </ul>

<div style="display:block;">妙味課堂</div> <div>妙味茶館</div> <div>基礎課堂</div> <div>更多...</div>

執行個體二：

--實現全選--

<script type="text/javascript">
 window.onload=function(){
    var cBtn=document.getElementById("btn");
    var ipt=document.getElementsByTagName("input");
      var j=0;
      cBtn.onclick=function(){
    for(var j=0;j<ipt.length;j++){
     ipt[j].checked=true;
      };
       }
  };
</script>

此js未調試還有問題！！

<p id="btn" >全選</p>
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />

 

總結知識點：

事件提取

if判斷

for迴圈

全選功能

getElementsByTagName

this

給元素添加序號(index)

選項卡

其實這都是最最基礎和簡單的執行個體了，打好基礎，熟練運用，在以後的強化學習中才能有質的突破。

 

js基礎練習