WebAPI02

最新推荐文章于 2024-05-17 08:20:40 发布
最新推荐文章于 2024-05-17 08:20:40 发布
阅读量173 收藏
点赞数
分类专栏： 前端知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44797965/article/details/104375265
版权

检测用户名和密码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .bg {
      background-color: yellow;
    }
  </style>
</head>
<body>
    <input type="text" id="txtUserName"> <br>
    <input type="password" id="txtUserPassword"> <br>
    <input type="button" value=" 登 录 " id="btnLogin">
    <script>
      // 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
      var btnLogin = document.getElementById('btnLogin');
      btnLogin.onclick = function () {
        // 检测用户名是否是3-6位，密码是否是6-8位
        var txtUserName = document.getElementById('txtUserName');
        var txtUserPassword = document.getElementById('txtUserPassword');
        //检测用户名是否是3-6位
        if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
          txtUserName.className = 'bg';
          return;
        } else {
          txtUserName.className = '';
        }
        // 密码是否是6-8位
        if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
          txtUserPassword.className = 'bg';
          return;
        } else {
          txtUserPassword.className = '';
        }
        console.log('执行登录');
      }
    </script>
</body>
</html>

搜索文本框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .gray {
      color: gray;
    }
    .black {
      color: black;
    }
  </style>
</head>
<body>
  <input type="text" class="gray" value="请输入搜索关键字" id="txtSearch"> 
  <input type="button" value="搜索" id="btnSearch">
  <script>
    // 当文本框获得焦点，如果文本框里的内容是  请输入搜索关键字 清空文本框，并且让字体变为黑色
    var txtSearch = document.getElementById('txtSearch');
    // 获取焦点的事件  focus
    txtSearch.onfocus = function () {
      if (this.value === '请输入搜索关键字') {
        this.value = '';
        this.className = 'black';
      }
    }
    // 当文本框失去焦点，如果文本框里的内容为空  还原文本框里的文字，并且让字体变为灰色
    // 失去焦点的事件  blur
    txtSearch.onblur = function () {
      // 判断文本框中的内容为空
      // if (this.value === '')
      if (this.value.length === 0 || this.value === '请输入搜索关键字') {
        this.value = '请输入搜索关键字';
        this.className = 'gray';
      }
    }
  </script>
</body>
</html>

全选反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <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>
      <input type="button" value="  反 选  " id="btn">
  </div>
  <script>
     // 1 全选
     // 1.1 获取父checkbox，注册点击事件
     var j_cbAll = document.getElementById('j_cbAll');
     j_cbAll.onclick = function () {
       // 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
       var j_tb = document.getElementById('j_tb');
       var inputs = j_tb.getElementsByTagName('input');
       for (var i = 0; i < inputs.length; i++) {
         var input = inputs[i];
         if (input.type === 'checkbox') {
          // 让子的checkbox的选中状态，和父checkbox的选中状态一致
           input.checked = this.checked;
         }
       }
     }
     // 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
     // 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
     // 3 反选
  </script>
</body>
</html>

全选反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <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>
      <input type="button" value="  反 选  " id="btn">
  </div>
  <script>
     var j_tb = document.getElementById('j_tb');
     var inputs = j_tb.getElementsByTagName('input');
     // 1 全选
     // 1.1 获取父checkbox，注册点击事件
     var j_cbAll = document.getElementById('j_cbAll');
     j_cbAll.onclick = function () {
       // 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
       for (var i = 0; i < inputs.length; i++) {
         var input = inputs[i];
         if (input.type === 'checkbox') {
          // 让子的checkbox的选中状态，和父checkbox的选中状态一致
           input.checked = this.checked;
         }
       }
     }
     // 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
     // 如果有一个子的checkbox没有被选中，父的checkbox也不被选中     
     // 此处的循环，是遍历所有子的checkbox，注册点击事件
     for (var i = 0; i < inputs.length; i++) {
       var input = inputs[i];
       // 判断是否是checkbox
       if (input.type !== 'checkbox') {
        // 结束当前循环，继续下一次循环
         continue;
       }
       // 给子的checkbox注册点击事件
       input.onclick = function () {
         // 假设所有的子的checkbox都被选中了
         var isAllChecked = true;
         // 判断是否所有的子的checkbox都被选中了
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== 'checkbox') {
             continue;
           }
           // 判断当前的所有checkbox是否都被选中
           if (!input.checked) {
             isAllChecked = false;
           }
         }
         // 设置父的checkbox的状态
         j_cbAll.checked = isAllChecked;
       }
     }
     // 判断父的checkbox的状态 封装成函数
     // 3 反选
     // 3.1 给反选按钮注册点击事件
     var btn = document.getElementById('btn');
     btn.onclick = function () {
        // 3.2 找到所有的子的checkbox，让其反选
        for (var i = 0; i < inputs.length; i++) {
          var input = inputs[i];
          // 判断是否是checkbox
          if (input.type !== 'checkbox') {
            continue;
          }
          // 让子的checkbox反选
          input.checked = !input.checked;
          // 父的checkbox
        }
     }    
  </script>
</body>
</html>

全选反选


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <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>
      <input type="button" value="  反 选  " id="btn">
  </div>
  <script>
     var j_tb = document.getElementById('j_tb');
     var inputs = j_tb.getElementsByTagName('input');
     // 1 全选
     // 1.1 获取父checkbox，注册点击事件
     var j_cbAll = document.getElementById('j_cbAll');
     j_cbAll.onclick = function () {
       // 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
       for (var i = 0; i < inputs.length; i++) {
         var input = inputs[i];
         if (input.type === 'checkbox') {
          // 让子的checkbox的选中状态，和父checkbox的选中状态一致
           input.checked = this.checked;
         }
       }
     }
     // 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
     // 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
     // 此处的循环，是遍历所有子的checkbox，注册点击事件
     for (var i = 0; i < inputs.length; i++) {
       var input = inputs[i];
       // 判断是否是checkbox
       if (input.type !== 'checkbox') {
        // 结束当前循环，继续下一次循环
         continue;
       }
       // 给子的checkbox注册点击事件
       input.onclick = function () {
         checkAllCheckBox();
       }
     }
     // 判断父的checkbox的状态 封装成函数
     function checkAllCheckBox() {
       // 假设所有的子的checkbox都被选中了
         var isAllChecked = true;
         // 判断是否所有的子的checkbox都被选中了
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== 'checkbox') {
             continue;
           }
           // 判断当前的所有checkbox是否都被选中
           if (!input.checked) {
             isAllChecked = false;
           }
         }
         // 设置父的checkbox的状态
         j_cbAll.checked = isAllChecked;
     }
     // 3 反选
     // 3.1 给反选按钮注册点击事件
     var btn = document.getElementById('btn');
     btn.onclick = function () {
        // 3.2 找到所有的子的checkbox，让其反选
        for (var i = 0; i < inputs.length; i++) {
          var input = inputs[i];
          // 判断是否是checkbox
          if (input.type !== 'checkbox') {
            continue;
          }
          // 让子的checkbox反选
          input.checked = !input.checked;
          // 设置父的checkbox的状态
          checkAllCheckBox();
        }
     }    
  </script>
</body>
</html>

自定义属性操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box" age="18" personId="1">张三</div>
  <script>
    var box = document.getElementById('box');
    // // 自有的属性
    // console.log(box.id);
    // // 自定义属性  -- 不能使用下面的方式获取到box元素对应的div标签的的自定义属性
    // console.log(box.age);
    // console.log(box.personId);
    // 获取自定义属性的值 getAttribute()
    // console.log(box.getAttribute('age'));
    // console.log(box.getAttribute('personId'));
    // 设置自定义属性
    // box.setAttribute('sex', 'male');
    // box.setAttribute('class', 'test');
    // 移除属性 
    box.removeAttribute('age');
    box.removeAttribute('id');
  </script>
</body>
</html>

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cls {
      background-color: red;
    }
  </style>
</head>
<body>
  <input type="button" id="btn" value=" 点我 "> <br>
  <input type="text" id="txt">
  <script>
    // 根据id获取元素 封装成函数
    function my$(id) {
      return document.getElementById(id);
    }
    // 样式操作
    // 1 使用类样式
    // my$('btn').onclick = function () {
    //   my$('txt').className = 'cls';
    // }
    // 2 使用style
    my$('btn').onclick = function () {
      // my$('txt').style 
      var txt = my$('txt');
      // console.log(txt.style);
      // 样式属性  background-color
      // DOM中style的属性  backgroundColor
      txt.style.backgroundColor = 'red';
    }
    var person = {
      name: 'zs',
      age: 18,
      dog: {
        name: 'puppy',
        age: 2
      }
    }
    console.log(person.dog.name);
  </script>
</body>
</html>

模拟DOM结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">hello</div>
  <p id="p">world</p>
  <!-- 这是注释 -->
  <script>
    var box = document.getElementById('box');
    console.dir(box);
    // 创建一些列具有相同属性的对象，构造函数
    // 获取对象没有的属性，属性的值是undefined
    function Node(options) {
      // 设置属性的默认值
      this.className = options.className || '';
      this.id = options.id || '';
      // 跟节点相关的属性
      // 节点的名称，如果是元素的节点的话，是标签的名称
      this.nodeName = options.nodeName || '';
      // 节点的类型  如果是元素节点 1 属性节点 2  文本节点 3  数值类型
      this.nodeType = options.nodeType || 1;
      // 记录节点的值，如果是元素节点，始终是null
      this.nodeValue = options.nodeValue || null;
      // 记录子节点
      this.children = options.children || [];
    }
    // 创建html节点
    var html = new Node({
      nodeName: 'html'
    });
    // 创建head节点
    var head = new Node({
      nodeName: 'head'
    });
    // 设置html中的子节点 head
    html.children.push(head);
    // console.dir(html)
    // body 
    var body = new Node({
      nodeName: 'body'
    })
    // 设置html中的子节点 body
    html.children.push(body);
    // div
    var div = new Node({
      nodeName: 'div'
    })
    // p
    var p = new Node({
      nodeName: 'p'
    })
    // 设置body的子节点
    body.children.push(div);
    body.children.push(p);
    console.dir(html);
    // 在运行的时候，浏览器内部维护了一颗DOM树
    // 1 深刻理解DOM
    // 2 了解节点相关的属性  nodeName  nodeType  nodeValue
    // 3 了解节点的层次结构
  </script>
</body>
</html>

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cls {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <input type="button" id="btn" value=" 点我 "> <br>
  <div id="box"></div>  
  <script src="common.js"></script>
  <script>
    // 操作样式的时候，使用类样式 使用style？
    // 当设置多个样式属性的时候使用类样式方便
    // 当设置样式属性比较少的时候使用style比较方便
    // 
    // 
    // 
    // 1 类样式
    // my$('btn').onclick = function () {
    //   my$('box').className = 'cls';
    // }
    // 2 使用style
    my$('btn').onclick = function () {
      // 当设置宽度和高度的时候必须带单位，如果不带单位，有错误
      var box = my$('box');
      box.style.width = '200px';
      box.style.height = '200px';
      box.style.backgroundColor = 'red';
    }
  </script>
</body>
</html>

开关灯

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="关灯" id="btn">
  <script src="common.js"></script>
  <script>
    // 是否开灯  false 关灯状态  true 开灯状态
    var isOpen = true;
    my$('btn').onclick = function () {
      if (isOpen) {
        document.body.style.backgroundColor = 'black';
        this.value = '开灯';
        isOpen = false;
      } else {
        document.body.style.backgroundColor = 'white';
        this.value = '关灯';
        isOpen = true;
      }
    }
  </script>
</body>
</html>

显示隐藏二维码

<!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">
        <div class="erweima hide" id="er">
            <img src="images/456.png" alt=""/>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        // 当鼠标移入  onmouseover
        // 当鼠标移出  onmouseout
        var nodeSmall = my$('node_small');
        nodeSmall.onmouseover = function () {
            // my$('er').className = 'erweima show';
            my$('er').className = my$('er').className.replace('hide', 'show'); 
        }
        nodeSmall.onmouseout = function () {
            // my$('er').className = 'erweima hide';
            my$('er').className = my$('er').className.replace('show', 'hide');
        }
    </script>
</body>
</html>

高亮显示输入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="button" value=" 提交 ">
  <script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      // 判断input是否是文本框
      if (input.type !== 'text') {
        continue;
      } 
      // 让当前正在输入的文本框 高亮显示
      input.onfocus = function () {
        // 让所有的文本框去掉高亮的效果
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== 'text') {
             continue;
           }
           // 去除所有文本框高亮显示
           input.style.backgroundColor = '';
         }
        // 当前文本框高亮显示
        this.style.backgroundColor = 'lightgray';   
      }
    }
  </script>
</body>
</html>

设置div的大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .cls {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 100px;
      left: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <input type="button" value=" 点我 " id="btn">
  <br>
  <div id="box"></div>
  <script src="common.js"></script>
  <script>
    my$('btn').onclick = function () {
      var box = my$('box');
      // 改变box的大小和位置
      // 使用class
      // box.className = 'cls';
      // 
      // 使用style  设置大小和位置的时候 数字必须带单位
      box.style.width = '200px';
      box.style.height = '200px';
      box.style.position = 'absolute';
      box.style.left = '200px';
      box.style.top = '200px';
      console.log(box.style);
    }
  </script>
</body>
</html>

隔行变色和高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul id="mv">
    <li>西施</li>
    <li>貂蝉</li>
    <li>王昭君</li>
    <li>杨玉环</li>
    <li>芙蓉姐姐</li>
  </ul>
  <script>
    // 1 隔行变色
    // 获取到所有的li，判断奇数行和偶数行
    var mv = document.getElementById('mv');
    var lists = mv.getElementsByTagName('li');
    for (var i = 0; i < lists.length; i++) {
      var li = lists[i];
      // 判断当前的li 是奇数行 还是偶数行
      if (i % 2 === 0) {
        // i是偶数 ， 但是当前是奇数行
        // 设置奇数行的背景颜色
        li.style.backgroundColor = 'red';
      } else {
        // 设置偶数行的背景颜色
        li.style.backgroundColor = 'green';
      }
    }
    // 2 鼠标放上高亮显示
    // 
    // 2.0 给所有的li 注册事件  鼠标经过和鼠标离开的两个事件
    for (var i = 0; i < lists.length; i++) {
      var li = lists[i];
       // 2.1 鼠标放到li上，高亮显示当前的li
       var bg;
       li.onmouseover = function () {
         // 鼠标放到li上的时候，应该记录li当前的颜色
         bg = this.style.backgroundColor;
         this.style.backgroundColor = 'yellow';
       }
       // 2.2 鼠标离开li，还原原来的颜色
       li.onmouseout = function () {
         // 鼠标离开，还原原来的颜色
         this.style.backgroundColor = bg;
       }
    }
  </script>
</body>
</html>

tab切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin:0; padding: 0;}
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px;
        }
        .hd span {
            display:inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .hd span.current {
            background-color: purple;
        }
        .bd div {
            height: 255px;
            background-color: purple;
            display: none;
        }
        .bd div.current {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        // 1 鼠标放到tab栏高亮显示，其它tab栏取消高亮
        var hd = my$('hd');
        var spans = hd.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
            var span = spans[i];
            // 注册事件
            span.onmouseover = fn;
        }
        // 鼠标经过的事件处理函数
        function fn() {
            // 让所有的span取消高亮显示
            for (var i = 0; i < spans.length; i++) {
                var span = spans[i];
                span.className = '';
            }
            // 当前的span高亮显示
            this.className = 'current';
        }
        // var fn = function () {                
        // }   
       // 2 tab栏对应的div 显示，其它div隐藏       
    </script>
</body>
</html>

tab切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin:0; padding: 0;}
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px;
        }
        .hd span {
            display:inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .hd span.current {
            background-color: purple;
        }
        .bd div {
            height: 255px;
            background-color: purple;
            display: none;
        }
        .bd div.current {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
    <script src="common.js"></script>
    <script>
        // 1 鼠标放到tab栏高亮显示，其它tab栏取消高亮
        var hd = my$('hd');
        var spans = hd.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
            var span = spans[i];
            // 通过自定义属性，记录当前span的索引
            span.setAttribute('index', i);
            // 注册事件
            span.onmouseover = fn
        }
        // 鼠标经过的事件处理函数
        function fn() {
            // 让所有的span取消高亮显示
            for (var i = 0; i < spans.length; i++) {
                var span = spans[i];
                span.className = '';
            }
            // 当前的span高亮显示
            this.className = 'current';
            // 2 tab栏对应的div 显示，其它div隐藏
            // 所有的div 隐藏
            var bd = my$('bd');
            var divs = bd.getElementsByTagName('div');
            for (var i = 0; i < divs.length; i++) {
                var div = divs[i];
                div.className = '';
            }
            // 当前span对应的div显示
            // 获取自定义属性的值
            var index = parseInt(this.getAttribute('index')) ;
            divs[index].className = 'current';    
        }
        // var fn = function () {               
        // }          
    </script>
</body>
</html>

模拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">hello</div>
  <p id="p">world</p>
  <!-- 这是注释 -->
  <script>
    // 文档树
    //   节点
    //      元素节点
    //      属性节点
    //      文本节点
    //      注释节点
    // var box = document.getElementById('box');
    // console.dir(box);
    // var p = document.getElementById('p');
    // console.dir(p);
    // 
    // 
    // 创建一些列具有相同属性的对象，构造函数
    // 获取对象没有的属性，属性的值是undefined
    function Node(options) {
      // if (options.className) {
      //   this.className = options.className;
      // } else {
      //   this.className = '';
      // }
      
      // this.className = options.className ? options.className : '';
      // 设置属性的默认值
      this.className = options.className || '';
    }
    // || 布尔类型的运算符，如果有一边是true就返回true，如果两边同时为false返回false
    // || 两边也可以是其它类型，会先转换成布尔类型
    // 如果第一个 运算数 转换成布尔类型，是true ，直接返回这个运算数
    // 如果第一个 运算数 转换成布尔类型，是false，返回第二个运算数
    var o = new Node({
      // className: 'cls'
    });
    console.log(o);
  </script>
</body>
</html>

总结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box"></div>
  <script>
    // DOM  文档对象模拟
    // 
    // 常见的DOM操作
    //    获取元素   getElementById()  getElementsByTagName()
    //    给元素注册事件    onclick   onmouseover  onmouseout  onfocus  onblur
    //    操作元素的属性
    //        非表单元素   href  title  src alt等
    //        表单元素     type  value  checked  disabled  selected
    //        公共属性     id   className style
    //        样式操作     className  style
    //        自定义属性   setAttribute()   getAttribute()   removeAttribute()
  </script>
</body>
</html>
码农阳神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带有定位当前位置的百度地图前端web api实例代码
09-02
本文将介绍如何在前端Web应用中集成百度地图API，并实现实时定位当前位置的功能。这个实例代码主要用于帮助开发者快速理解并实现基于百度地图API的定位功能，适用于需要在网页上展示用户地理位置的应用场景。 首先...
JavaScript -- 检测用户名和密码位数是否正确
zn0128的博客
10-17 2644
<!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"> <title>Do.
js（九）——事件
C-A-L-D
02-04 420
事件 事件：触发-响应机制 Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。 事件三要素 事件源:触发(被)事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = document.getElementById...
Web前端最新JavaScript 常用API — WebAPI 详细介绍+实例描述(1)，腾讯前端开发面试记录
最新发布
2301_82244607的博客
05-17 968
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。树中.[外链图片转存中…(img-rTxPsEX8-1715905216881)][外链图片转存中…(img-ger3SVjA-1715905216882)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
webAPI基础
m0_53456432的博客
07-14 5540
一、关于webAPI 1.API和webAPI 1.1API概念 API（Application Programming Interface）应用程序编程接口，简单理解API是给程序员提供的一种工具，以便能更轻松的完成想要的功能。 1.2webAPI概念 webAPI是浏览器提供的一套操作浏览器功能和页面元素的接口（BOM、DOM）。比如我们想要浏览器弹出一个警示框alert('警示框')，alert就是浏览器的API 2.总结 API是为程序员提供的接口，帮助实现某种功能，会使用就可以了，不
WebAPI简介
weixin_71777499的博客
07-22 1万+
WebAPI最重要的是可以构建面向各种客户端的服务。
调用WebApi的7种方式
故里2130
03-21 8213
1.首先建立webapi程序 2.点击启动 3.把api修改成自己使用的 删除WeatherForecastController.cs 和WeatherForecast.cs 建立自己的类 using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace WebApplic..
接口开发笔记-WebApi
weixin_63658665的博客
03-27 2546
记录了weiapi学习过程中的一些基本操作
03-2-JavaScript基础之Web API（DOM）
l798358117的博客
03-09 249
1. Web API Web API介绍 API概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) var max = Math.max(1,...
【JavaScript】WebAPI详解
X_H学Java的博客
08-05 3027
JavaScript作为前端三剑客之一，主要功能是赋予页面灵魂，使之可以完成与用户的交互动作，本篇文章介绍了在jJavaScript中，如何使用WebAPI来操作页面元素赋予页面灵魂，来完成与用户的交互动作
WebAPI详细知识
weixin_67649868的博客
12-14 1092
本文详细的介绍了webapi的内容，包括dom和bom，适合合于js入门的程序员
1.WebApi是什么webApi实现增删改查操作
fangyuan621的专栏
11-19 6690
1.WebApi是什么 ASP.NET Web API 是一种框架，用于轻松构建可以由多种客户端（包括浏览器和移动设备）访问的 HTTP 服务。ASP.NET Web API 是一种用于在 .NET Framework 上构建 RESTful 应用程序的理想平台。 可以把WebApi看成Asp.Net项目类型中的一种，其他项目类型诸如我们熟知的WebForm项目，Windows窗体项目，控制台应用程序等。 WebApi类型项目的最大优势就是，开发者再也不用担心客户端和服务器之间...
【WebAPI】WebAPI 简介 - 新建 - 数据获取 - 路由 - 跨域
新青年1号
07-22 1447
WebAPI WebAPI 简介 WebAPI：(Web Application Programming Interface：网络应用程序接口) 是一个可以对接各种客户端（浏览器、移动设备），构建 http 服务的框架。是 .net 技术体系下分布式开发的首选技术。与 WebService 和 WCF 相比较，更加的轻量级，传输效率更高。 RESTful 风格 WebAPI 的设计遵循了 RE...
【JavaScript】WebAPI入门到实战
大三小白C++进阶之路
09-10 1297
WebAPI之DOMAPI的基础内容讲解和一些简单的小项目实战。
【C#】WebAPI，在Windows IIS平台部署
花北城的博客
08-26 1万+
​ IIS平台下，WebAPI发布及异常处理。互联网信息服务（英语：Internet Information Services,简称IIS），是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。 Apache是其在网络服务软件中的主要竞争者。
WebApi路由机制详解——看完不会用你打我
热门推荐
xiaouncle的博客
11-12 4万+
随着前后端分离的大热，WebApi在项目中的作用也是越来越重要，由于公司的原因我之前一直没有机会参与前后端分离的项目，但WebApi还是要学的呀，因为这东西确实很有用，可单独部署、与前端和App交互都很方便，既然有良好的发展趋势，我们当然应该顺势而为——搞懂WebApi！ 从MVC到WebApi，路由机制一直都在其中扮演着重要的角色。 它可以很简单：如果你只需要会用一些简单的路由，如/Home...
webAPI介绍
m0_58626552的博客
03-16 2773
API和webAPI API（Application Programming Interface）应用程序编程接口（暴露出来的工具）。 webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM） DOM：操作页面元素的方法 document object model BOM：操作浏览器的 DOM介绍 DOM的概念 概念：文档对象模型。 文档：html文件 对象：属性和方法 模型：（树） 文档树 ​ 文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、
WebAPI详解
Denisedan的博客
05-30 3909
WebAPI详解 标签（空格分隔）：DOM 任何开发语言都有自己的API,那么API是什么呢？ API (Application Programming Interface ) 概念: 是一些预先定义的函数 目的: 提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而无需访问源码,或理解内部工作机制的细节。 那么什么是WebAPI呢？ 概念: 浏览器提供的一套操作浏览器功能和...
c# WebApi项目实践
08-26
在C# WebApi项目实践中，可以采用ASP.NET Core 3.1 WebApi的干净体系结构来实现。您可以使用开源的BoilerPlate模板来创建一个干净的体系结构。通过这个模板，您可以获得ASP.NET Core的一些基础功能，如身份验证和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值