DOM简单学习、事件简单学习、电灯开关

DOM简单学习

功能：控制html文档的内容

　　 获取页面标签(元素)对象：Element

　　document.getElementById("id值"):通过元素的id获取元素对象

操作Element对象：

　　1. 修改属性值：

　　　　1. 明确获取的对象是哪一个？

　　　　2. 查看API文档，找其中有哪些属性可以设置

　　2. 修改标签体内容：

　　属性：innerHTML

　　　　1. 获取元素对象

　　　　2. 使用innerHTML属性修改标签体内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>



</head>
<body>

<!--图片-->
<img id="light" src="img/off.gif">

<!-- 字体标签-->
<!--<h1 id="title">悔创阿里杰克马</h1>-->

<script>

  //通过id获取元素对象
  var light = document.getElementById("light");

  //页面弹窗
  alert("我要换图片了。。。");

  //图片路径
  light.src = "img/on.gif";



  /* //1.获取h1标签对象
    var title = document.getElementById("title");

    //页面弹窗
    alert("我要换内容了。。。");


    //2.修改内容
    title.innerHTML = "不识妻美刘强东";*/

</script>
</body>
</html>

 

事件简单学习

功能： 某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx
　　我方水晶被摧毁后，我就责备对友。
　　敌方水晶被摧毁后，我就夸奖自己。

如何绑定事件
　　1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
　　　　1. 事件：onclick--- 单击事件

　　2. 通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<!--id为 light 的图片 -->
 <img id =" light" src = "img/off.gif" onclick = "fun();" >

<!--id为 light2 的图片-->
 <img id = "light2" src = "img/off.gif">

<script>
<!--    定义方法-->
    function fun() {
    
        //页面弹窗
        alert("我被点击");
        
        //页面弹窗
        alert("我又被点击");
    }

    //定义方法
    function fun2() {
    
        //页面弹窗
        alert("不要再点我了");
    }

    //获取light2对象
    var light2 = document.getElementById("light2");

    //绑定事件
    light2.onclick = fun2;
</script>
</body>
</html>

 

电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
    
</head>
<body>
<!--关灯的图片-->
<img id =" light" src = "img/off.gif">
    <script>
        /*
            分析：获取图片对象
                绑定单击事件
                 每次点击切换图片
                    规则：
                        如果灯是开的 on，切换图片为 off
                        如果灯是关的 off，切换图片为  on
                    使用标记flag来完成
         */

        //获取图片对象
        var light  = document.getElementById("light")

        //关灯
        var flag = false;

        //绑定单击事件
        light.onclick = function () {

            //如果过灯是亮的
            if (flag) {

               //则灭掉
               light.src = "img/off.gif"

                //关灯
                flag = false;

            //   如果灯是灭的
            }else {

                //打开
                light.src = "img/on.gif";

                //打开灯
                flag = true
            }
        }
    </script>
</body>
</html>

 

posted @ 2022-10-25 15:59  漁夫  阅读(30)  评论(0)    收藏  举报