JS---DOM---点击操作---part1---20个案例

点击操作:------>事件: 就是一件事, 有触发和响应, 事件源

按钮被点击,弹出对话框

按钮---->事件源
点击---->事件名字
被点了--->触发了
弹框了--->响应

案例1：点击按钮弹出对话框

以下全部是理解，html和js代码分离：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jane的自学转行</title>
</head>

<body>
  <!--第一个版本-->
  <!--html代码,点击按钮弹出对话框,对话框:alert()====>js的代码-->
  <!--html代码中嵌入了js的代码,不方便后期的修改和维护-->
  <input type="button" value="显示效果" onclick="alert('我被点了')" />
  <!--最终的效果:应该把js代码和html分离-->

  <!--第二个版本: js代码很多,但是没有分离html和js该怎么做-->
  <script>
    function f1() {
      //函数中可以写很多的代码
      alert("这是一个对话框");
    }
  </script>
  <input type="button" value="显示效果" onclick="f1()" />
  <!--开始分离html和js-->
  <input type="button" value="开始分离代码" id="btn" />
  <script>
    function f2() {
      alert("开发分离html和js代码");
    }
    //html标签中的id属性中存储的值是唯一的,
    //id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识
    //从文档中找到id值为btn的这个标签(元素)
    //document.getElementById("id属性的值");======>返回的是一个元素对象
    //根据id获取这个标签(元素)
    var btnObj = document.getElementById("btn");
    //为按钮注册点击事件
    btnObj.onclick = f2;//不加括号
  </script>


  <!--最终的版本代码:-->
  <input type="button" value="最终版" id="btn1" />
  <script>
    //  //根据id属性的值从整个文档中获取这个元素(标签)
    var btnObj1 = document.getElementById("btn1");
    //为该元素注册点击事件
    btnObj1.onclick = function () {
      alert("哦,这真是太好了");
    };


    //根据id属性的值从整个文档中获取这个元素(标签)
    //为该元素注册点击事件
    document.getElementById("btn1").onclick = function () {
      alert("哦,这真是太好了");
    };
  </script>
</body>

</html>

最终代码：

  <input type="button" value="按钮" id="btn" />
  <script>
    var btnObj = document.getElementById("btn");
    btnObj.onclick = function () {
      alert("哦，小苏好帅哦");
    };

    // document.getElementById("btn").onclick = function () {
    //   alert("哦，小苏好帅哦");
    // };
  </script>

案例2：点击按钮显示图片

点击按钮的时候，设置img标签的src属性有一个图片的路径

  <input type="button" value="显示图片" id="btn" />
  <img src="" alt="" id="im" />

  <script>
    var btnObj = document.getElementById("btn");
    //为按钮注册点击事件,添加事件处理函数
    btnObj.onclick = function () {
      //根据id获取图片的标签,设置图片的src属性值
      var imObj = document.getElementById("im");
      imObj.src = "images/liuyan.jpg";
      //设置图片的大小
      imObj.width = "300";
      imObj.height = "400";
    };

案例3：点击按钮,修改p标签的显示内容

凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式

  <input type="button" value="设置p的内容" id="btn" />
  <p id="p1">我是一个p标签</p>

  <script>
    // 根据id获取按钮, 为按钮注册点击事件, 添加事件处理函数
    document.getElementById("btn").onclick = function () {
      //根据id获取p标签,设置内容
      document.getElementById("p1").innerText = "这是一个p";
    };

案例4：点击按钮修改a标签的地址和热点文字

1. a标签在新页面打开

2. 优化后：

  <input type="button" value="显示效果" id="btn" />
  <a href="https://www.jiumodiary.com/" id="ak" target="_blank">鸠摩搜书</a>

  <script>
    //根据id获取按钮,注册点击事件,添加事件处理函数
    //  document.getElementById("btn").onclick = function () {
    //    //根据id获取超链接,设置href属性
    //    document.getElementById("ak").href = "http://www.itcast.cn";
    //    //根据id获取超链接,设置文字内容
    //    document.getElementById("ak").innerText = "传智播客";
    //  };

    //优化后的:
    document.getElementById("btn").onclick = function () {
      var aObj = document.getElementById("ak");
      aObj.href = "http://www.itcast.cn";
      aObj.innerText = "传播智客";
    };
  </script>

案例5：点击按钮设置多个p标签的文字内容

document.getElementsByTagName("标签的名字");返回的是一个伪数组,
无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组

  <input type="button" value="请点击以查看效果" id="btn" />
  <div id="dv1">
    <p>我是一朵小红花开在春风里</p>
    <p>我是一朵小红花开在春风里</p>
    <p>我是一朵小红花开在春风里</p>
    <p>我是一朵小红花开在春风里</p>
    <p>我是一朵小红花开在春风里</p>
  </div>
  <div>
    <p>我是一颗小草，开在雪天里</p>
    <p>我是一颗小草，开在雪天里</p>
    <p>我是一颗小草，开在雪天里</p>
    <p>我是一颗小草，开在雪天里</p>
  </div>
  <script>
    document.getElementById("btn").onclick = function () {
      //获取div里面的p
      var pObjs = document.getElementById("dv1").getElementsByTagName("p");
      //遍历数组设置文字
      for (var i = 0; i < pObjs.length; i++) {
        pObjs[i].innerText = "我们都是p";
      }
    };
  </script>

实现效果：

案例6：点击按钮修改图片的alt和title属性

  <input type="button" value="显示效果" id="btn" />
  <img src="images/cangjingkong.jpg" alt="和新浪吉祥物合影" title="参加新浪活动" />
  <script>
    document.getElementById("btn").onclick = function () {
      var imgObjs = document.getElementsByTagName("img");
      //ElementByTagName返回的是伪数组
      imgObjs[0].alt = "改了";
      imgObjs[0].title = "新浪"
    };
  </script>

案例7：点击按钮修改所有文本框的值

  <input type="button" value="请点击修改文本框的值" id="btn"> <br />
  <input type="text" value="" /> <br />
  <input type="text" value="" /> <br />
  <input type="text" value="" /> <br />
  <input type="text" value="" /> <br />
  <input type="text" value="" /> <br />

  <script>
    //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
    document.getElementById("btn").onclick = function () {
      //获取所有的文本框
      var inputs = document.getElementsByTagName("input");
      //判断这个元素是不是按钮
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type != "button") {
          inputs[i].value = "两只黄鹂鸣翠柳"
        }
      }
    };
  </script>

案例8：点击每个图片弹出对话框

  <img src="images/1.jpg" alt="" />
  <img src="images/2.jpg" alt="" />
  <img src="images/3.jpg" alt="" />
  <script>
    var imgObjs = document.getElementsByTagName("img");
    for (var i = 0; i < imgObjs.length; i++) {
      imgObjs[i].onclick = function () {
        alert("被点击了");
      };
    }

案例9：点击按钮修改按钮的value属性

  <input type="button" value="按钮" id="btn" />
  <script>
    //在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
    var btnObj = document.getElementById("btn");
    btnObj.onclick = function () {
      //修改按钮的value属性
      this.value = "我是按钮";
      this.type = "text";
      this.id = "btn2"; //id也可以修改
    };
  </script>

案例10：点击图片修改自身的宽和高

  <img src="images/liuyan.jpg" alt="" id="im" />
  <script>
    var imgObj = document.getElementById("im");
    imgObj.onclick = function () {
      this.width = "200";
      this.height = "300";
    };
  </script>

案例11：排他功能

1. 所有按钮value值设为默认值

2. 当前被点击的按钮另设置

  <input type="button" value="没怀孕" />
  <input type="button" value="没怀孕" />
  <input type="button" value="没怀孕" />
  <input type="button" value="没怀孕" />
  <input type="button" value="没怀孕" />
  <script>
    //获取所有的按钮,分别注册点击事件
    var btnObjs = document.getElementsByTagName("input");
    //循环遍历所有的按钮
    for (var i = 0; i < btnObjs.length; i++) {
      btnObjs[i].onclick = function () {
        //再用循环，把所有的按钮的value值设置为默认的值
        for (var j = 0; j < btnObjs.length; j++) {
          btnObjs[j].value = "没怀孕";
        }
        //当前被点击的按钮设置
        this.value = "怀孕了"; //这里不能用btnObjs[i]，注意
      };
    }
  </script>

案例12：点击图片标签,设置图片标签的src路径为超链接中大图的路径

  <a href="images/1.jpg" id="ak">
    <img src="images/1-small.jpg" alt="小图" id="im">
  </a>
  <script>
    document.getElementById("im").onclick = function () {
      this.src = document.getElementById("ak").href;
    };
  </script>

案例13：点击按钮修改图片

根据id获取对象--->封装成一个函数

  <input type="button" value="点击显示大图" id="btn" />
  <img src="images/1-small.jpg" alt="" id="im">
  <script>
    function my$(id) {
      return document.getElementById(id);
    }

    my$("btn").onclick = function () {
      my$("im").src = "images/1.jpg";
    };
  </script>

案例14：点击按钮修改性别和兴趣

1. 规律:在表单标签中, 如果属性和值只有一个, 并且值是这个属性本身, 那么,

在写js代码,DOM操作的时候,这个属性值, 是布尔类型就可以了

2. CSS实现就是radio里面的checked="checked"

  <input type="button" value="修改性别" id="btn1">
  <input type="radio" value="1" name="sex" />男
  <input type="radio" value="2" name="sex" id="rad1" />女
  <input type="radio" value="3" name="sex" />保密
  <script>

    function my$(id) {
      return document.getElementById(id);
    }
    my$("btn1").onclick = function () {
      my$("rad1").checked = true;
    };
  </script>
  <br />
  
  <input type="button" value="选择兴趣" id="btn2" />
  <input type="checkbox" value="1" name="xingqu" id="ck1" />吃饭
  <input type="checkbox" value="1" name="xingqu" />睡觉
  <input type="checkbox" value="1" name="xingqu" />打豆豆
  <input type="checkbox" value="1" name="xingqu" id="ck2" />玩手机
  <script>
    my$("btn2").onclick = function () {
      my$("ck1").checked = true;
      my$("ck2").checked = true;
    };
  </script>

案例15：点击按钮选择菜单

  <input type="button" value="点菜" id="btn" />
  <select name="" id="ss">
    <option value="1">毛肚</option>
    <option value="2">鸭血</option>
    <option value="3" id="op1">鸭肠</option>
    <option value="4">海带</option>
    <option value="5">金针菇</option>
  </select>

  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      my$("op1").selected = true;
    };
  </script>

附加：点击按钮修改文字框中的字

  <script src="common.js"></script>
  <textarea name="" id="tt" cols="30" rows="10" readonly>
      某人问智者,
      大师:您觉得怎么做才是最快乐的?
      回答说:不要和愚者辩论
      这个人说:我不这么认为!
      大师说:您说的对,
      我就是这么帅
  </textarea>
  <input type="button" value="注册" id="btn2" />
  <script>
    my$("btn2").onclick = function () {
      my$("tt").value = "嘎嘎"; //推荐用value，看成表单标签
      //my$("tt").innerText="哈哈";
    };

案例16：点击按钮设置div的宽，高和背景颜色

css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可

  <!--一个按钮 -->
  <input type="button" value="设置样式" id="btn" />
  <!-- 画个盒子？ -->
  <div id="dv"></div>
  <!-- 引入common.js 里面存储常用的js函数 -->
  <script src="common.js"></script>
  <!-- 另起一个script在里面写 -->
  <script>
    my$("btn").onclick = function () {
      my$("dv").style.width = "300px";
      my$("dv").style.height = "200px";
      my$("dv").style.backgroundColor = "hotpink"; //css中这个属性是多个单词的写法, 在js代码中DOM操作的时候.把-干掉, 后面的单词的首字母大写即可
    };
  </script>

案例17：点击按钮显示和隐藏div

  <!-- 画个按钮 -->
  <input type="button" value="隐藏" id="btn" />
  <!-- 画个盒子 -->
  <div id="dv"></div>
  <!-- 引入common.js存储常用的js函数 -->
  <script src="common.js"></script>
  <!-- 开始写行为 -->
  <script>
    my$("btn").onclick = function () {
      // 点隐藏后div隐藏 按钮文字变为显示
      if (this.value == "隐藏") {
        my$("dv").style.display = "none";
        this.value = "显示";
      } else if (this.value == "显示") {
        // 否则，点显示后，div显示，按钮文字变为隐藏
        my$("dv").style.display = "block";
        this.value = "隐藏";
      }
    };
  </script>

案例18：点击按钮设置div的样式

1. 在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className

<head>
  <meta charset="UTF-8">
  <title>jane自学转行</title>
  <!-- <style>
    .cls {
      width: 300px;
      height: 200px;
      background-color: yellow;
      border: 2px solid red;
    }
  </style> -->
  <style>
    .cls {
      width: 300px;
      height: 200px;
      background-color: pink;
      border: 5px solid hotpink;
      ;
    }
  </style>
</head>

<body>
  <input type="button" value="设置样式" id="btn" />
  <div id="dv"></div>

  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      //在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
      my$("dv").className = "cls";
    };
  </script>

案例19：点击按钮,通过类样式的方式设置div的显示和隐藏

<head>
  <meta charset="UTF-8">
  <title>jane自学转行</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: pink;
      border: 5px solid hotpink;
    }

    .cls {
      display: none;
    }
  </style>
</head>

<body>
  <input type="button" value="隐藏" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      // console.log(my$("dv").className);
      if (my$("dv").className != "cls") {
        //现在是显示的,应该隐藏
        my$("dv").className = "cls";
        this.value = "显示";
      } else {
        //隐藏的状态----立刻显示
        my$("dv").className = "";
        this.value = "隐藏";
      }
    };
  </script>

案例20：网页开关灯

<head>
  <meta charset="UTF-8">
  <title>jane自学转行</title>
  <!-- <style>
    .cls {
      background-color: black;
    }
  </style> -->
  <style>
    .cls {
      background-color: black;
    }
  </style>

</head>

<body id="bd">
  <input type="button" value="开/关灯" id="btn" />
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      document.body.className = document.body.className != "cls" ? "cls" : "";
    };
  </script>

posted @ 2019-12-04 11:23 jane_panyiyun 阅读(1474) 评论(0) 编辑收藏举报

刷新页面返回顶部

jane_panyiyun

每临大事有静气，不信今时无古贤