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

案例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="data: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="data:images/1-small.jpg" width="100" alt="美女1" />

      </a></li>

    <li><a href="images/2.jpg" title="美女B">

        <img src="data:images/2-small.jpg" width="100" alt="美女2" />

      </a></li>

    <li><a href="images/3.jpg" title="美女C">

        <img src="data:images/3-small.jpg" width="100" alt="美女3" />

      </a></li>

    <li><a href="images/4.jpg" title="美女D">

        <img src="data:images/4-small.jpg" width="100" alt="美女4" />

      </a></li>

  </ul>

  <div style="clear:both"></div>

  <!--显示大图的-->

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

巴特西

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

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

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

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

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

案例5：美女相册

案例6：列表隔行变色

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

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

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

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

案例11：div边框高亮显示

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

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

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

最新文章

热门文章