Web API学习笔记(二)

最新推荐文章于 2024-03-27 08:30:14 发布
最新推荐文章于 2024-03-27 08:30:14 发布
阅读量241 收藏 1
点赞数
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/106426934
版权

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>
Java追求者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端JS学习笔记——Web API简介
zerocean_的博客
03-11 1541
JS的组成 Web APIs是W3C的标准，属于JS独有的部分，这部分内容主要学习页面的交互 那么Web API和APi又有什么不同呢？ APl（Application Programming Interface，.应用程序程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。 Web API很多都是方法（函数），一般都有
Asp.NETCore WebAPI学习笔记汇总.rar
04-07
ASP.NET Core Web API 学习笔记汇总.pdf 是一个聚焦于使用ASP.NET Core构建Web API的资源集合。ASP.NET Core是一个由微软开发的现代化、高性能、开源的框架，它旨在为开发者提供构建各种类型的应用程序的能力，包括...
VS2017创建WebAPI分层项目(3)——WebAPI层创建
renaway的博客
02-25 6145
从这一层开始我们开始不再创建.Framework类库项目，而是WebAPI项目。 右键解决方案名，添加WebAPI项目: 生成好后，将Model层中App.config的连接字符串加到Web.config中，将Model层中App.config的连接字符串加到Web.config中， 将Model层中App.config的连接字符串加到Web.config中，重说三！ 然后，用Nu...
ASP.NET Core Web API 学习笔记
yuyu的博客
12-14 360
ASP.NET Core Web API 学习笔记
Web API 学习笔记 - fetch
灵台方寸山斜月三星洞
08-03 1321
Web API 接口 - 学习笔记【fetch】取 json取 text参考资料 取 json fetch('https://voice.baidu.com/act/newpneumonia/newpneumonia/') .then(response=>response.json()) .then(json=> console.log(json)); 取 text Body.text() fetch('https://voice.baidu.com/act/newpneumonia/newp
Web API学习笔记（二）—— 基本WebApi架构配置详解
weixin_45724919的博客
09-02 1279
Host 提供了使用预先配置的默认值创建 IHostBuilder 实例的方便方法。
Restful和WeBAPI学习笔记
liudanyang_21的博客
06-24 1505
1、restful是基于无状态的,所谓无状态就是说客户端和服务端的每次通话都是独立的,不存在session和cookie之类的保存状态的机制,基于该协议可实现简单的curd操作, 其操作分为get\post\delete\add等，说白了restful指的是一组架构约束条件和原则对安全性要求不高,如果实现较复杂的逻辑推荐使用web service.数据通信默认采用json格式传输,通信方式可以基于ajax,webform,当然服务端取值方式也会不一样. 2asp.net mvc中的webapi也是基于res
WebAPI学习开发总结
Draco_1989的博客
08-25 1029
webapi、VS2019、接口调用
Web API学习笔记（六）——路由（Routing）
weixin_45724919的博客
09-05 1665
1.路由是将传入http请求（URL）映射到特定资源的过程（a action method）。2.我们可以使用唯一的URL访问任何的资源。3.一个资源可以有多个唯一的URL。4.多个资源不能具有相同的URL。
接口开发笔记-WebApi
weixin_63658665的博客
03-27 2697
记录了weiapi学习过程中的一些基本操作
Web API学习笔记（四）——添加一个控制器类(Controller class)
weixin_45724919的博客
09-05 1499
也就是说这个请求匹配了多个端点（endpoint）,他分不清请求的这个端，是Get方法还是Get1方法，每个端只能对应一个方法。HTTP 500错误，全称为HTTP 500 Internal Server Error，即HTTP 500内部服务器错误。ContrllerBsse 类中we提供了很多方法和属性去处理HTTP请求。3.多部分（Multipart）/表单数据（form-data）请求推断。还可以直接使用方法名称来获取端点，请求Http。如果再添加一个Get1方法，如下代码所示。
Web Service学习笔记
03-01
在本学习笔记中，我们将深入探讨Web服务的核心概念、技术栈以及实际案例。 一、Web服务的核心概念 1. **SOAP (Simple Object Access Protocol)**：SOAP是一种基于XML的协议，用于交换结构化信息，是Web服务的基础...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
JAVA WEB学习笔记
08-02
【JAVA WEB学习笔记】 Java Web是Java技术在Web开发领域中的应用，涵盖了从服务器端编程到客户端交互的各种技术。这份学习笔记将带你深入理解Java Web的核心概念和实践技巧。 1. **Servlet与JSP** - Servlet是...
Asp.NET Core WebAPI 入门学习笔记，超详细
04-07
WebAPI 是一种传统的方式，用于构建和暴露 RESTUI风格的Web服务。它提供了丰富的功能和灵活性，可以处理各种HTTP请求，并支持各种数据格式，如JSON、XML等。 WebAPI使用控制器(Controllers)和动作方法(ActionMethods...
骨折多区域X线图片资料数据集
08-02
骨折多区域X线图片资料数据集 数据说明： 该数据集包含10，580张射线图像(X射线)数据。 培训数据 图片数量:9246 验证数据 图片数量:828 测试数据 图片数量:506
[毕业设计]JAVA实现的局域网监听与审计系统(源代码+论文).zip
08-02
[毕业设计]JAVA实现的局域网监听与审计系统(源代码+论文)
Kimsuky 的⽹络钓⻥有效载荷战术中文版.pdf
最新发布
08-02
Kimsuky 的⽹络钓⻥有效载荷战术中文版.pdf
javaweb大作业《基于jsp和servlet的javaweb的蛋糕店售卖网站》+源代码+文档说明
08-02
<项目介绍> - 前台功能 1.商品基本展示,包括推荐商品展示和类型商品展示. 2.推荐商品包括条幅推荐,热销推荐和新品推荐. 3.按照商品类型展示商品. 4.商品详细信息展示. 5.商品加入购物车. 6.修改购物车内商品信息,例如数量等. 6.用户登录. 7.用户注册. 8.修改个人信息,包括密码和收获信息. 9.购物车付款. 等等 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值