案例1：点击按钮禁用文本框

  1.   <input type="button" value="禁用文本框" id="btn" />
  2.   <input type="text" value="文本框" id="txt" />
  3.  
  4.   <script>
  5.     document.getElementById("btn").onclick = function () {
  6.       document.getElementById("txt").disabled = true;
  7.     };
  8.   </script>

案例2：点击按钮修改列表的背景颜色

  1.   <input type="button" value="变色" id="btn" />
  2.   <ul id="uu">
  3.     <li>王陆</li>
  4.     <li>海云帆</li>
  5.     <li>闻宝</li>
  6.     <li>琉璃仙</li>
  7.     <li>王舞</li>
  8.   </ul>
  9.   <script>
  10.     document.getElementById("btn").onclick = function () {
  11.       document.getElementById("uu").style.backgroundColor = "pink";
  12.     };
  13.   </script>

案例3：点击超链接弹出对话框，但阻止超链接的默认的跳转

先执行弹框，用return false停止事件

  1.   <!--第一种写法:-->
  2.   <a href="http://www.baidu.com" onclick="alert('哎呀我被点了'); return false">百度1</a>
  3.  
  4.   <!--第二种写法-->
  5.   <script>
  6.     function f1() {
  7.       alert("好漂亮呀");
  8.       return false;
  9.     }
  10.   </script>
  11.   <a href="http://www.baidu.com" onclick="return f1()">百度2</a>
  12.  
  13.   <!--第三种写法:-->
  14.   <a href="http://www.baidu.com" id="ak">百度3</a>
  15.   <script>
  16.     document.getElementById("ak").onclick = function () {
  17.       alert("嘎嘎");
  18.       return false;
  19.     };
  20.   </script>

案例4：点击小图，下面显示大图

  1.   <a href="images/1.jpg" id="ak">
  2.     <img src="data:images/1-small.jpg" alt="">
  3.   </a>
  4.   <img src="" alt="" id="big">
  5.   <script src="common.js"></script>
  6.   <script>
  7.     //点击超链接
  8.     my$("ak").onclick = function () {
  9.       //big图片的src变成当前对象的地址href
  10.       my$("big").src = this.href;
  11.       return false; //阻止默认超链接挑转
  12.     };
  13.   </script>

案例5：美女相册

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style type="text/css">
  8.     body {
  9.       font-family: "Helvetica", "Arial", serif;
  10.       color: #333;
  11.       background-color: #ccc;
  12.       margin: 1em 10%;
  13.     }
  14.  
  15.     h1 {
  16.       color: #333;
  17.       background-color: transparent;
  18.     }
  19.  
  20.     a {
  21.       color: #c60;
  22.       background-color: transparent;
  23.       font-weight: bold;
  24.       text-decoration: none;
  25.     }
  26.  
  27.     ul {
  28.       padding: 0;
  29.     }
  30.  
  31.     li {
  32.       float: left;
  33.       padding: 1em;
  34.       list-style: none;
  35.     }
  36.  
  37.     #imagegallery {
  38.  
  39.       list-style: none;
  40.     }
  41.  
  42.     #imagegallery li {
  43.       margin: 0px 20px 20px 0px;
  44.       padding: 0px;
  45.       display: inline;
  46.     }
  47.  
  48.     #imagegallery li a img {
  49.       border: 0;
  50.     }
  51.   </style>
  52. </head>
  53.  
  54. <body>
  55.  
  56.   <h2>
  57.     美女画廊
  58.   </h2>
  59.  
  60.   <ul id="imagegallery">
  61.     <li><a href="images/1.jpg" title="美女A">
  62.         <img src="data:images/1-small.jpg" width="100" alt="美女1" />
  63.       </a></li>
  64.     <li><a href="images/2.jpg" title="美女B">
  65.         <img src="data:images/2-small.jpg" width="100" alt="美女2" />
  66.       </a></li>
  67.     <li><a href="images/3.jpg" title="美女C">
  68.         <img src="data:images/3-small.jpg" width="100" alt="美女3" />
  69.       </a></li>
  70.     <li><a href="images/4.jpg" title="美女D">
  71.         <img src="data:images/4-small.jpg" width="100" alt="美女4" />
  72.       </a></li>
  73.   </ul>
  74.   <div style="clear:both"></div>
  75.  
  76.   <!--显示大图的-->
  77.   <img id="image" src="data:images/placeholder.png" alt="" width="450" />
  78.   <p id="des">选择一个图片</p>
  79.  
  80.   <script src="common.js"></script>
  81.   <script>
  82.     //从ul中标签获取获取所有的a标签
  83.     var aObjs = my$("imagegallery").getElementsByTagName("a");
  84.     //循环遍历所有的a标签
  85.     for (var i = 0; i < aObjs.length; i++) {
  86.       //为每个a标签注册点击事件
  87.       aObjs[i].onclick = function () {
  88.         //为id为image的标签的src赋值
  89.         my$("image").src = this.href;
  90.         //为p标签赋值
  91.         my$("des").innerText = this.title;
  92.         //阻止超链接默认的跳转
  93.         return false;
  94.       };
  95.     }
  96.   </script>
  97. </body>
  98. </html>

实现效果：

案例6：列表隔行变色

练习的时候，因为background拼写错误，找bug找了很久....在加入console.log("哈哈")测试后，大致定位到改背景颜色部分出错。

  1. <!-- 奇黄偶绿 -->
  2.   <input type="button" value="隔行变色" id="btn" />
  3.   <ul id="brandlist">
  4.     <li>雅诗兰黛</li>
  5.     <li>兰蔻</li>
  6.     <li>契尔氏</li>
  7.     <li>海蓝之谜</li>
  8.     <li>欧舒丹</li>
  9.     <li>雅顿</li>
  10.   </ul>
  11.  
  12.   <script src="common.js"></script>
  13.   <script>
  14.     // my$("btn").onclick = function () {
  15.     //   //获取所有li标签
  16.     //   var list = my$("brandlist").getElementsByTagName("li");
  17.     //   for (var i = 0; i < list.length; i++) {
  18.     //     if (i % 2 == 0) {
  19.     //       list[i].style.backgroundColor = "yellow";
  20.     //     } else {
  21.     //       list[i].style.backgroundColor = "green";
  22.     //     }
  23.     //   }
  24.     // };
  25.  
  26.     //优化后
  27.     my$("btn").onclick = function () {
  28.       var list = my$("brandlist").getElementsByTagName("li");
  29.       for (var i = 0; i < list.length; i++) {
  30.         list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green";
  31.       }
  32.     };
  33.   </script>

案例7：鼠标划过，显示和隐藏二维码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     .nodeSmall {
  9.       width: 50px;
  10.       height: 50px;
  11.       background: url(images/bgs.png) no-repeat -159px -51px;
  12.       position: fixed;
  13.       right: 10px;
  14.       top: 40%;
  15.     }
  16.  
  17.     .erweima {
  18.       position: absolute;
  19.       top: 0;
  20.       left: -150px;
  21.     }
  22.  
  23.     .nodeSmall a {
  24.       display: block;
  25.       width: 50px;
  26.       height: 50px;
  27.     }
  28.  
  29.     .hide {
  30.       display: none;
  31.     }
  32.  
  33.     .show {
  34.       display: block;
  35.     }
  36.   </style>
  37.  
  38. </head>
  39.  
  40. <body>
  41.   <div class="nodeSmall" id="node_small">
  42.     <a href="#"></a>
  43.     <!--锚定-->
  44.     <div class="erweima hide" id="er">
  45.       <img src="data:images/456.png" alt="" />
  46.     </div>
  47.   </div>
  48.  
  49.   <script src="common.js"></script>
  50.   <script>
  51.     ////获取鼠标要进入的a标签
  52.     var aObj = my$("node_small").getElementsByTagName("a")[0];
  53.     //为a注册鼠标进入
  54.     aObj.onmouseover = function () {
  55.       my$("er").className = "erweima show";
  56.     };
  57.     //为a注册鼠标离开
  58.     aObj.onmouseout = function () {
  59.       my$("er").className = "erweima hide";
  60.     };
  61.   </script>
  62. </body>
  63. </html>

案例8：根据Name属性值获取元素

  1.   <input type="button" value="显示效果" id="btn" /> <br />
  2.   <input type="text" value="你好" name="name1" /> <br />
  3.   <input type="text" value="你好" name="name3" /> <br />
  4.   <input type="text" value="你好" name="name2" /> <br />
  5.   <input type="text" value="你好" name="name1" /> <br />
  6.   <input type="text" value="你好" name="name1" /> <br />
  7.  
  8.   <script src="common.js"></script>
  9.   <script>
  10.     my$("btn").onclick = function () {
  11.       var inputs = document.getElementsByName("name1");
  12.       for (var i = 0; i < inputs.length; i++) {
  13.         inputs[i].value = "我很好";
  14.       }
  15.     };
  16.   </script>

实现效果：

案例9：点击按钮设置应用cls类样式的标签的背景颜色为hotpink

getElementsByClassName();------>h5的, IE8及以下不支持
  1.   <p>第一个p标签</p>
  2.   <p class="cls">第二个p标签</p>
  3.   <span>第一个行内元素span</span> <br />
  4.   <span class="cls">第二个行内元素span</span> <br />
  5.   <div>第一个盒子</div> <br />
  6.   <div class="cls">第二个盒子</div> <br />
  7.   <input type="button" value="显示效果" id="btn" /> <br />
  8.   <script src="common.js"></script>
  9.   <script>
  10.  
  11.     my$("btn").onclick = function () {
  12.       //根据类样式的名字来获取元素
  13.       var objs = document.getElementsByClassName("cls");
  14.       for (var i = 0; i < objs.length; i++) {
  15.         //设置每个元素的背景颜色
  16.         objs[i].style.backgroundColor = "hotpink";
  17.       }
  18.     };

案例10：点击按钮弹出对话框--->根据选择器的方式获取元素

  1. <input type="button" value="显示效果" id="btn"/>
  2. <p>这是一个p</p>
  3. <p class="cls">这是一个p</p>
  4. <span>这是一个span</span>
  5. <span class="cls">这是一个span</span>
  6. <script src="common.js"></script>
  7. <script>
  8.  
  9.   //点击按钮弹出对话框
  10.   //根据选择器的方式获取元素
  11. // var btnObj= document.querySelector("#btn");
  12. //  btnObj.onclick=function () {
  13. //      alert("哈哈,我又变帅了");
  14. //  };
  15.  
  16.   var objs=document.querySelectorAll(".cls");
  17.   for(var i=0;i<objs.length;i++){
  18.     objs[i].style.backgroundColor="green";
  19.   }
  20. </script>

案例11：div边框高亮显示

  1. <head>
  2.   <meta charset="UTF-8">
  3.   <title>jane自学转行</title>
  4.   <style>
  5.     * {
  6.       margin: 0;
  7.       padding: 0;
  8.     }
  9.  
  10.     div {
  11.       width: 200px;
  12.       height: 150px;
  13.       background-color: pink;
  14.       float: left;
  15.       margin-top: 5px;
  16.       margin-left: 10px;
  17.       /* 加同色边框解决抖动问题 */
  18.       border: 2px solid pink;
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23.   <div></div>
  24.   <div></div>
  25.   <div></div>
  26.   <div></div>
  27.   <script src="common.js"></script>
  28.   <script>
  29.     //获取所有div
  30.     var dvObjs = document.getElementsByTagName("div");
  31.     //遍历div
  32.     for (var i = 0; i < dvObjs.length; i++) {
  33.       //为每个div添加鼠标进入的事件
  34.       dvObjs[i].onmouseover = function () {
  35.         this.style.border = "2px solid hotpink";
  36.       };
  37.       //为每个div添加鼠标进入的事件
  38.       dvObjs[i].onmouseout = function () {
  39.         this.style.border = "";
  40.       };
  41.     }
  42.     </script>
  43.   </body>

案例12：模拟搜索框，获得焦点和失去焦点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     input {
  9.       color: gray;
  10.     }
  11.   </style>
  12. </head>
  13.  
  14. <body>
  15.   <input type="text" value="请输入搜索内容" id="txt">
  16.   <script src="common.js"></script>
  17.   <script>
  18.  
  19.     //获取文本框
  20.     //注册获取焦点的事件
  21.     my$("txt").onfocus = function () {
  22.       //判断文本框的内容是不是默认的内容
  23.       if (this.value == "请输入搜索内容") {
  24.         //是默认内容就清空默认，字体颜色变为黑色
  25.         this.value = "";
  26.         this.style.color = "black";
  27.       }
  28.     };
  29.     //注册获取焦点的事件
  30.     my$("txt").onblur = function () {
  31.       //判断文本框是否空，空的话就重新设置默认文字和颜色
  32.       if (this.value == "") {
  33.         this.value = "请输入搜索内容";
  34.         this.style.color = "gray";
  35.       }
  36.     };
  37.   </script>
  38. </body>
  39. </html>

案例13：验证文本密码框长度

  1.   <input type="password" id="txt">
  2.   <script src="common.js"></script>
  3.   <script>
  4.     my$("txt").onblur = function () {
  5.       if (this.value.length >= 6 && this.value.length <= 10) {
  6.         this.style.backgroundColor = "green";
  7.       } else {
  8.         this.style.backgroundColor = "red";
  9.       }
  10.     };
  11.  
  12.   </script>

案例14：设置和获取文本框的值

  1.   <input type="text" value="文本框" id="txt" />
  2.  
  3.   <script src="common.js"></script>
  4.   <script>
  5.     //设置和获取文本框的值
  6.     my$("txt").onblur = function () {
  7.       this.value = "锄禾日当午";
  8.       console.log(this.value);
  9.     };
  10.   </script>

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

  1. JS---DOM---点击操作---节点的方式---案例

    点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...

  2. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  3. JS DOM之表格操作

    一个能给添加行的表格 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  4. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  5. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  6. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  7. 前端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 ...

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

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  9. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  10. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

随机推荐

  1. 【开发者portal在线开发插件系列一】profile和基本上下行消息

    前言: 开发者portal支持在线开发profile(即设备建模).在线开发插件.模拟应用管理设备.模拟设备上报数据接收命令.支持离线开发的profile和插件的上传部署,是合作伙伴快速集成设备.对接 ...

  2. （h，v） represent （horizontal，vertical）

    函数名h,v  代表 行和列 (horizontal,vertical) numpy 中 hstack 表示横向拼接两个行数相同的数组 In [42]: np.hstack((arr3,arr4)) ...

  3. go实践之swagger自动生成api文档

    文章目录 go实践之swagger自动生成api文档 1.安装需要用到的包 2.接口代码支持swagger 3. 生成swagger接口 go实践之swagger自动生成api文档 作为一个后端开发, ...

  4. 使用dva改造旧项目的数据流方案

     前言 最近在给自己的脚手架项目转到TypeScript时,遇到了一些麻烦. 项目之前采用的是react + react-redux + redux-thunk + redux-actions +re ...

  5. OA思维导图（第一次画）

  6. WebGPU学习（五）: 现代图形API技术要点和WebGPU支持情况调研

    大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...

  7. 跨站脚本（XSS）备忘单-2019版

    这是一份跨站脚本(XSS)备忘录,收集了大量的XSS攻击向量,包含了各种事件处理.通讯协议.特殊属性.限制字符.编码方式.沙箱逃逸等技巧,可以帮助渗透测试人员绕过WAF和过滤机制. 译者注:原文由Po ...

  8. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  9. Mint UI 之loadmore组件的坑：内部元素头部被遮挡了一部分

    前端经常会遇到数据分页加载的需求,mint-ui组件为大家提供了loadmore组件 但是我在使用的时候,遇到了一个问题:写好布局和样式以及逻辑之后,我的mt-loadmore标签的头部总是不顶在父元 ...

  10. poj 2631 Roads in the North （自由树的直径）

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4513   Accepted: 215 ...