Web API学习笔记(三)

最新推荐文章于 2024-08-15 09:17:35 发布

Java追求者

最新推荐文章于 2024-08-15 09:17:35 发布

阅读量257

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/106493878

版权

前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.动态的创建元素
document.write()
使用document.write()输出内容，会把之前的整个页面覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>标题</h1>
  <img src="" alt="">
  <input type="button" value="按钮" id="btn">
  <script>
    // 动态创建元素
    // document.write()
    // element.innerHTML
    // document.createElement()
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      // 当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉
      document.write('Hello <p>World</p>');
    }
    
  </script>
  <a id="ibangkf" href="http://www.ibangkf.com">网站客服</a>
  <script type="text/javascript" src="http://c.ibangkf.com/i/c-xxxzzzz123.js"></script>
</body>
</html>

element.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <div id="box"></div>
  <script>
    // element.innerHTML 
    // var box = document.getElementById('box');
    // box.innerHTML = 'Hello <p>World</p>';
    
    // var btn = document.getElementById('btn');
    // btn.onclick = function () {
    //   var box = document.getElementById('box');
    //   box.innerHTML = 'Hello <p>World</p>';
    // }
    // 
    // 
    // 点击按钮 生成列表，鼠标放上高亮显示的效果
    
    // 模拟数据
    // var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    // var btn = document.getElementById('btn');
    // btn.onclick = function () {
    //   var box = document.getElementById('box');
    //   box.innerHTML = '<ul>';  // 重新绘制

    //   // 遍历数据
    //   for (var i = 0; i < datas.length; i++) {
    //     var data = datas[i];
    //     box.innerHTML += '<li>' + data + '</li>';   // 重新绘制
    //   }

    //   // box.innerHTML = box.innerHTML + '</ul>'
    //   box.innerHTML += '</ul>';  // 重新绘制
    // }
    // 
    // 
    // 优化1
    // var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    // var btn = document.getElementById('btn');
    // btn.onclick = function () {
    //   var box = document.getElementById('box');
    //   var html = '<ul>';    // 重新开辟内存 需要耗费时间

    //   // 遍历数据
    //   for (var i = 0; i < datas.length; i++) {
    //     var data = datas[i];
    //     html += '<li>' + data + '</li>';    // 因为字符串不可变 重新开辟内存 需要耗费时间
    //   }
    //   html += '</ul>';   // 因为字符串不可变 重新开辟内存 需要耗费时间

    //   box.innerHTML = html;   // 重新绘制
    // }


    // 优化2
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var box = document.getElementById('box');

      // 使用数组替代字符串拼接
      var array = [];
      array.push('<ul>');

      // 遍历数据
      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        array.push('<li>' + data + '</li>');
      }
      array.push('</ul>');   

      box.innerHTML = array.join('');  
      // 当li 生成到页面之后，再从页面上查找li 注册事件
      
    }
  </script>
</body>
</html>

element.createElement
appendChild:追加子元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">
    <div>111</div>
  </div>
  <script>
    // 在内存中创建一个DOM对象
    var p = document.createElement('p');
    // 设置对象的属性
    p.innerText = 'hello';
    p.style.color = 'red';
    // 把p元素，放到DOM树上
    var box = document.getElementById('box');
    box.appendChild(p);
  </script>
</body>
</html>

动态生成列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <div id="box"></div>

  <script src="common.js"></script>
  <script>
    var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];
    // 点击按钮 动态创建列表，鼠标放上高亮显示
    my$('btn').onclick = function () {
      // 动态创建ul，内存中创建对象
      var ul = document.createElement('ul');
      // 把ul 放到页面上    把ul放到DOM树上，并且会重新绘制
      my$('box').appendChild(ul);

      for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        // 在内存中动态创建li
        var li = document.createElement('li');
        // 把li添加到DOM树，并且会重新绘制
        ul.appendChild(li);
        // 设置li中显示的内容
        // li.innerText = data;
        setInnerText(li, data);

        // 给li注册事件
        li.onmouseover = liMouseOver;
        li.onmouseout = liMouseOut;
      }
    }
    // 当鼠标经过li的时候执行
    function liMouseOver() {
      // 鼠标经过高亮显示
      this.style.backgroundColor = 'red';
    }

    function liMouseOut() {
      // 鼠标离开取消高亮显示
      this.style.backgroundColor = '';
    }

    // 设置标签之间的内容
    // function setInnerText(element, content) {
    //   // 判断当前浏览器是否支持 innerText
    //   if (typeof element.innerText === 'string') {
    //     element.innerText = content;
    //   } else {
    //     element.textContent = content;
    //   }
    // }
  </script>
</body>
</html>

动态创建表格案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box table {
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="common.js"></script>
  <script>
    // var s = {name: 'zs', subject: '语文', score: 90};
    // 模拟数据
    var datas = [
      {name: 'zs', subject: '语文', score: 90},
      {name: 'ls', subject: '数学', score: 80},
      {name: 'ww', subject: '英语', score: 99},
      {name: 'zl', subject: '英语', score: 100},
      {name: 'xs', subject: '英语', score: 60},
      {name: 'dc', subject: '英语', score: 70}
    ];

    // 表头数据
    var headDatas = ['姓名', '科目', '成绩', '操作'];

    // 1 创建table 元素
    var table = document.createElement('table');
    my$('box').appendChild(table);
    table.border = '1px';
    table.width = '400px';

    // 2 创建表头
    var thead = document.createElement('thead');
    table.appendChild(thead);

    var tr = document.createElement('tr');
    thead.appendChild(tr);
    tr.style.height = '40px';
    tr.style.backgroundColor = 'lightgray';

    // 遍历头部数据，创建th
    for (var i = 0; i < headDatas.length; i++) {
      var th = document.createElement('th');
      tr.appendChild(th);
      // th.innerText
      setInnerText(th, headDatas[i]);
    }
    
    // 3 创建数据行
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    tbody.style.textAlign = 'center';
    for (var i = 0; i < datas.length; i++) {
      // 一个学生的成绩 {name: 'zl', subject: '英语', score: 100},
      var data = datas[i];
      tr = document.createElement('tr');
      tbody.appendChild(tr);

      // 遍历对象
      for (var key in data) {
        var td = document.createElement('td');
        tr.appendChild(td);
        setInnerText(td, data[key]);
      }
      // 生成删除对应的列
      td = document.createElement('td');
      tr.appendChild(td);
      // 删除的超链接
      var link = document.createElement('a');
      td.appendChild(link);
      link.href = 'javascript:void(0)';
      setInnerText(link, '删除');

      link.onclick = linkDelete;
    }

    function linkDelete() {
      // removeChild()
      // 获取父元素
      // 
      // 获取要删除的行
      var tr = this.parentNode.parentNode;
      tbody.removeChild(tr);
      return false;
    }
  </script>
</body>
</html>

元素操作方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>

  <ul id="sel">
    
  </ul>
  <script>
    // createElement()
    // appendChild()
    // removeChild()
    // 
    // 把元素插入到页面的指定位置
    // insertBefore()
    // 把当前元素的标签进行替换
    // replaceChild()
    // 
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var li = document.createElement('li');
      li.innerText = 'abc';

      // 把li 插入到ul中的第一个位置
       var ul = document.getElementById('ul');
       ul.insertBefore(li, ul.children[0]);
       
       
       //replaceChild()
       var div = document.createElement('div');
       div.innerText = 'div';
       var ul = document.getElementById('ul');
       ul.replaceChild(div, ul.children[0]);
       
      
      // appendChild()
      var ul = document.getElementById('ul');
      var sel = document.getElementById('sel');
      sel.appendChild(ul.children[0]);
    }
  </script>
</body>
</html>

选择水果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width:200px;
            height: 200px;
            background-color: #33cccc;
            font-size: 20px;
        }
    </style>
</head>
<body>
  <select id="all" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="select" multiple="multiple">
    
  </select>
  
  <script src="common.js"></script>
  <script>
    var all = my$('all');
    var select = my$('select');

    all.children[0].onclick = function () {
      alert('hello');
    }

    // 1 全部选择
    my$('btn1').onclick = function () {
      // 先获取子元素的个数，将来再发生变化不会受影响
      // 现在len的值始终是当前获取到的all.children.length 当前个数5
      // var len = all.children.length;
      // for (var i = 0; i < len; i++) {
      //   var option = all.children[0];
      //   select.appendChild(option);
      // }
      // 
      // 
      // 使用这种方式移动子元素的话，如果子元素有事件，移动之后元素的事件丢失
      select.innerHTML = all.innerHTML;
      // 当我们是用innerHTML 清空子元素的时候
      // 如果子元素有事件，此时会发生内存泄漏
      all.innerHTML = '';  // 清空标签之间的内容
    }

    // 3 移动选中的水果
    my$('btn3').onclick = function () {
      // 找到所有选中的option
      var array = []; // 存储选中的option
      for (var i = 0; i < all.children.length; i++) {
        var option = all.children[i];
        if (option.selected) {
          array.push(option);
          // 去掉当前option的选中效果
          option.selected = false;
        }
      }

      // 把数组中的option移动到第二个select中
      for (var i = 0; i < array.length; i++) {
        var option = array[i];
        select.appendChild(option);
      }
    }
  </script>
</body>
</html>