[JS]视频总结-第一部分_了解JavaScript
第一部分_了解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 {width: 200px; height: 100px; background: #ccc; border: 1px solid #999; display: none;} #div2 {width:100px; height: 200px; background: #ccc; display: none;} #div2-1 {width: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 {width:200px; height:200px; background:black;} #div2 {width:200px; height:200px; background:red;} div {width: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 {width: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; width: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>
版权声明：本文为webapplee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。