WebApis- BOM&DOM

已于 2022-03-12 13:49:42 修改
阅读量229 收藏
点赞数 1
文章标签： javascript 前端 html5
于 2022-03-01 20:34:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sycVegetableDog/article/details/123152136
版权

是W3C的标准，主要学习页面交互功能实现交互效果；

API是一些预先定义的函数，简单理解就是给程序员提供的一种工具，以便能轻松的实现想要完成的功能；

Web APIs是浏览器的API；

DOM

在这里插入图片描述

文档对象模型，是处理html或者xml的编程接口；可以通过里面的接口修改网页内容，样式，结构；

  1. 文档：一个文档就是一个页面，DOM中使用document表示；
  2. 元素：页面中所有的标签就是元素；
  3. 节点：网页中所有的内容都是节点，比如标签，内容，文本，注释等。

获取元素

  1. 根据id获取：
    使用getElementByld（）获取，因为文档页面从上往下加载，所以要先有标签 所以我们script写在标签下面；
var timer =document.getElementById('time');
  console.log(timer);
  console.log(typeof timer);//这里返回值是对象object
  console.dir(timer)//它是用来打印我们返回的元素对象，更好地查看里面的属性和方法；

  1. 根据标签名获取：
    使用getElementByTagName（）方法可以获取指定标签名的对象的集合；
    返回对象是获取过来的元素对象的集合，以伪数组的形式存储的；
    如果页面中没有元素，返回的是空的伪数组；

  2. 通过HTML5新增方法获取：
    （1） getElementsByClassName（‘这里面填class的名字’）；根据类名返回元素集合；
    （2）querySelector（‘.box’/‘#nav’/‘li’）：只能返回指定选择器的第一个元素对象；这里切记里面的选择器前面需要加符号；
    （3）querySelectorAll（）：返回的是指定选择器的所有元素对象集合，还是伪数组的形式；这里也要注意选择器前面需要加符号；

  3. 特殊元素获取：
    （1）获取body元素： var bodyEle = document.body;
    （2）获取html元素： document.documentElement;

事件基础

  1. 就是js里面的触发机制；
    事件由三部分组成：事件源，事件类型和事件处理程序；
    事件源：事件被触发的对象；
    事件类型：如何触发；
    事件处理程序：通过函数赋值的方式触发；
<body>
<button id="btn">syc</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick= function (){
        alert('超棒！')；
    }
</script>
  1. 执行事件的步骤：
    获得事件源----注册事件（绑定事件）----添加事件处理程序（采取函数赋值形式）
<body>
<div>123</div>
<script>
  //1 获取事件源
  var div =document.querySelector('div');
  //2-绑定事件
  div.onclick;
  //3-添加事件处理程序
  div.onclick=function (){
    alert('我被选中了')
  }
</script>

</body>

操作元素（核心）

改变元素内容

  1. element.innerText;不识别html标签；非标准
  2. element. innerHtml；识别html标签；W3C标准；保留空格和换行；

常用元素的属性操作

<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="images/ldh.jpeg" alt="">
<script>
  //修改元素属性 src
  //1-获取元素
  var ldh = document.getElementById('ldh');
  var zxy = document.getElementById('zxy');
  var img = document.querySelector('img');
  //2-注册事件
  zxy.onclick=function (){
      img.src='images/zxy.jpeg';
  }
</script>

</body>

表单元素的属性操作

type,value,checked,selected,disable;

下面展示的是value属性和disabled的用法：

<body>
<button>点这里</button>
<input type="text" value="输入内容">
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick =function(){
        input.value='被点击啦';
        //想要某个表单被禁用 不能再点击 用disabled
        btn.disabled=true;
        //和下面这种结果是一样的：
        this.disabled=true;
        //this指向的是这个函数的调用者 在这里就是btn；
    }
</script>
</body>

样式属性操作

  1. element.style :行内样式操作；
  2. element.className：类名样式操作；
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
<div></div>
<script>
  var div=document.querySelector('div');
  div.onclick=function (){
    //div里面的属性采取驼峰命名法
    div.style.backgroundColor='purple';
    div.style.width='400px';
  }
</script>
</body>
淘宝二维码关闭案例

display.none;隐藏
display.block；显示

显示隐藏文本内容

首先表单需要两个事件：
获得焦点onfocus
失去焦点 onblur

节点操作

BOM

操作元素

样式操作

之前讲到，如果样式比较少，或者功能比较简单用element.style修改外观样式：

  1. 获取元素：var xxx= document.queryselector（）；
  2. 触发动作：这里有很多触发动作的比如onclick（），注意后面要用function实现；

类名样式操作

this.className = ’ 类名 ’

var ipt =document.querySelector('.ipt')
  var message = document.querySelector('.message')
  ipt.onblur= function (){
    if(ipt.value.length<6||ipt.value.length>16){
      console.log('wrong');
      message.className='wrong'
      message.innerHTML='位数不对';
    }
  }

排他思想

就是用到了双层循环；首先先排除所有人，然后再设置自己的样式；

  <script>
    //获取所有按钮
    var btns = document.querySelectorAll('button');
    //btn得到的是伪数组，这里遍历每一个button
    for (var i=0;i<btns.length;i++){
      btns[i].onclick=function (){
          //2。所以可以在这里先让所有的背景颜色清空
          for (i=0;i<btns.length;i++){
              btns[i].style.backgroundColor='';
          }
        this.style.backgroundColor='pink';//1。但是这里循环内部累计了，都变粉色了
  }
    }

  </script>
获得/设置/移除属性
  1. getAttribute（属性）；是主要获得自定义的属性；
  2. element.属性；获得内置属性值（元素本身自带的属性）；

设置：

  1. element.属性=值
  2. setAttribute（属性，值）

移除

1 . remove

节点操作

获取节点

.parentNode------------------得到父节点；但这个得到的是离他最近的父节点；如果找不到父节点就返回为空null；

console.log(erweima.parentNode);//这个就是erweima的父节点

.childNode--------------------得到子节点；
.children-----------------------也是得到子节点，是实际开发常用的；

DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');

子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);

children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);

firstChild/lastChild----------------第一个/最后一个子节点，不管是文本节点还是元素节点；
firstElementChild/lastElementChild----------------第一个/最后一个子元素节点；

返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);

实际开发的写法 既没有兼容性问题又返回第一个子元素,就是用刚才那种返回子元素的方法，后面加上数组下标:

console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
创建节点

分为两步： 1. 创建元素 2. 添加元素
.createElement-----------------------------创建；
node.appendChild(child)-----------------添加，类似数组里面的push；
node.insertBefore(child, 指定元素)------添加到指定元素的前面；

// 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
删除节点

node.removeChild(child)--------------------------删除元素

复制节点
  1. 复制：xxx.node.Clone()；（）为空或为false的话只复制标签，不复制里面的内容；xxx.node.Clone(true)的话是复制里面的内容；
  2. 然后用appendChild添加进去就行了；
3种动态创建元素
  1. document.write 直接写入内容流，但是文档流执行完毕会导致页面重绘；
  2. inner.HTML 将内容写入某个DOM节点，不会导致页面冲绘；
    创建多个元素效率高，不要采用拼接字符串，采用数组形式拼接，结构稍微复杂；
  3. createElenemt（），创建多个元素效率稍微低一点，但是结构清晰；

操作元素总结

操作元素内容：innerText；innerHTML；
操作元素常见属性：src href title alt
操作表单元素属性：type，value，disabled
操作元素常见样式：元素少用element.style;元素多用className；

事件

注册事件

  1. 传统方式：比如onclick

  2. 方法监听注册方式：

    addEventListener事件监听方式
    (1) 里面的事件类型是字符串 必定加引号 而且不带on
    (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
        })

删除事件

  1. 传统方式删除事件:在注册事件的function下面写上=null；
divs[0].onclick = null;
  1. removeEventListener 删除事件
divs[1].addEventListener('click', fn)//这里先写移除函数，不需要调用➕小括号
function fn() {//这里定义fn这个函数
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
  1. detachEvent删除事件；
 divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

DOM事件流

事件流描述的是从页面中接收事件的顺序，分为三个阶段：

  1. 捕获阶段：如果addEventListener 第三个参数是 true 那么则处于捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段：如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document

在这里插入图片描述

事件对象

  1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
  2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
  4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
  5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;
事件对象常见属性和方法：在这里插入图片描述

常见事件对象的属性和方法：
1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
区别 ： e.target 点击了那个元素，就返回那个元素 ；this 那个元素绑定了这个点击事件，那么就返回谁
2. e.preventDefault() 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交；return false也可以，但是只要有return的话后面的代码就不执行了；
3. 怎么阻止冒泡：
标准写法：e,stopPropagation（），stop 停止 ，Propagation 传播；
e.cancelBubble = true;

事件委托

鼠标事件

我是一段不愿意分享的文字
    <script>
      //禁止鼠标右键菜单contextmenu
      document.addEventListener('contextmenu',function (e) {
          e.preventDefault();
      })

      //禁止鼠标选中文字
      document.addEventListener('selectstart',function (e) {
          e.preventDefault();
      })

// 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标，就是当前的可视界面的位置
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标，就是相对于一整个页面从头开始的坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
mouseenter和mouseover的区别

mouseenter只经过自身盒子触发；
mouseover经过自身盒子和经过子盒子都触发；

常用键盘事件

  1. keyup 按键弹起的时候触发
  // document.onkeyup = function() {
    //         console.log('我弹起了');

    //     }
    document.addEventListener('keyup', function() {
        console.log('我弹起了');
    })
  1. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
 document.addEventListener('keydown', function() {
            console.log('我按下了down');
        })
  1. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })

三个事件的执行顺序 keydown – keypress – keyup

键盘事件对象
  1. keyCode（添加侦听器）
    其中keyup和keydown不区分字母大小写，keypress区分字母大小写；实际开发里面常用keyup和keydown；
 document.addEventListener('keyup',function (e) {
    console.log(e.keyCode)
  })

案例：京东快递单号查询

<div class="search">
<!--  字号偏大的一个盒子-->
  <div class="con">123</div>
<!--  下面的一个输入盒子-->
  <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
  var con = document.querySelector('.con')
  var jd_input = document.querySelector('.jd')
  jd_input.addEventListener('keyup',function () {
    if (this.value==''){
      con.style.display='none'
    }else {
      con.style.display = 'block';
      con.innerText = this.value;
    }
  })

这个案例里面就必须要用keyup，因为字还没按进去的时候，就触发了事件，触发事件的时候value为空，为空时display还是none，取不过来；

BOM浏览器对象模型

BOM–浏览时对象模型；给浏览器窗口做交互效果；比DOM大，document就是window对象的一部分；

window对象常见的事件

加载

window.onload-------页面加载事件：就是在页面中所有元素和事件都加载完成之后再开始执行这个事件；这样就可以把js的代码写在页面元素的任何地方；但这种注册事件方式只能写一个，如果有多个就只执行最后那个，所以我们平时生产环境里面会用到另一种实现方式：window.addEventListener('load',function(){})

DOMContentLoaded-------窗口加载事件，仅当DOM加载完成事件就触发；不包括要再去加载样式表，图片，flash等；就是只要各种标签加载完就可以了；这个更快一点；
window.addEventListener('DOMContentLoaded',function(){})

窗口大小

window.onresize-----只要窗口大小发生变化就会触发这个事件；
window.innerWidth是当前屏幕宽度
window.addEventListener('resize',function(){})

定时器
  1. setTimeout（调用函数-字符串形式，[延迟的秒数]）---------用于设置一个定时器，该定时器在定时器到期后执行调用函数，这里这个调用函数就是回调函数；
1.
setTimeout(function() {
            console.log('时间到了');

        }, 2000);

2.
function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);

模拟五秒钟关闭广告：

<img src="images/ad.jpg" alt="" class="ad">
<script>
  var ad = document.querySelector('.ad');
  setTimeout(function () {
    ad.style.display='none';
  },5000)
</script>
  1. 停止定时器：clearTimeout（定时器名字）

<img src="images/ad.jpg" alt="" class="ad">
<button>不管广告啦</button>
<script>
  var ad = document.querySelector('.ad');
  var btn = document.querySelector('button')
  var Timer=setTimeout(function () {
    ad.style.display='none';
  },5000)

  btn.addEventListener('click',function () {
    clearTimeout(Timer);
  })
</script>
  1. setInterval()计时器；这个是每隔所定的时间，就调用一次function；
<script>
  var Timer = setInterval(function () {
    console.log('syc超棒')
  },1000);
</script>
  1. 这个也有停止计时效果：clearInterval（定时器名字）；
tihs指向问题

在全局作用下的函数都是window的方法，一般情况下this指向的都是window；
谁调用的函数，this指向的就是哪个对象；

js执行机制

  1. 先执行主线程执行栈，在执行放入任务队列中的异步任务 ；（主线程就是同步任务，任务队列是异步任务）；

location对象

  1. location.assign():页面跳转
  2. location.replace():页面跳转但是不能回退，由于不记录浏览历史
  3. location.reload():加载刷新的意思，不加参数就是刷新，加参数true就是强制刷新；

navigator对象

history对象

history.forward():前进
history.back():后退
history.go():前进x步，这个x就是（）里面的参数，写几就是几，甚至可以是-1；

pc端网页特效

元素偏移量 offset系列

  1. 可以获取元素距离父元素的位置（带有定位，如果没有带有定位的话就以body为准）；
console.log(father.offsetTop);
        console.log(father.offsetLeft);
  1. 可以返回当前元素的偏移位置，大小；包含padding + border + width
console.log(w.offsetWidth);
        console.log(w.offsetHeight);
  1. 返回带有定位的父亲 否则返回的是body;
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
  1. 和style的区别：就是去获取位置什么的时候，可以用offset，但是offset是只读属性，style是可读写属性，是可以进行赋值改变的；

元素可视区client系列

立即执行函数：不用进行调用直接执行；
两种写法：（function（） {}）（）；或者(function(){}());
dpr 物理像素比

元素滚动scroll系列

（仿淘宝页面滚动案例）
获得的是元素真正的，元素内容大小；
scroll就是被卷进去的长度

  1. scroll滚动事件：当我们滚动条发生变化的时候会触发的事件；
  2. pageYoffset 页面被卷进去的部分
三大系列总结

在这里插入图片描述
它们擅长的用法：

  1. offset系列：经常用于获取元素位置： offsetLeft，offsetTop；
  2. client系列：经常用于获取元素大小：clientWidth，clientHeight；
  3. scroll系列：经常用于获取滚动距离：scrollTop，scrollLeft；
  4. 注意页面滚动的距离通过window.pageXOffset实现的；

动画原理

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意：动画效果必须要加定位；
 var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
给不同的元素添加不同的定时器
  1. obj.timer；
  2. 一个bug：不断点击定时器就开启了很多个定时器，速度就会越来越快
    解决方案就是：让我们的元素只有一个定时器执行
    先清除以前的定时器，只保留当前的一个定时器执行：
clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
缓慢动画

缓动动画函数封装obj目标对象 target 目标位置
思路：
1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
(有步长还能让步长成为负数，往后退)

 var step = (target - obj.offsetLeft) / 10;
  1. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

移动端

移动端触摸事件

sycVegetableDog
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
掌握Web API BOM DOM的使用
weixin_45615623的博客
09-24 223
Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log(‘adf’)) Web ...
JS-Web-API —— ECMAScript，BOM，DOM
A_Tamir的博客
09-14 439
一个完整的JavaScript实现应该由三部分组成 —— ECMAScript（核心），DOM（文档对象模型），BOM（浏览器对象模型）。 ECMAScript 由ECMA-262定义的ECMAScript与Web浏览器没有依赖关系。ECMAScript定义的只是这么语言的基础。 我们常见的Web浏览器只是ECMAScript实现可能的宿主环境之一。我们学习的这个是浏览器端的...
WebAPI之DOM和BOM
weixin_30301449的博客
04-16 725
API是什么？ Application Programming Interface：应用程序编程接口，是一些预先定义的函数，通俗的理解就是一些方法。 WebAPI是什么？ 浏览器提供的一套操作浏览器功能和页面元素的API。 此处的Web API特指浏览器提供的一些方法。可分为两个部分：BOM(浏览器对象模型)、DOM（页面对象模型） DOM DOM的概念 文档对象模型（Documen...
JavaScript——WebAPI(DOM+BOM)
WikY
10-10 243
DOM 文档对象模型 获取元素 根据ID获取：document.getElementByID() 根据标签名获取：document.getElementsByTagName() 根据类名获取(H5新增)：document.getElementsByClassName() ​ document.querySelector() ​ document.querySelectorAll() 获取body和html： ​ document.body() ​ documen
WebAPI之DOM，BOM基础
qq_36392801的博客
02-16 505
Web API 相关 概念：API 是一些预先定义的函数，目的是提供应用程序给开发人员，以获得操作软件或硬件的能力，不需要看源码，只需要直到输入什么，输出什么。 任何语言都有自己的 API API 特征：输入，输出 Web API 主要是 DOM 和 BOM DOM 相关 概念：文档对象模型，是W3C推荐的处理可扩展标记语言的标准接口。是一种与平台和语言无关的程序接口，可以动态的访问程序和脚本，更新其内容，结构； DOM 是一种基于数的 API 文档，它要求整个文档都表示在存储器中。 DOM 树 文档
JavaScript：Web APIs&DOM&BOM
KaiSarH
12-21 337
Web APIs&DOM&BOM
js-web APIs-day01-dom获取&属性操作
weixin_47175934的博客
08-30 270
javascript-Web APIs-day01-DOM获取&属性操作 （web API基本认知，获取DOM对象，操作元素内容，操作元素属性，定时器-间歇函数，综合案例（用户注册倒计时））
WebAPIs-01-DOM 简介 、获取元素 、 事件基础 、 操作元素
weixin_51353891的博客
04-18 153
学习目标： 能够通过ID来获取元素 能够通过标签名来获取元素 能够通过class来获取元素 能够通过选择器来获取元素 能够获取body和html元素 能够给元素注册事件 能够修改元素的内容 能够区分innerText和innerHTML的区别 能够修改像div这类普通元素的属性 能够修改表单元素的属性 能够修改元素的样式属性 1.1. Web API介绍 1.1.1 API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提.
7天精通Web APIs-正则&阶段案例（理论+实战）（第六天）
05-13
7天精通Web APIs-正则&阶段案例（理论+实战）（第六天）
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
04-23
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
Designing Web APIs--2018
09-15
Scale your web API to support a growing number of API calls and use cases Regularly adapt the API to reflect changes to your product or business Provide developer resources that include API ...
04-WebApis-CodeQuiz
03-09
04-WebApis-CodeQuiz
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1155
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1068
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 427
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 151
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
vue2生命周期和计算属性
Wang3317866410的博客
05-26 684
计算属性无法执行异步操作，计算属性的返回值不能写在异步函数中。但可以在里面写异步函数。因为我们需要观察这四个生命周期的不同，所以我们加上_data再打印一遍。当执行后可以看到data值封装到vue2中是_data的书写形式。2.计算属性是有缓存的只有依赖项改变了，计算属性的值才会改变。然后在下面新建一个index.vue（规范都用index）先添加个文件夹和文件放我们的计算属性。这里我把生命周期的换成了计算属性的。所以只需要在里面添加异步就可以了。原因：所有的生命周期都是同步的。scoped单独样式。
React-useState
weixin_46479909的博客
05-29 267
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
failed to list *v1.EndpointSlice: Get "https://:6443/apis/discovery.k8s.io/v1/endpointslices?labelSelector=%21service.kubernetes.io%2Fheadless%2C%21service.kubernetes.io%2Fservice-proxy-name&resourceVersion=39745": dial tcp :6443: connect: connection refused
04-23
这似乎是一个 Kubernetes 的 API 调用失败的错误信息，可能是由于网络连接问题或者服务配置不正确导致的。如果您是 Kubernetes 的管理员，可以尝试检查相关的服务和网络配置，或者查看 Kubernetes 的日志来进一步确定问题的原因。如果您需要更具体的帮助，请提供更多的上下文信息来帮助我们更好地解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值