Java ee JavaScript WebAPI

已于 2022-05-14 10:35:48 修改
阅读量457 收藏
点赞数
分类专栏： Java ee 文章标签： javascript 前端 开发语言
于 2022-05-14 10:35:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57180439/article/details/124639115
版权

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、WebApi背景知识

1.1什么是WebApi

浏览器给JS提供的API是非常丰富的，也有很多组
比如DOM API 、BOM API…这些API都统称为WebAPI

我们主要是介绍DOM（与开发网页息息相关）

1.2什么是API

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM
所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发
在这里插入图片描述

1.3API参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API

二、DOM基本概念

2.1什么是DOM

DOM是文档对象模型，DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:
网页内容
网页结构
网页样式

2.2DOM树

一个页面的结构是一个树形结构, 称为 DOM 树
ps:树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构

示例：
在这里插入图片描述
重要概念:
文档: 一个页面就是一个 文档, 使用 document 表示.
元素: 页面中所有的标签都称为 元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 “文档对象模型”

三、获取元素

获取元素是使用DOM的基础，要想操作页面上的元素，就需要先拿到对应的JS对象

DOM中提供了一组API来让我们能够获取到网页的元素，我们这里只介绍两个最重要的
querySelector和querySelectorAll，这两个其实是一个document这样一个对象的属性

document又是我们页面中的全局对象——一个页面加载好了，就会自动生成一个全局变量，就叫作document，而这里面就有一些属性和方法，来让我们操作页面内容。

3.1querySelector

<div class="one">
        hello
    </div>
    <script>
        //querySelector参数为一个css的选择器
        let d=document.querySelector('.one');
        console.log(d);
    </script>

我们打印出来的d对象，就代表着上面的html元素
在这里插入图片描述
除了类选择器，其他选择器也可以，比如这里的id选择器

<div id="two">
        world
    </div>
    <script>
        //querySelector参数为一个css的选择器
        let i=document.querySelector('#two');//#表示id选择器
        console.log(i);
    </script>

在这里插入图片描述

复合选择器也是一样可以生效的

<ul>
        <li>
            aaa
        </li>
    </ul>
    <script>
        //querySelector参数为一个css的选择器
        let obj=document.querySelector('ul li');//通过后代选择器进行选中
        console.log(obj);
    </script>

在这里插入图片描述

3.2querySelectorAll

如果querySelector的参数的选择器，匹配到多个元素的时候，此时返回的对象，就是匹配结果的第一个元素，比如

<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <script>
        let obj=document.querySelector('ul li');//通过后代选择器进行选中
        console.log(obj);
    </script>

在这里插入图片描述
遇到这种情况怎么办？
如果我们想把这些li都选中，就需要使用querySelectorAll
querySelectorAll和querySelector用法非常相似，但是querySelectorAll返回的是一个数组，数组中包含所有被选中的元素

<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <script>
        let obj=document.querySelectorAll('ul li');//通过后代选择器进行选中
        console.log(obj);
    </script>

在这里插入图片描述
准确的说，querySelectorAll返回的不是一个真正的原生数组，而是一个对象，只不过这个对象，有length，也能够通过下标的方式来访问内部元素。这样的对象使用起来和数组非常相似（一模一样），又称为伪数组

四、事件初识

4.1基本概念

JS中的很多代码，都是通过事件来触发的，事件就是浏览器对于用户的操作行为进行的一个“统称”，准确的说，事件也不一定全是用户操作产生的，但是大部分是。

比如我鼠标在网页里面移动，就会产生一个鼠标移动事件

比如我鼠标在某个地方进行点击，就会产生鼠标点击事件

再比如我鼠标滚轮，滚动时，就会产生一组滚动事件
…

4.2事件三要素

1.事件源
是哪个HTML元素产生的事件
2.事件类型
鼠标移动、鼠标点击、键盘事件、窗口大小改变事件。。。
3.事件的处理程序
当事件产生后，执行什么样的JS代码

4.3简单示例

<button>我是一个按钮</button>
    <script>
      let button=document.querySelector('button');//选择这个按钮
      button.onclick=function(){//当点击到这个按钮时，就会触发function
        alert('hello');
      }
    </script>

在这里插入图片描述

在这里插入图片描述
点击这个按钮
在这里插入图片描述

五、操作元素

操作=获取+修改

5.1获取/修改元素内容

5.1.1innerText

5.1.2innerHTML

innerHTML表示元素里面包含的html代码是什么样的
获取内容

示例1：

<div id="screen">hello World</div>
    <button id="btn">我是一个按钮</button>
    <script>
      let btn=document.querySelector('#btn');
      btn.onclick=function(){
          let screen=document.querySelector('#screen');
          console.log(screen.innerHTML);
      }
    </script>

在这里插入图片描述
示例2：

<div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>
    <button id="btn">我是一个按钮</button>
    <script>
      let btn=document.querySelector('#btn');
      btn.onclick=function(){
          let screen=document.querySelector('#screen');
          console.log(screen.innerHTML);
      }
    </script>

在这里插入图片描述
修改内容

示例1：

<div id="screen">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>
    <button id="btn">我是获取内容按钮</button>
    <button id="btn2">我是修改内容按钮</button>
    <script>
      let btn=document.querySelector('#btn');
      btn.onclick=function(){
          let screen=document.querySelector('#screen');
          console.log(screen.innerHTML);
      }

      let btn2=document.querySelector('#btn2');
      bt2.onclick=function(){
          let screen=document.querySelector('#screen');
          screen.innerHTML='<h1>修改后的内容</h1>';
      }
    </script>

初始页面：
在这里插入图片描述
点一下第一个按钮
在这里插入图片描述
点一下第二个按钮
在这里插入图片描述
示例2：
现写一个简单的自增按钮

<div id="screen">0</div>
    <button id="plus">+</button>
    <script>
      let PlusBtn=document.querySelector('#plus');
      PlusBtn.onclick=function(){
          //1.获取screen里面的值
          let screen=document.querySelector('#screen');
          let val=screen.innerHTML;
          //默认val是字符串类型，你要把它转换成整形
          val=parseInt(val);
          //由于js是动态类型，转换成数字后仍然可以赋值给val，
          //这样就val就从String变成了number类型
         
          //2.把这个值+1
          val+=1;
         
          //3.把新得到的值重写回screen里面
          screen.innerHTML=val;
      }
    </script>

初始状态
在这里插入图片描述
点一下加号
在这里插入图片描述
这里你也可以继续点下去，每次会实现一次自增操作，我这里不再演示。

5.2获取/修改元素属性

<!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>Document</title>
</head>
<body>
    <img src="sxc.jpg" alt="">
    <script>
        let img=document.querySelector('img');
        img.onclick=function(){
            console.log(img.src);
        }
    </script>
</body>
</html>

比如说现在我们选中了孙笑川这张图片，页面效果如下
在这里插入图片描述
当我们点一下这个图片，控制台就会显示这个图片的绝对路径
（写的是相对路径，但是浏览器解析是绝对路径）
在这里插入图片描述

如果想要修改元素属性

<img src="sxc.jpg" alt="">
    <script>
        let img=document.querySelector('img');
        img.onclick=function(){
            console.log(img.src);
            if(img.src.indexOf('sxc.jpg')>=0){
                img.src='sxc2.jpg';
            }else if(img.src.indexOf('sxc2.jpg')>0){
                img.src='sxc2.jpg';
            }
        }
    </script>

原先页面
在这里插入图片描述
点击一下图片
在这里插入图片描述
再点一下，会发现属性也变化了
在这里插入图片描述

操作元素属性，可以通过dom对象.属性名 就可以进行操作了
一个HTML标签里，能写哪些属性，就同样可以通过JS中的DOM对象来获取到一样的属性。

可以通过console.dir这个方法，来打印出一个dom对象的全部属性和值

<img src="sxc.jpg" alt="">
    <script>
        let img=document.querySelector('img');
        img.onclick=function(){
            console.dir(img);
        }
    </script>

点一下图片就可以在控制台看到图片的所有属性
在这里插入图片描述

5.3获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改
下面都是我们表单专有的属性：
在这里插入图片描述
示例1：value
比如我们这里实现一个简单的 播放/暂停按钮

<input type="button" value="播放">
    <script>
        let input=document.querySelector('input');
        input.onclick=function(){
            if(input.value=='播放'){
                input.value='暂停';
            }else if(input.value=='暂停'){
                input.value='播放'
            }
        }
    </script>

初始页面
在这里插入图片描述
点击一下按钮
在这里插入图片描述

示例2：checked
全选/取消全选按钮

  1. 点击全选按钮, 则选中所有选项
  2. 只要某个选项取消, 则自动取消全选按钮的勾选状态
<input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">貂蝉 <br>
<input type="checkbox" class="girl">小乔 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>
<script>
    // 1. 获取到元素
    var all = document.querySelector('#all');
    var girls = document.querySelectorAll('.girl');
    // 2. 给 all 注册点击事件, 选中/取消所有选项
    all.onclick = function () {
        for (var i = 0; i < girls.length; i++) {
            girls[i].checked = all.checked;
       }
   }
    // 3. 给 girl 注册点击事件
    for (var i = 0; i < girls.length; i++) {
        girls[i].onclick = function () {
            // 检测当前是不是所有的 girl 都被选中了. 
            all.checked = checkGirls(girls);
       }
   }
    // 4. 实现 checkGirls
    function checkGirls(girls) {
        for (var i = 0; i < girls.length; i++) {
            if (!girls[i].checked) {
                // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)
                return false;
           }
       }
        // 所有 girl 中都没找到反例, 结果就是全选中
        return true;
   }
</script>

初始页面
在这里插入图片描述
点击“貂蝉”，只选中貂蝉
在这里插入图片描述
点“我全都要”，全部选中
在这里插入图片描述
再点一下“我全都要”，全部取消选中
在这里插入图片描述

5.4获取/修改样式属性

操作元素样式，本质上也是操作元素属性
1.style对应行内样式（直接把样式写到style里面）
2.className/classList对应内部样式/外部样式，应用了一个/一组CSS类名

5.4.1行内样式操作

比如我们现在弄一个“点击就放大字体”

<div style="font-size:20px">我是一个文本</div>
    <!-- css里面不区分大小写，我们一般不用驼峰 -->
    <script>
        let div=document.querySelector('div');
        div.onclick=function(){
            //1.先获取当前字体的大小
            console.log(parseInt(div.style.fontSize))//JS不能支持font-size这种写法，我们用驼峰
            //我们直接得到的fontSize是一个字符串，如果想进行相加操作，要把它转成整数
            //转换过程为'20px'->20，parseInt转换的时候，是从头往后进行转换，如果遇到非数字字符，就会停止转换
            
            //2.在当前字体大小的基础上，多增加5px
            let fontSize=parseInt(div.style.fontSize);
            fontSize+=5;
            div.style.fontSize=fontSize+'px';
            // 如果要修改CSS属性，一定要注意单位，如果单位不合适/遗漏，你修改的就没有用
        }
    </script>

初始页面
在这里插入图片描述
点一下文字
在这里插入图片描述
再点一下
在这里插入图片描述
字体在随着点击不断变大

5.4.2类名样式操作

在HTML中表示类名的属性是class

但是在JS中，属性名变成了className/classList

为什么不直接使用class这个名字呢？
class在JS中也是一个关键字，我们肯定不能把关键字当作属性名
（JS ES6版本以上，也引入了类这个概念）

如果要修改的样式比较多，通过style来修改就麻烦了
我们可以直接借助CSS类来修改，直接修改类名就可以达到所需效果。

我们来实现一个“关灯开灯”，比如原先是黑色背景，点一下变成白色背景

<style>
        .light{
            background-color: #fff;
            /* 白色 */
            color: #000;
             /*黑色  */
        }
        .dark{
            background-color: #000;
            /* 黑色 */
            color: #fff;
             /*白色  */
        }
    </style>
    <div class="light" style="height: 500px">我是一段话</div>
    <button>关灯</button>

    <script>
        let div=document.querySelector('div');
        let button=document.querySelector('button');
        button.onclick=function(){
            if(div.className=='light'){
                div.className='dark';
                button.innerHTML='开灯';
            }else if(div.className=='dark'){
                div.className='light';
                button.innerHTML='关灯';
            }
            
        
        }
    </script>

初始页面
在这里插入图片描述
点一下关灯
在这里插入图片描述

六、操作节点

6.1新增节点

1.创建元素节点

<div class="containner">

    </div>
    <script>
        let newDiv=document.createElement('div');//创建一个新的div标签
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);
    </script>

直接用这样的代码，新节点虽然可以创建，但是页面上是啥也显示不出来的
在这里插入图片描述

原因是你没有把新节点放到dom树上

2.插入节点到dom树中
如何把节点放到dom树上呢？
用appendChild把节点插入到某个节点的子元素中

 <div class="container">
<!-- 原先div里啥也没 -->
    </div>
    <script>
        let newDiv=document.createElement('div');//创建一个新的div标签
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);

        let container=document.querySelector('.container');
        container.appendChild(newDiv);
    </script>

在这里插入图片描述

6.2删除节点

通过removeChild方法来实现
需要先拿到父节点，然后再拿到待删除的子节点
通过removeChild就可以进行删除

<div class="container">
    <!-- 原先div里啥也没 -->
    </div>

    <button>点我进行删除div</button>
    <script>
        let newDiv=document.createElement('div');//创建一个新的div标签
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);

        let container=document.querySelector('.container');
        container.appendChild(newDiv);

        let button=document.querySelector('button');
        button.onclick=function(){
            container.removeChild(newDiv);
        }
    </script>

初始页面
在这里插入图片描述
点一下按钮
在这里插入图片描述

七、代码案例：猜数字

7.1预期效果

在这里插入图片描述

7.2代码实现

<button id="resetBtn">重新开始一局游戏</button><br>
     <span>你猜的数字为：</span>
     <input type="text">
     <button id="guessBtn">猜</button><br>
     <span>结果：</span> <span id="result"></span><br>
     <span>你已经猜的次数：</span> <span id="guessCount">0</span>

     <script>
         //1.先把上面需要用到的元素都拿到
         let resetBtn=document.querySelector('#resetBtn');
         let input=document.querySelector('input');
         let guessBtn=document.querySelector('#guessBtn');
         let resultSpan=document.querySelector('#result');
         let guessCountSpan=document.querySelector('#guessCount');

         //2.生成一个1-100的随机整数
         let toGuess=Math.floor(Math.random()*100+1);
         //Math.random()直接生成的是[0，1）之间的小数
         //Math.floor可以实现小数向下取整,我们这取整后加1，保证范围还是[1,100)
         console.log(toGuess);
         //如果想生成1-100，你就*100就行

         //3.实现点击"猜”按钮的逻辑
         guessBtn.onclick=function(){
             //3.1读取到Input中输入的内容，并转成整数
             if(input.value==''){
                 return;
             }
             let curNum=parseInt(input.value);
             //3.2判断大小关系并给出提示
             if(curNum<toGuess){
                 resultSpan.innerHTML='你猜小了';
                 resultSpan.style.color='red';
             }else if(curNum>toGuess){
                resultSpan.innerHTML='你猜大了';
             }else{
                 resultSpan.innerHTML='你猜对了我的宝！';
             }
             //3.3更新猜的次数
             let guessCount=parseInt(guessCountSpan.innerHTML);
             guessCountSpan.innerHTML=guessCount+1;
         }
         //4.实现reset操作的逻辑（开始新游戏）
         resetBtn.onclick=function(){
             //让页面刷新即可
             //location是和document 并列关系的对象
             location.reload();//location是用来控制页面的链接/地址的
             //通过reload进行刷新
         }
     </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

八、代码案例：表白墙

8.1预期效果

在这里插入图片描述

8.2代码示例

<!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>表白墙</title>
</head>
<body>  
     

     <style>
         *{
             margin:0;
             padding:0;
             box-sizing: border-box;
         }

         .container{
             width: 100%;
         }

         h3{
             text-align: center;
             padding: 20px 0;
         }

         p{
            text-align: center;
            color:#666; 
            padding: 10px 0;
         }

         .row{
             width: 400px;
             height:50px;
             margin: 0 auto;
             display: flex;
             /* 弹性布局 */
             justify-content: center;
             align-items: center;
             /* 水平居中 和垂直居中*/
         }

         .row span{
             width: 60px;
         }

         .row input{
             width: 300px;
             height: 40px;
             line-height: 40px;
             font-size: 20px;
             text-indent: 1em;
         }

         .row #submit{
             width: 200px;
             height: 50px;
             font-size: 20px;
             line-height: 40px;
             margin: 0 auto;
             color:white;
             background-color: orange;
             border: none;
             /* 去掉边框 */
             border-radius: 10px;
             /* 10px的圆角矩形 */
         }

         .row #submit:active{
             background-color: gray;
             /* 点击按钮后背景颜色改变 */
         }
         
     </style>
     <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交按钮，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
       </div>
   
       <div class="row">
           <span>对谁：</span>
           <input type="text">
       </div>
   
       <div class="row">
           <span>说：</span>
           <input type="text">
       </div>
   
       <div class="row">
           <button id="submit">点击提交</button>
       </div>
     </div>
     <script>
       //当用户点击submit按钮，就会获取input中的内容，从而把内容构造成一个div，插入到页面末尾
       let submitBtn=document.querySelector('#submit');
       submitBtn.onclick=function(){
           //1.获取三个input内容
           let inputs=document.querySelectorAll('input');
           let from =inputs[0].value;
           let to=inputs[1].value;
           let msg=inputs[2].value;
           if(from==''||to==''||msg==''){
               //用户还没填写完，暂时不提及数据
               return;
           }
           //2.生成一个新的div，内容就是input里面的内容，把这个新的div加到页面中
           let div=document.createElement('div');
           div.innerHTML=from+'对'+to+'说'+msg;
           div.className='row';
           let container=document.querySelector('.container')
           container.appendChild(div);
           //3.清空之前输入框的内容
           for(let i=0;i<inputs.length;i++){
               inputs[i].value='';
           }
       }
     </script>
</body>
</html>

初始页面：
在这里插入图片描述
输入点东西：
在这里插入图片描述
点击按钮
在这里插入图片描述
在这里插入图片描述

劲夫学编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Spring 下Web API　接口的发布和客户端访问
u013002905的博客
05-11 1791
1.增加实例化bean的class类 import java.io.IOException; import javax.servlet.GenericServlet; import javax.servlet.Servlet; import javax.servlet.ServletException; import javax.servlet.Servl...
JavaWeb开发最全API
07-27
Java最全API，包括J2SE/J2EE/UI插件/框架/线程/Ajax/HTML/CSS/JavaScript/jQury/JSTL/DTML/Windows/Servlet+JSP/W3School全套 本人收集许久的资源，于此友情分享，由于原文件七八百兆太大无法上传，在此私密分享至百度云盘，地址及密码均写入txt文件中，下载即可见。诚信无价，愿你生活更美好。
java WEB api
01-15
java WEB api
JAVA-WEB整套开发文档API
10-08
JAVA-WEB开发整套API文档，包括前后端框架等；ajax教程，CSS4.0中文参考手册；DHTML_DOC_CN；JSP API；Linux常用命令大全；Struts2
Java Web开发最全帮助文档API
09-12
Java web 开发中可能会用到的API，包括JDK中文参考手册、J2EE、JavaScript、MyBatis中文版、HTML/HTML5、CSS 2.0/3.0、jQuery 1.3-1.10（若干）
java_ee_api_中英文对照版.zip（免费下载）
06-13
Java EE（Enterprise Edition）是Java平台上用于构建企业级应用程序的标准框架和API集合。这个压缩包“java_ee_api_中英文对照版.zip”提供了一份中英文对照的Java EE API文档，方便开发者在学习和开发过程中查阅。...
java web api
04-21
Java Web API是Java技术在Web开发中的一个重要组成部分，它提供了丰富的接口和类库，使得开发者可以构建复杂的Web应用程序。在Java Web API中，主要涵盖了Servlet、JSP（JavaServer Pages）、JSTL（JavaServer Pages...
java ee 1.5 1.6 api
06-10
5. **AJAX支持**：虽然不是Java EE 1.5/1.6的一部分，但这些版本已经能够很好地与JavaScript库结合，实现异步数据交互。 Java EE 1.5/1.6还包含EJB（Enterprise JavaBeans），提供了业务逻辑组件的模型。EJB 3.0在...
Java EE网络API.pdf
07-01
【Java EE网络API】是Java企业版中用于构建网络服务和Web应用程序的重要组成部分。这个PDF文档可能是关于如何理解和使用这些API的教程资料，适合个人学习。文档提到了几个关键概念和API，包括XML解析、JSON处理、JAX...
javawebAPI汇总
03-29
这是我从各个培训机构汇总并整理后的api,涵盖了javaEE学习所需要的所有的api,方便读者学习时再也不用为找文档苦恼了!~
javaweb开发常用api文档合集
12-06
好东西一起分享，增进技术能力，不断加强学习，这是当初从传智播客学校分享的文档
java调用webapi
10-10
java调用webapi的包，里面有挺多有一些相应的example，可以提供参考
java web API文档
09-25
java web API文档大全：包括servlet、jsp、struts、spring、hibernate等
JAVA调用webApi完整jar包 httpclient 等等
08-11
java调用.NET webAPI httpclient-4.2.5.jar httpclient-cache-4.2.5.jar httpcore-4.2.4.jar httpmime-4.2.5.jar fluent-hc-4.2.5.jar commons-codec-1.6.jar
【Web】JavaScript——进阶篇WebAPI
DerrickWestbrook的博客
02-11 926
【Web】JavaScript——基础语法入门篇什么是 WebAPI什么是 DOMDOM 树获取元素querySelectorquerySelectorAll事件初识基本概念事件三要素 什么是 WebAPI 前面学习的 JS 分成三个大的部分 ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI 就包含了 DOM + BOM. API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM 所谓的 API 本质上
java webapi 框架_基于SpringBoot的WebAPI开发框架（一）
weixin_26706567的博客
02-19 1707
笔者团队以前后台都是基于.Net和.NetCore, 今年转Java了，不是.Net相关技术不好，而是在中小城市相关开发人员缺乏，Java相对来说开发人员要丰富很多。后台有必要重新搭建一个内部的开发框架，由于没有历史积累，直接使用SpringBoot作为基础框架，在此之上再做一个封装。分享出来给大家参考，此框架适应于中小企业Java实现的WebAPI项目(前后端分离)。大家可以直接使用，但是最好还...
JAVA开发第一个Springboot WebApi项目
最新发布
技术分享博客，工作经验，技能学习分享（多做一些不会的，会有意向不到的收获，IT高手不可能永远只做会的）
03-06 1605
JAVA开发第一个Springboot WebApi项目
【JavaEE】JavaScript（WebAPI）
Xian meng在努力呐-的博客
12-02 900
1. dom获取/操作元素以及操作节点 2. 事件 3. 实例
JavaWeb-JS（WebAPI）
weixin_53860901的博客
03-15 1902
前言 这一部分是关于WebAPI的部分，我们上一篇博客说过，JS总共有三部分 1.ECMAScript:基础语法部分 2.DOM API：操作页面结构 3.BOM API：操作浏览器 我们的WebAPI部分就包括了DOM + BOM。 这里给出手册参考地址： WebAPI接口参考 一丶关于DOM + 事件初识 DOM全称为Document Object Model。 一个页面结构就是一个多子树结构，每一个节点都抽象为一个页面文档的对象。 这里有几个重要概念需要进行说明： 文档: 一个页面就是一个 文档
精通Java EE 7数字Web应用开发
"Digital Java EE 7 Web Application Development 涵盖了Java EE 7平台在构建现代Web...书中通过深入浅出的讲解，帮助读者掌握Java EE 7的核心技术，并了解如何结合JavaScript和其他前端技术，构建高质量的Web应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

劲夫学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值