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语句等 ...

随机推荐

学习索引结构的一些案例——Jeff Dean在SystemML会议上发布的论文(下)
[摘要] 除了范围索引之外,点查找的Hash Map在DBMS中起着类似或更重要的作用. 从概念上讲,Hash Map使用Hash函数来确定性地将键映射到数组内的随机位置(参见图[9 ],只有4位开销 ...
RDS关系型数据库入门 01 创建关系型数据库实例【华为云分享】
[摘要] 关系型数据库(Relational Database Service,简称RDS)是一种基于云计算平台的即开即用.稳定可靠.弹性伸缩.便捷管理的在线关系型数据库服务.RDS具有完善的性能监控 ...
python上下文管理器细读
test 1 上下文管理器,将生成器转化为上下文管理器 import contextlib @contextlib.contextmanager def a(): print(1) yield pri ...
Web安全-之文件上传漏洞场景
1 上传漏洞危害介绍上传是Web中最常见的功能,如果上传功能存在设计.编码缺陷,就容易形成上传漏洞,从而成为致命的安全问题,攻击者可以通过上传脚本木马,实现查看/篡改/删除源码和任意涂鸦网页,可 ...
linux下docker安装部署项目（全）
一 .系统安装基于CentOS-7-x86_64-Minimal-1708.iso安装系统 1.2. 配置系统 1.2.1 在线更新内核版本(建议更新,旧版内核会有docker BUG) 1.2 ...
luogu P2343 宝石管理系统 |分块+堆
题目描述 GY君购买了一批宝石放进了仓库.有一天GY君心血来潮,想要清点他的宝石,于是把m个宝石都取出来放进了宝石管理系统.每个宝石i都有一个珍贵值vi,他希望你能编写程序查找到从大到小第n珍贵的宝石 ...
SX1276/SX1278和SXSX1262的详细参数对比
SX1276/SX1278和SX1262的对比 SX1262是Semtech公司新推出的一款sub-GHz无线收发器.SX1262芯片最大的买点是它的低功耗和超远距离的传输.SX1262接收电流 ...
Java修炼——内部类详解
内部类详解定义:将一个类定义在另一个类的内部,该类就称为内部类类中定义的内部类特点: 内部类作为外部类的成员,可以直接访问外部类的成员 (包括 private 成员),反之则不行. 内部类做为外部 ...
【Python必学】Python爬虫反爬策略你肯定不会吧？
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 正文 Python爬虫反爬策略三部曲,拥有这三步曲就可以在爬虫界立足了: ...
ARTS-S linux查看进程打开的文件数
当怀疑进程打开文件没有关闭时,可以反复执行以下命令,查看进程打开的文件数是否会不断增加. ls -l /proc/18707/fd | wc -l 其中18707是进程id