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="data: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="data:images/1.jpg" alt="" />

  <img src="data:images/2.jpg" alt="" />

  <img src="data: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="data: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="data: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="data: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>

JS---DOM---点击操作---part1---20个案例的更多相关文章

JS---DOM---点击操作---节点的方式---案例
点击操作---节点的方式---案例案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...
JS DOM元素的操作（创建，添加，删除，和修改属性）
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
JS DOM之表格操作
一个能给添加行的表格 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
JS DOM操作（一）对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
基础DOM和CSS操作(二)
元素样式操作元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

随机推荐

Flask 蓝图机制及应用
我们都知道 flask 是一个轻量级的 web 框架,相对于其他同类型框架更为灵活.轻便.安全且容易上手.开发者可以随意编写自己想要的项目结构,同时还有很多的第三方库供君选择.但是灵活的同时也带来了相 ...
关于Python中的错误与异常，你是否了解的够仔细？
每次版本结束都描述这着同样的错误,相似的问题,但始终没见解决.所以今天,我就来总结下Python的错误与异常! 异常与错误错误语法错误可以通过IDE或者解释器给出提示的错误 opentxt('a ...
Spring AOP简介与底层实现机制——动态代理
AOP简介 AOP (Aspect Oriented Programing) 称为:面向切面编程,它是一种编程思想.AOP 是 OOP(面向对象编程 Object Oriented Programmi ...
Object.defineProperty和Object.freeze、Object.seal
目录一 Object.defineProperty 1.1 用法 1.2 数据描述 1.2.1 value 1.2.2 writable 1.2.3 enumerable 1.2.4 configu ...
第4节：Java基础 - 必知必会（中）
第4节:Java基础 - 必知必会(中) 本小节是Java基础篇章的第二小节,主要讲述抽象类与接口的区别,注解以及反射等知识点. 一.抽象类和接口有什么区别抽象类和接口的主要区别可以总结如下: 抽象 ...
基于USB3.0的双目相机测试小结之CC1605配合CS5642 双目 500w摄像头
基于USB3.0的双目相机测试小结之CC1605配合CS5642 双目 500w摄像头 CC1605双目相机评估板可以配合使用柴草电子绝大多数摄像头应用如:OV5640.OV5642.MT9P03 ...
基于iCamera测试mt9m034 1280X960 高动态相机模块小结
基于iCamera测试mt9m034 高动态相机模块小结首先看看此模块的特性 mt9m034 高动态 CMOS模块 1280*960像素 5.48 V/lux-sec >115db 摄像头模块 ...
基于RT-Thread的开源飞控StarryPilot
背景描述近年来无人机应用市场日趋火热,无人机开始被应用在多个领域之中,比如航拍,植保,运输,安防等.随着应用场景的增加,对于无人机的大脑一飞控,的性能和功能要求也变得越来越高.国内具有一大批优质的无 ...
利用PyCharm操作Github：仓库新建、更新，代码回滚
Github是目前世界上最流行的代码存储和分享平台,而PyCharm是Python圈中最流行的IDE,它很好地支持了Git操作.本文将会介绍如何利用PyCharm来连接Github,同时演示Git ...
Python3、setuptools、Pip3安装详解
Python3.setuptools.Pip3安装详解 2017年08月19日 18:58:47 安静的技术控阅读数:26002 版权声明:本文为博主原创文章,未经博主允许不得转载. http ...