JS Basic Exercise

Recently in the learning front, of course, including js,css,html what, in the lectures, some of the small exercises, recorded:

Example one:

--tab Tabs--

<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 is the first" + This.index + "buttons");
adiv[this.index].style.display= ' block ';
};
}
};
</script>

The corresponding CSS, as well as the 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 > Miao tang </li> <li> Miao Cha Museum </li> <li>js Foundation Lesson </li> <li> More << </li> </ul>

<div style= "Display:block;" > Miao tang </div> <div> Miao Cha Museum </div> <div> Foundation Class </div> <div> more ...</div>

Example two:

--To achieve a full selection--

<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>

This JS does not debug still have the problem!!

<p id= "BTN" > Full selection </p>
<input type= "checkbox"/><br/>
<input type= "checkbox"/><br/>
<input type= "checkbox"/><br/>
<input type= "checkbox"/><br/>

Summarize the points of knowledge:

Event extraction

If judgment

For loop

Select All function

getElementsByTagName

This

Add an ordinal to an element (index)

Options tab

In fact, this is the most basic and simple example, playing a good foundation, skilled use, in the future to strengthen the study in order to have a qualitative breakthrough.

JS Basic Exercise