当前位置： 云海天教程网 > 技术新闻 > 前端开发 > 正文

Web API-

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-04

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

按钮被点击,弹出对话框

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

 

案例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标签的文字内容

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

 

  <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：