1. 技术文章
  2. JS---DOM---点击操作---part2---14个案例

JS---DOM---点击操作---part2---14个案例

由 回眸只為那壹抹淺笑 提交于 2019-12-23 17:51:38

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

  <input type="button" value="禁用文本框" id="btn" />
  <input type="text" value="文本框" id="txt" />

  <script>
    document.getElementById("btn").onclick = function () {
      document.getElementById("txt").disabled = true;
    };
  </script>

 

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

  <input type="button" value="变色" id="btn" />
  <ul id="uu">
    <li>王陆</li>
    <li>海云帆</li>
    <li>闻宝</li>
    <li>琉璃仙</li>
    <li>王舞</li>
  </ul>
  <script>
    document.getElementById("btn").onclick = function () {
      document.getElementById("uu").style.backgroundColor = "pink";
    };
  </script>

 

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

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

  <!--第一种写法:-->
  <a href="http://www.baidu.com" onclick="alert('哎呀我被点了'); return false">百度1</a>

  <!--第二种写法-->
  <script>
    function f1() {
      alert("好漂亮呀");
      return false;
    }
  </script>
  <a href="http://www.baidu.com" onclick="return f1()">百度2</a>


  <!--第三种写法:-->
  <a href="http://www.baidu.com" id="ak">百度3</a>
  <script>
    document.getElementById("ak").onclick = function () {
      alert("嘎嘎");
      return false;
    };
  </script>

 

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

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

 

案例5：美女相册

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {

      list-style: none;
    }

    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery li a img {
      border: 0;
    }
  </style>
</head>

<body>

  <h2>
    美女画廊
  </h2>

  <ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1" />
      </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2" />
      </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3" />
      </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4" />
      </a></li>
  </ul>
  <div style="clear:both"></div>


  <!--显示大图的-->
  <img id="image" src="images/placeholder.png" alt="" width="450" />
  <p id="des">选择一个图片</p>

  <script src="common.js"></script>
  <script>
    //从ul中标签获取获取所有的a标签
    var aObjs = my$("imagegallery").getElementsByTagName("a");
    //循环遍历所有的a标签
    for (var i = 0; i < aObjs.length; i++) {
      //为每个a标签注册点击事件
      aObjs[i].onclick = function () {
        //为id为image的标签的src赋值
        my$("image").src = this.href;
        //为p标签赋值
        my$("des").innerText = this.title;
        //阻止超链接默认的跳转
        return false;
      };
    }
  </script>
</body>
</html>

 

实现效果：

 

案例6：列表隔行变色

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

<!-- 奇黄偶绿 -->
  <input type="button" value="隔行变色" id="btn" />
  <ul id="brandlist">
    <li>雅诗兰黛</li>
    <li>兰蔻</li>
    <li>契尔氏</li>
    <li>海蓝之谜</li>
    <li>欧舒丹</li>
    <li>雅顿</li>
  </ul>

  <script src="common.js"></script>
  <script>
    // my$("btn").onclick = function () {
    //   //获取所有li标签
    //   var list = my$("brandlist").getElementsByTagName("li");
    //   for (var i = 0; i < list.length; i++) {
    //     if (i % 2 == 0) {
    //       list[i].style.backgroundColor = "yellow";
    //     } else {
    //       list[i].style.backgroundColor = "green";
    //     }
    //   }
    // };

    //优化后
    my$("btn").onclick = function () {
      var list = my$("brandlist").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green";
      }
    };
  </script>

 

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

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .nodeSmall {
      width: 50px;
      height: 50px;
      background: url(images/bgs.png) no-repeat -159px -51px;
      position: fixed;
      right: 10px;
      top: 40%;
    }

    .erweima {
      position: absolute;
      top: 0;
      left: -150px;
    }

    .nodeSmall a {
      display: block;
      width: 50px;
      height: 50px;
    }

    .hide {
      display: none;
    }

    .show {
      display: block;
    }
  </style>


</head>

<body>
  <div class="nodeSmall" id="node_small">
    <a href="#"></a>
    <!--锚定-->
    <div class="erweima hide" id="er">
      <img src="images/456.png" alt="" />
    </div>
  </div>


  <script src="common.js"></script>
  <script>
    ////获取鼠标要进入的a标签
    var aObj = my$("node_small").getElementsByTagName("a")[0];
    //为a注册鼠标进入
    aObj.onmouseover = function () {
      my$("er").className = "erweima show";
    };
    //为a注册鼠标离开
    aObj.onmouseout = function () {
      my$("er").className = "erweima hide";
    };
  </script>
</body>
</html>

 

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

  <input type="button" value="显示效果" id="btn" /> <br />
  <input type="text" value="你好" name="name1" /> <br />
  <input type="text" value="你好" name="name3" /> <br />
  <input type="text" value="你好" name="name2" /> <br />
  <input type="text" value="你好" name="name1" /> <br />
  <input type="text" value="你好" name="name1" /> <br />

  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      var inputs = document.getElementsByName("name1");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = "我很好";
      }
    };
  </script>

 

实现效果：

 

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

getElementsByClassName();------>h5的, IE8及以下不支持
  <p>第一个p标签</p>
  <p class="cls">第二个p标签</p>
  <span>第一个行内元素span</span> <br />
  <span class="cls">第二个行内元素span</span> <br />
  <div>第一个盒子</div> <br />
  <div class="cls">第二个盒子</div> <br />
  <input type="button" value="显示效果" id="btn" /> <br />
  <script src="common.js"></script>
  <script>

    my$("btn").onclick = function () {
      //根据类样式的名字来获取元素
      var objs = document.getElementsByClassName("cls");
      for (var i = 0; i < objs.length; i++) {
        //设置每个元素的背景颜色
        objs[i].style.backgroundColor = "hotpink";
      }
    };

 

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

<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>
<script src="common.js"></script>
<script>

  //点击按钮弹出对话框
  //根据选择器的方式获取元素
// var btnObj= document.querySelector("#btn");
//  btnObj.onclick=function () {
//      alert("哈哈,我又变帅了");
//  };

  var objs=document.querySelectorAll(".cls");
  for(var i=0;i<objs.length;i++){
    objs[i].style.backgroundColor="green";
  }
</script>

 

案例11：div边框高亮显示

<head>
  <meta charset="UTF-8">
  <title>jane自学转行</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 150px;
      background-color: pink;
      float: left;
      margin-top: 5px;
      margin-left: 10px;
      /* 加同色边框解决抖动问题 */
      border: 2px solid pink;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script src="common.js"></script>
  <script>
    //获取所有div
    var dvObjs = document.getElementsByTagName("div");
    //遍历div
    for (var i = 0; i < dvObjs.length; i++) {
      //为每个div添加鼠标进入的事件
      dvObjs[i].onmouseover = function () {
        this.style.border = "2px solid hotpink";
      };
      //为每个div添加鼠标进入的事件
      dvObjs[i].onmouseout = function () {
        this.style.border = "";
      };
    }
    </script>
  </body>

 

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    input {
      color: gray;
    }
  </style>
</head>

<body>
  <input type="text" value="请输入搜索内容" id="txt">
  <script src="common.js"></script>
  <script>

    //获取文本框
    //注册获取焦点的事件
    my$("txt").onfocus = function () {
      //判断文本框的内容是不是默认的内容
      if (this.value == "请输入搜索内容") {
        //是默认内容就清空默认，字体颜色变为黑色
        this.value = "";
        this.style.color = "black";
      }
    };
    //注册获取焦点的事件
    my$("txt").onblur = function () {
      //判断文本框是否空，空的话就重新设置默认文字和颜色
      if (this.value == "") {
        this.value = "请输入搜索内容";
        this.style.color = "gray";
      }
    };
  </script>
</body>
</html>

 

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

  <input type="password" id="txt">
  <script src="common.js"></script>
  <script>
    my$("txt").onblur = function () {
      if (this.value.length >= 6 && this.value.length <= 10) {
        this.style.backgroundColor = "green";
      } else {
        this.style.backgroundColor = "red";
      }
    };

  </script>

 

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

  <input type="text" value="文本框" id="txt" />

  <script src="common.js"></script>
  <script>
    //设置和获取文本框的值
    my$("txt").onblur = function () {
      this.value = "锄禾日当午";
      console.log(this.value);
    };
  </script>

 

标签
文本框
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!