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

随机推荐

如何彻底理解Java抽象类为什么要用抽象类什么情况下用抽象类
如何彻底理解Java抽象类为什么要用抽象类什么情况下用抽象类呐,到底什么是抽象类,有时明明一个普通类就可以解决了,为啥非得整个抽象类,装逼吗我曾带着这样的疑惑,查了很多资料,看了很多源码,写了 ...
为什么现在使用多周期CPU，而单周期CPU被弃用？
最初设计的CPU结构简单,内部不复杂.之所以制造它是为了让机器自动跑程序,算数. 早期CPU都是单周期的,人们没考虑那么多,性能啥的.就让CPU每个时钟周期跑一个指令,这些时钟周期等长.这样下来,有的 ...
python 协程与go协程的区别
进程.线程和协程进程的定义: 进程,是计算机中已运行程序的实体.程序本身只是指令.数据及其组织形式的描述,进程才是程序的真正运行实例. 线程的定义: 操作系统能够进行运算调度的最小单位.它被包含在进 ...
输入URL到页面渲染
输入网址回车或者刷新页面到页面传染出来的整个流程 DNS 解析 HTTP三次握手 -> TCP/IP连接浏览器发送请求服务器返回请求的文件 (html) 浏览器渲染 1. DNS 解析查找 ...
Java修炼——手写服务器项目
项目工程总览: 1.Dispatcher类(一个请求与响应就是一个Dispatcher) package com.bjsxt.server; import java.io.IOException; i ...
Python计算IV值
更多大数据分析.建模等内容请关注公众号<bigdatamodeling> 在对变量分箱后,需要计算变量的重要性,IV是评估变量区分度或重要性的统计量之一,python计算IV值的代码如下: ...
浅谈C++虚函数机制
0.前言在后端面试中语言特性的掌握直接决定面试成败,C++语言一直在增加很多新特性来提高使用者的便利性,但是每种特性都有复杂的背后实现,充分理解实现原理和设计原因,才能更好地掌握这种新特性. 只要出 ...
浅谈Redis面试热点之工程架构篇[1]
前言前面用两篇文章大致介绍了Redis热点面试中的底层实现相关的问题,感兴趣的可以回顾一下:[决战西二旗]|Redis面试热点之底层实现篇[决战西二旗]|Redis面试热点之底层实现篇(续) 接下来 ...
python之with语句结合上下文管理器
所谓上下文管理器即在一个类中重写了__enter__方法和__exit__方法的类就可以成为上下文管理器类. 我们可以通过with语句结合上下文管理器简化一些操作. 使用with语句结合自定义上下文管 ...
重新精读《Java 编程思想》系列之向上转型与向下转型
前言今天重读了一下向上转型与向下转型,有些新的体会,了解了向上转型的好处,及如何向下转型.在此分享给大家. 向上转型向上转型是用来表现新类和基类之间的关系.在传统中,由导出类转型成基类,在继承图中 ...