Web API学习笔记(二)

Java追求者

于 2020-06-02 12:25:23 发布

阅读量247

点赞数

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

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

版权

前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.样式操作
使用style方式设置的样式显示在标签行内
开关灯案例
common.js

function my$(id) {
  return document.getElementById(id);
}

// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 处理浏览器兼容性
// 获取下一个兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

<!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>

隐藏显示二维码案例
当鼠标移入 onmouseover
当鼠标移出 onmouseout

<!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的索引
            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  文档对象模拟
 常见的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()

2.创建元素的三种方式
document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

3.节点操作
节点属性
nodeType 节点的类型
1元素节点
2属性节点
3文本节点
nodeName节点的名称(标签名称)
nodeValue节点值
元素节点的nodeValue始终是null

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">
    <span>span</span>
    <p>p标签</p>
    <!-- 这里是注释 -->
  </div>
</body>
</html>

parentNode 父节点

  var box = document.getElementById('box');
     //console.dir(box.parentNode);
     console.log(box.parentNode);

在这里插入图片描述
childNodes所有的子节点
属性节点、元素节点、文本节点、注释节点

var box = document.getElementById('box');
console.log(box.childNodes);

在这里插入图片描述
children所有的子元素

var box = document.getElementById('box');
 console.log(box.children);  // 所有的子元素

在这里插入图片描述
隔行换色案例

<!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>

  <div>
    <p></p>
    <div></div>
    <span></span>
  </div>
  <script>
    var mv = document.getElementById('mv');

    // mv.getElementsByTagName('li');

    // mv.childNodes  所有子节点
    // mv.children    所有的子元素
    // 判断是否有子节点
    if (mv.hasChildNodes()) {
      for (var i = 0; i < mv.children.length; i++) {
        var li = mv.children[i];
        if (i % 2 === 0) {
          // 奇数行
          li.style.backgroundColor = 'red';
        } else {
          // 偶数行
          li.style.backgroundColor = 'green';
        }
      }
    }
  </script>
</body>
</html>

第一个子节点和最后一个子节点案例
firstChild 获取第一个子节点
firstElementChild 获取第一个子元素，有兼容性问题，从IE9以后支持
lastChild 获取最后一个子节点
lastElementChild 获取最后一个子元素，有兼容性问题，从IE9以后支持

<a>123</a>
<a>元素
123文本节点
而“ ”也算文本节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">
    <div>这是一个广告图片</div>
    <ul>
      <li>这是一个列表</li>
    </ul>
    <span>说明性文字</span>
  </div>

  <script>
    // box.firstChild   获取第一个子节点
    // box.firstElementChild    获取第一个子元素， 有兼容性问题，从IE9以后支持
    // 
    // box.lastChild    获取最后一个子节点
    // box.lastElementChild     获取最后一个子元素， 有兼容性问题，从IE9以后支持
    var box = document.getElementById('box');
    // console.log(box.firstChild);

    // console.log(box.firstElementChild);


    var ele = getFirstElementChild(box);
    console.log(ele);

    // 处理浏览器兼容性
    function getFirstElementChild(element) {
        var node, nodes = element.childNodes, i = 0;
        while (node = nodes[i++]) {
            if (node.nodeType === 1) {
                return node;
            }
        }
        return null;
    }
  </script>
</body>
</html>

菜单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #menu ul li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color:beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #menu ul li.current {
            background-color: burlywood;
        }

        #menu ul li a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li class="current"><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:undefined">播客</a></li>
            <li><a href="javascript:void(0)">博客</a></li>
            <li><a href="javascript:void(0)">相册</a></li>
            <li><a href="javascript:void(0)">关于</a></li>
            <li><a href="javascript:void(0)">帮助</a></li>
        </ul>
    </div>

    <script src="common.js"></script>
    <script>
      // void 是运算符   
      // 执行void后面的表达式，并始终返回undefined
      
      var menu = my$('menu');
      // 获取menu中的ul
      var ul = getFirstElementChild(menu);

      for (var i = 0; i < ul.children.length; i++) {
        var li = ul.children[i];
        // 获取li中的a标签
        var link = getFirstElementChild(li);
        // 注意：此时是把函数赋给onclick 而不是函数的调用
        link.onclick = linkClick;
      }

      function linkClick() {
         // 所有的li取消高亮显示 
         for (var i = 0; i < ul.children.length; i++) {
           var li = ul.children[i];
           li.className = '';
         }

        // 让当前a标签所在的li高亮显示
        // 
        // this是当前点击的a标签对应的元素
        this.parentNode.className = 'current';

        // 取消后续内容的执行
        return false;
      }

      // ele.firstChild  
      // ele.firstElementChild

    </script>
</body>
</html>

兄弟节点案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">
    <div>这是一个区域1</div>
    <div>这是一个区域2</div>
    <div id="c3">这是一个区域3</div>
    <div>这是一个区域4</div>
    <div>这是一个区域5</div>
  </div>
  <script>
    var c3 = document.getElementById('c3');

    // nextSibling  下一个兄弟节点
    // nextElementSibling   下一个兄弟元素
    // 
    // previousSibling   上一个兄弟节点
    // previousElementSibling    上一个兄弟元素
     console.log(c3.nextSibling);
     console.log(c3.previousSibling);
    // 
     console.log(c3.nextElementSibling);
     console.log(c3.previousElementSibling);


    console.log(getNextElementSibling(c3));
    // 获取下一个兄弟元素
   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }
  </script>
</body>
</html>