第一部分_了解JavaScript:包括5个视频，学时在3个小时
<!doctype html> <html> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title>01-02</title> <!-- <link id="l1" rel="stylesheet" type="text/css" href="css2.css" /> --> <style> #div1 { 200px; height: 100px; background: #ccc; border: 1px solid #999; display: none;} #div2 {100px; height: 200px; background: #ccc; display: none;} #div2-1 {200px; height: 200px; border: 2px solid black;} .box {background:red;} </style> <script> function mover(){ var ol = document.getElementById("div1"); ol.style.display='block'; } function mout(){ with (document.getElementById('div1')){ style.display='none'; } } function aclick(){ alert("hello, ray!"); } function skin1(){ var ol = document.getElementById('l1'); ol.href='02css2-1.css'; } function skin2(){ var ol = document.getElementById('l1'); ol.href='02css2.css'; } function tvalue(){ var tv = document.getElementById('t1'); tv.value='abcdef'; tv.title='sdfaf'; } function showHide(){ var di = document.getElementById('div2'); if(di.style.display=='block'){ di.style.display='none'; }else{ di.style.display='block'; } } function toRed(){ var di = document.getElementById('div2-1'); di.className='box'; } </script> </head> <body> <!-- 1. --> <input type="checkbox" onclick="aclick()" onmouseover="mover()" onmouseout="mout()" /> <div id="div1"> hello, ray... </div> <!-- 2. --> <input type="button" value="button1" onclick="skin1()"/> <input type="button" value="button2" onclick="skin2()"/> <div> <input type="text" id="t1" placeholder='ray lee'/> <input type="button" onclick="tvalue()" value="modifyword"/> </div> <input type="button" value="display invisible" onclick="showHide()"> <div id="div2"> </div> <div> </div> <input type="button" value="改变类别" onclick="toRed()"/> <div id="div2-1"> </div> </body> </html>
<html> <head> <meta charset="utf-8"> <title>03-04</title> <style> #div1 {200px; height:200px; background:black;} #div2 {200px; height:200px; background:red;} div {200px; height:200px; float:left; border:1px solid black; margin:10px;} </style><!-- CSS 样式 --> <script> window.onload=function(){ var o1=document.getElementById('b1'); o1.onclick=function (){ confirm('hello, ray!', 'yes'); }<!-- 匿名函数--> }<!-- 页面加载完后，执行该代码--> function toColor(color){ var di1=document.getElementById('div1'); di1.style.background=color; } function setStyle(name, value){ var di2=document.getElementById('div2'); di2.style[name]=value; } </script><!-- JS 行为 --> </head> <body> <!-- <input type='button' value='变红' onclick="toColor('red')"/> <input type='button' value='变绿' onclick="toColor('green')"/> <input type='button' value='变蓝' onclick="toColor('blue')"/> <div id='div1'> </div> <input type='button' value='变宽' onclick="setStyle('width', '400px')"/> <input type='button' value='变高' onclick="setStyle('height', '400px')"/> <input type='button' value='变蓝' onclick="setStyle('background', 'blue')"/> <div id='div2'> </div> <input id ='b1' type='button' value='button1' /> --> <!-- 通过getElementByTagName 获得ID们 --> <div></div> <div></div> <div></div> <div></div> <script> var di=document.getElementsByTagName('div'); for(var i=0;i<di.length;i++){ di[i].style.background='red'; } </script> </body><!-- HTML5 结构 --> <!doctype html> <html> <head> <meta charset="utf-8"> <title>05</title> <link rel="stylesheet" type="text/css" href="zns_style.css" /> <style> #div1 .active {background:yellow;} #div1 div {200px; height:200px; background:#ccc; border:2px solid #999; display:none;} #tab .active {background:white; color:red;} #tab .text {background:#fff; color:black; display:block; } #tab li {background:black; color:#fff; 40px; height:80px; margin:10px; float:left; font-size:9px;} </style> <script> window.onload=function(){ var d1=document.getElementById("div1"); var d1b=d1.getElementsByTagName("input"); var d1d=d1.getElementsByTagName("div"); for(var i=0;i<d1b.length;i++) { d1b[i].index=i; d1b[i].onclick=function() { for(var j=0;j<d1b.length;j++) { d1b[j].className=""; d1d[j].style.display="none"; } this.className="active"; d1d[this.index].style.display="block"; }; } var text2=document.getElementById("tx2"); var button2=document.getElementById("bt2"); var di2=document.getElementById("div2"); button2.onclick=function() { di2.innerHTML=text2.value; alert(di2.innerHTML); } var di3=document.getElementById("tab"); var li1=di3.getElementsByTagName("li"); var di4=di3.getElementsByTagName("div")[0]; for(var i=0;i<li1.length;i++) { li1[i].index=i; li1[i].onmouseover=function() { for(var j=0;j<li1.length;j++) { li1[j].className=""; } this.className="active"; di4.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p></p>"; }; } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"/> <input type="button" value="培训"/> <input type="button" value="出国"/> <input type="button" value="招生"/> <div style="display:block;">111</div> <div>222</div> <div>333</div> <div>444</div> </div> <input id="tx2" type="text" /> <input id="bt2" type="button" value="显示内容"/> <div id="div2"> </div> <div id="tab" class="calendar"> <ul> <li class="active"><h2>1</h2><p>Jan</p></li> <li><h2>2</h2><p>Feb</p></li> <li><h2>3</h2><p>Mar</p></li> <li><h2>4</h2><p>Apr</p></li> <li><h2>5</h2><p>May</p></li> <li><h2>6</h2><p>Jun</p></li> <li><h2>7</h2><p>Jul</p></li> <li><h2>8</h2><p>Aug</p></li> <li><h2>9</h2><p>Sep</p></li> <li><h2>10</h2><p>Oct</p></li> <li><h2>11</h2><p>Nov</p></li> <li><h2>12</h2><p>Dec</p></li> </ul> <div class="text"> <h2>2323</h2> <p>32423#$5345</p> </div> </div> </body> </html>