DOM的一些案例

已于 2022-05-01 23:23:32 修改
阅读量133 收藏
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript
于 2022-04-21 20:39:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51010474/article/details/124289015
版权

目录

1、百度换肤效果

2、表格隔行变色效果

3、表单全选和取消全选

4、tab栏切换制作

5、动态生成表格

6、跟随鼠标的天使

7、模拟京东按键输入内容案例

1、百度换肤效果

 案例分析：

  • 这个案例练习的是给一组元素注册事件
  • 给4个小图片利用循环注册点击事件
  • 当我们点击了这个图片，我们的页面背景改为当前的图片
  • 核心算法：把当前图片的src路径取过来，给body做为背景即可
<head>    
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            background: url(image/1.jpg) no-repeat center top;
        }
        li{
            list-style: none;
        }
        .baidu{
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li{
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="baidu">
        <ul>
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        //1.获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //2.循环注册事件
        for(var i = 0 ; i<imgs.length; i++){
            imgs[i].onclick=function(){
                //this.src 就是我们点击图片的路径 将它给body就可以了
                document.body.style.backgroundImage='url(' + this.src +' )';
            }
        }
    </script>
</body>

2、表格隔行变色效果

案例分析：

  • 用到新的鼠标事件 鼠标经过onmouseover 鼠标离开onmouseout
  • 核心思路：鼠标经过tr行 当前的行变背景颜色 鼠标离开就去掉当前的背景颜色
  • 注意：第一行（thead里面的行）不需要变换颜色 因此我们获取的是tbody里面的行
<head>
    <style>
        table{
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr{
            height: 30px;
            background-color: skyblue;
        }

        tbody td{
            border-bottom: 1px solid #d7d7d7;
            color:blue;
        }

        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农行金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农行金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农行金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是tbody里面所以的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2.利用循环注册事件
        for(var i = 0; i<trs.length; i++){
            // 3.鼠标经过事件 onmouseover
           trs[i].onmouseover = function(){
            this.className = 'bg';
        } 
        // 4.鼠标离开事件 onmouseout
        trs[i].onmouseout = function(){
            this.className = '';
        } 
        }
    </script>
</body>

3、表单全选和取消全选

案例分析：

  • 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
  • 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中。
  • 可以设置一个变量来控制全选是否选中
<head>
    <style>
        table {
            width: 300px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }

        thead tr {
            background-color: skyblue;
        }

        tbody td{
            border: 1px solid #dfdfdf;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll"></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="j_tbs">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素
        var j_cbAll = document.getElementById('j_cbAll');//全选按钮
        var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input');//下面所有的复选框都被选中
        // 2.注册事件
        // 全选和取消全选做法
        j_cbAll.onclick = function(){
            for(var i = 0; i<j_tbs.length; i++){
                // this.checked 可以得到当前复选框的选中状态 如果是true 就是选中 如果是false 就是未选中
                j_tbs[i].checked = this.checked;
            }   
        }
        // 下面是复选框需全部选中 上面全选才能选中做法
        for(var i = 0; i<j_tbs.length; i++){
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag =true;
                // 每次点击下面的复选框都要循环检查4个小按钮是否全被选中
                for(var i = 0 ; i<j_tbs.length; i++){
                    if(!j_tbs[i].checked){
                        flag=false;
                        break;//退出for循环 这样可以提高执行效率 因为只要有一个没有选中 剩下的就无需
                    }
                }
                j_cbAll.checked = flag;
            }
        }

    </script>
</body>

4、tab栏切换制作

案例分析：

  • Tab栏切换有2个大的模块
  • 上面是模块选项卡，点击某一个，当前这一个底色为红色，其余不变（排他思想）修改类名的方式
  • 下面的模块内容会跟随上面的选项卡变化 所有下面模块变化要写到点击事件里面
  • 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
  • 核心思路：给上面的tab_list里面的所有li添加自定义属性，属性值从0开始编号
  • 当我们点击tab_list里面的某个li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 800px;
            height: 300px;
            margin: 100px auto;
        }

        li {
            list-style-type: none;
            border-right: 1px solid #c0bcbc;
        }

        .tab_list{
            height: 40px;
            background-color: #dfdfdf;
        }

        .tab_list li{
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block;">商品介绍模块内容</div>
            <div class="item">规格与包装模块内容</div>
            <div class="item">售后保障模块内容</div>
            <div class="item">商品评价（50000）模块内容</div>
            <div class="item">手机社区模块内容</div>
        </div>
    </div>
    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for(var i = 0; i < lis.length; i++){
            // 开始给5个li设置索引号
            lis[i].setAttribute('index',i);
            lis[i].onclick = function(){
                // 1.上面是模块选项卡，点击某一个，当前这一个底色为红色，其余不变（排他思想）修改类名的方式
                // 将所有的li的class这个类都清除掉
                for(var i = 0; i < lis.length; i++){
                    lis[i].className = '';
                }
                // 给当前点击的li设置class类
                this.className = 'current';
                // 2.下面的显示内容模块
                var index = this.getAttribute('index');
                for(var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 给当前点击的item显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>
</html>

5、动态生成表格

案例分析：

  • 因为里面的学生数据都是动态的，我们需要js动态生成，这里我们使用模拟数据，自己定义好数据，数据采用对象形式存储
  • 所有的数据都是放到tbody里面的行里面
  • 因为行很多，所以需要循环创建多个行（对应多少人）通过数组的长度得到
  • 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双层for循环）
  • 最后一列单元格是删除，需要单独创建单元格
<head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }

      th,
      td {
        border: 1px solid #333;
      }

      thead tr {
        height: 40px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 1.先准备好学生的数据
      var datas = [
        {
          name: "小明",
          subject: "javascript",
          score: 100,
        },
        {
          name: "小红",
          subject: "javascript",
          score: 98,
        },
        {
          name: "小黄",
          subject: "javascript",
          score: 88,
        }
      ];
      // 2.在tbody创建行 有几个人就创建几行（通过数组的长度）
      var tbody = document.querySelector("tbody");
      //   外层for循环 行 tr
      for (var i = 0; i < datas.length; i++) {
        //   创建tr行
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        // 行里面创建单元格 td （跟数据有关系的3个单元格）单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
        for (var k in datas[i]) {
          //内循环 列 td
          // 创建单元格
          var td = document.createElement("td");
          //   把对象里面的属性值 data[i][k]给 td
          td.innerHTML = datas[i][k];
          tr.appendChild(td);
        }
        // 创建有删除两个字的单元格
        var td = document.createElement("td");
        td.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
      }
      //   4.删除操作
      var as = document.querySelectorAll("a");
      for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
          // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)
          tbody.removeChild(this.parentNode.parentNode);
        }
      }
      // for(var k in obj) {
      //     k 得到的是属性名
      //     obj[k] 得到是属性值
      // }
    </script>
  </body>
</html>

6、跟随鼠标的天使

案例分析

  • 鼠标不断的移动，使用鼠标移动事件：mousemove
  • 在页面中移动，给document注册事件
  • 图片要移动距离，而且不占位置，我们要使用绝对定位
  • 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
<head>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="../image/angel.gif" alt="" />
    <script>
      var pic = document.querySelector("img");
      document.addEventListener("mousemove", function (e) {
        // 1.mousemove只要鼠标移动1px 就会触发这个事件
        var x = e.pageX;
        var y = e.pageY;
        // 2.不要忘记给left和top添加px单位 -50和-40是图片的高度和宽度的一半
        pic.style.left = x - 50 + "px";
        pic.style.top = y - 40 + "px";
      });
    </script>
  </body>

7、模拟京东按键输入内容案例

  • 核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里面
  • 使用键盘事件对象的属性keyCode 判断用户按下的是否是s键
  • 搜索框获得焦点：使用js里面的focus（）方法
  <body>
    <input type="text" />
    <script>
      var search = document.querySelector("input");
      document.addEventListener("keyup", function (e) {
        // console.log(e.keyCode);  用来查询s键的ASCII码值 s键为83
        if (e.keyCode === 83) {
          search.focus();
        }
      });
    </script>
  </body>

8、模拟京东快递单号查询

  • 快递单号输入内容时 上面的大号字体盒子（con）显示（这里面的字号更大）
  • 表单检查用户输入：给表单添加键盘事件
  • 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）作为内容
  • 如果快递单号里面内容为空，则隐藏大号字体盒子（con）
  • 当文本框失去焦点 就隐藏con盒子 当文本框获得焦点 就显示con盒子

注意：

  • keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中；
  • keyup事件触发的时候，文字已经落入文本框里面了
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .search {
        position: relative;
        width: 178px;
        margin: 100px;
      }
      .con {
        display: none;
        position: absolute;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
      }
      /* 小三角形的做法 */
      .con::before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
      }
    </style>
  </head>
  <body>
    <div class="search">
      <div class="con">123</div>
      <input type="text" placeholder="请输入您的快递单号" class="jd" />
    </div>
    <script>
      var con = document.querySelector(".con");
      var jd_input = document.querySelector(".jd");
      jd_input.addEventListener("keyup", function () {
        if (this.value == "") {
          con.style.display = "none";
        } else {
          com.style.display = "block";
          con.innerHTML = this.value;
        }
      });
      // 当我们失去焦点 就隐藏con盒子
      jd_input.addEventListener("blur", function () {
        con.style.display = "none";
      });
      // 当我们获得焦点 就显示con盒子
      jd_input.addEventListener("focus", function () {
        if (this.value != "") {
          con.style.display = "block";
        }
      });
    </script>
  </body>
</html>

fifi家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM遍历
weixin_34024034的博客
02-10 160
前面的话 　　DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型：Nodeiterator和TreeWalker，它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。本文将详细介绍DOM遍历 　　[注意]IE8-浏览器不支持   定义 　　DOM遍历是深度优先的DOM结构遍历，遍历以给定节点为根，不可能向上超出DOM树的根节点。以下面的HTML页面为...
JavaScrip循环 函数 DOM操作
cxz_dong的博客
12-08 1182
JS的循环 for 循环 常规for 循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> for(var i=11;i>10;i++){ //var i=0 声明变量i i<10条
js 循环dom中的节点 直到找到节点里的文本内容（递归）
qq_42174597的博客
02-08 881
js 循环dom中的节点 直到找到节点里的文本内容（递归方法）
DOM常见案例大盘点!
blog_pancc的博客
04-27 463
文章目录DOM案例一.DOM操作元素案例1.DOM修改元素内容案例2.分时问候案例3.仿京东显示隐藏密码明文案例4.仿淘宝关闭二维码案例5.遍历精灵图案例6.显示隐藏文本框内容案例7.密码框验证信息案例8.仿世纪佳缘用户名显示隐藏案例9.排他思想(算法)案例10.百度换肤案例11.表格隔行变色案例12.全选反选案例13.tab栏切换案例14.新浪下拉菜单案例15.简单版留言板案例16.动态生成表格案例二.DOM事件高级案例1.鼠标跟随案例2.仿京东按键输入内容案例3.仿京东快递查询单号案例 DOM案例 ​
DOM操作经典案例
qq_41189709的博客
08-05 1883
DOM操作经典案例百度换肤案例鼠标移进移出变色（行变色）表单全选全取消案例tag导航栏切换案例 百度换肤案例 百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径 js代码： <script> var img=document.querySelectorAll('img')...
dom编程案例
01-09
张三 沈阳 <grade>89 李四 大连 <grade>97 </exam>
jquery 操作DOM案例代码分享
10-28
jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下
vue监听dom大小改变案例
10-15
主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript-DOM实战案例
最新发布
09-18
DOM实战案例的css和img资源
js和dom用法案例
04-02
asp.net网络编程必备js和dom用法案例
JS实现的DOM插入节点操作示例
11-28
本文实例讲述了JS实现的DOM插入节点操作。分享给大家供大家参考，具体如下： 一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref) new：表示新的子节点。 ref：指定一个节点，在这个节点前插入新的节点。 二 应用 插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 三 完整示例代码： <!DOCTYPE html> <html> <head> <title>www.jb51.net 插入节点</title>
DOM操作的案例
qq_56668869的博客
07-14 477
操作元素的属性、表格隔行变色、点击图片切换页面背景 、前端表单验证（邮箱示例）
DOM节点操作案例
weixin_54418006的博客
01-12 319
1. 新浪下拉菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
JavaScript之简单DOM小案例
weixin_50939386的博客
04-05 815
简单的几个Dom案例
DOM节点循环绑定事件
Supreme_Sir的博客
05-09 884
DOM节点循环绑定事件 前端 JavaScript 开发中，我们经常会遇到为某些节点绑定相同事件的情况，代码如下： $(function(){ for(var i=0;i&lt;5;i++){ $(".testt p:eq("+i+")").click(function(){ alert(i); }) } }) ...
DOM案例练习-推荐几个DOM小案例练习有示例代码
m0_71485750的博客
06-04 654
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分 HTML结构 JS代码 案例二: 关闭删除消息 说明: 点击叉号将对应导航栏删除示例代码:CSS代码 HTML结构: JS代码: 案例三: 侧边栏的展示 说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码 HTML结构 JS代码 案例四: 登录框
JavaScript|小白学DOM(附各种小案例)
执念斩长河
05-23 778
本博文源于js基础，小白学DOM，各种小案例辅助记忆。比如测试nodeType值，获得子标签节点，获得兄弟节点，实现无序列表的拷贝，创建删除修改添加节点都含有不错的小例子，辅助记忆没啥大问题，如果大家收藏也要观看哟！
随便写一个JS DOM案例
03-25
当然可以，以下是一个非常简单的 JavaScript DOM 案例： <!DOCTYPE html> <title>JavaScript DOM Example <h1>JavaScript DOM Example <p id="demo">This is some text. //获取 id 为 demo 的 p ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值