JavaWeb10.1【JS：DOM入门、事件绑定入门、案例1电灯开关】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 //通过id获取元素对象 9 // var light = document.getElementById("light"); 10 // alert(light); //null js在此处获取不到下面还未执行的内容，所以要将js定义在所需内容的下面，推荐放在body最下方 11 </script> 12 </head> 13 <body> 14 <img id="light" src="../img/off.gif"> 15 <h1 id="title">悔创阿里杰克马</h1> 16 17 <script> 18 //通过id获取元素对象 19 var light = document.getElementById("light"); 20 // alert(light); 21 alert("我要换图片了。。。"); 22 light.src = "../img/on.gif"; 23 24 //1.获取h1标签对象 25 var title = document.getElementById("title"); 26 alert("我要换内容了。。。"); 27 //2.修改内容 28 title.innerHTML = "不识妻美刘强东"; 29 </script> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 function fun() { 9 alert("我被点了"); 10 } 11 </script> 12 </head> 13 <body> 14 <!--<img id="light" src="../img/off.gif" onclick="alert('我被点了')">--> 15 <img id="light" src="../img/off.gif" onclick="fun()"> <!--方式1--> 16 <img id="light2" src="../img/off.gif" > 17 18 <script> 19 function fun2() { 20 alert("咋老点我"); 21 } 22 /*方式2*/ 23 //1 获取light2对象 24 var light2 = document.getElementById("light2"); 25 //2 绑定事件 26 light2.onclick = fun2; 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <img src="../img/off.gif" id="light"> 9 10 /* 11 分析： 12 1.获取图片对象 13 2.绑定单击事件 14 3.每次点击切换图片 15 * 规则： 16 * 如果灯是开的 on,切换图片为 off 17 * 如果灯是关的 off,切换图片为 on 18 * 使用标记flag来完成 19 20 */ 21 22 <script> 23 var light = document.getElementById("light"); 24 var flag = false; //代表灯灭状态off 25 light.onclick = function(){ //匿名方法 26 if (flag){ 27 light.src = "../img/on.gif"; 28 flag = false; 29 } else { 30 light.src = "../img/off.gif"; 31 flag = true; 32 } 33 } 34 </script> 35 </body> 36 </html>
