WebAPI

news2024/11/25 16:48:49

WebAPI知识详解

  • day1
    • 1.Web API 基本认知
        • 作用和分类
        • 什么是DOM？
        • DOM树的概念
        • DOM对象
    • 2.获取DOM对象
      • 通过css选择器获取dom对象
      • 通过其他方法获取dom
    • 3.设置/修改DOM元素内容
      • 方法1. document.write() 方法
      • 方法2. 对象.innerText 属性
      • 方法3. 对象.innerHTML
    • 4.设置/修改DOM元素属性
      • 案列（一）随机点名
      • **通过style修改样式**
      • 案列（二）随机展示图片
      • **通过classname修改样式**
      • 通过 classList 操作类控制CSS
      • 设置/修改 表单元素 属性
    • 5.定时器-间歇函数
      • 开启定时器
      • 关闭定时器
      • 定时器
    • 6.综合案例
  • day2
    • 1.事件
      • 事件监听
      • 拓展阅读-事件监听版本
      • 事件类型
    • 2.高阶函数
      • 表达式
      • 回调函数
      • 具体操作
    • 3.环境对象
      • this
      • 操作
    • 4.编程思想
      • 排他思想
      • 概念
      • 具体操作
    • 5.综合案例
  • day3
    • 1.节点操作
      • DOM 节点
      • 查找节点
      • 增加节点
      • 删除节点
    • 2. 时间对象
      • 实例化
      • 时间对象方法
      • 时间戳
    • 3.综合案例
      • 微博发布案例列
      • 重绘和回流
  • day4
    • 1. 事件对象
      • 获取事件对象
      • 事件对象常用属性
    • 2.事件流
      • 事件流与两个阶段说明
      • 事件捕获和事件冒泡
      • 阻止事件流动
    • 3.事件委托
    • 4.综合案例
  • day5
    • 滚动事件和加载事件
      • 滚动事件
      • 加载事件
    • 元素大小和位置
      • 1 scroll家族
      • 2 offset家族
      • 3 client家族
  • day6
    • Window对象
      • BOM(浏览器对象模型)
      • 定时器-延时函数
      • JS执行机制
      • location对象
      • navigator对象
      • histroy对象
    • swiper 插件
    • 本地存储
    • 综合案例
  • day7
  • 正则表达式
    • • 介绍
    • • 语法
    • • 元字符
    • • 修饰符

day1

1.Web API 基本认知

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）

什么是DOM？

DOM是浏览器提供的一套专门用来 操作网页内容 的功能

DOM树的概念

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

DOM对象

概念：浏览器根据html标签生成的 JS对象，说白了，就是类似java的那种面向对象的对象
document 对象
是 DOM 里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面

2.获取DOM对象

通过css选择器获取dom对象

（qs和qsa，选则部分和多个）
语法：
2.1下面表示只选则一个选择器
特别强调：（）里面必须是字符串，也就是必须加引号

document.querySelector('css属性选择器')
//注意这里的css选择器，就是之前学css的那些，比如像div，span之类的东西

返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
2.2下面表示选则多个选择器的语法
注意，区别

document.querySelectorAll('ul li')

CSS选择器匹配的NodeList 对象集合
注意：qsa全选最终返回的元素是一个数组形式的，我们想得到的话要用for循环进行遍历
for循环遍历全选的实操如下：

 <div>我是一个盒子</div>
    <div>我是er个盒子</div>
    <div class="three">我是三个盒子</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <span>就1个</span>
    <script>
        // 1. js 获取 第一个元素 
        // let div = document.querySelector('div')
        // let div = document.querySelector('.three')
        // console.log(div)

        // let li = document.querySelector('ul li:last-child')
        // console.log(li)
        // 2. 获取多个元素  伪数组
        let lis = document.querySelectorAll('ul li')
        // console.log(lis)   [div, div, div]
        // 通过遍历的方式，获得里面的每一个dom对象（元素）
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }
        let span = document.querySelectorAll('span')
        console.log(span)
    </script>

注意：上面li标签和span标签都是采用全选，并且控制台打印输出，但是结果却呈现下面不同的结果，第四个就是span遍历的时候，因为不是for遍历的，是直接打印的，结果就出错
在这里插入图片描述

通过其他方法获取dom

在这里插入图片描述

3.设置/修改DOM元素内容

方法1. document.write() 方法

直接就在页面就打印出来了跟前面input差不多

方法2. 对象.innerText 属性

（下面的html元素已经把这个的作用包括完了，主要讲下面的东西）

方法3. 对象.innerHTML

  // 1. 获取标签(元素)
        let box = document.querySelector('div')
        // 2. 修改标签（元素）内容  box是对象   innerText 属性
        // 对象.属性  = 值   不识别标签
        // box.innerText = '有点意思~'
        // box.innerText = '<strong>有点意思~</strong>'
        // 3. innerHTML解析标签
        box.innerHTML = '<strong>有点意思~</strong>'
        这里的innerHTML后面可以添加任何文字类的东西
        不过需要注意的是要用单引号''包括起来

4.设置/修改DOM元素属性

在这里插入图片描述

案列（一）随机点名

 // 1. 获取元素
        let box = document.querySelector('div')
        // 2. 得到随机的名字
        // 随机数（）
        要求背过！！
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']

        // 生成1个随机数 作为数组的索引号
        取得随机数对象let 对象=getRandom（开始下标，结束下标）
        let random = getRandom(0, arr.length - 1)
        // console.log(random)

        // 3. 写入标签内部
        box.innerHTML = arr[random]
        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1)
        // console.log(arr)

在这里插入图片描述

通过style修改样式

在这里插入图片描述

案列（二）随机展示图片

 <img src="./images/1.webp" alt="">

    <script>
        // 1. 获取图片元素
        let pic = document.querySelector('img')
        // 2. 随机得到图片序号
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let num = getRandom(1, 6)
        // 3. 完成src 属性赋值
        pic.src = `./images/${num}.webp`
    </script>

通过classname修改样式

解释：这个操作的目的就是用一个新的类名，且新的操作，来修改原来的样式，将原来的类名和操作样式更换
在这里插入图片描述
实操演示

     div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <script>
        // 1.获取元素
        let box = document.querySelector('div')
       //修改样式
        box.className = 'one active'
    </script>

通过 classList 操作类控制CSS

在这里插入图片描述

<script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加,这个相当于就是在类名后面加个active的名字
        box.classList.add('active')
        // remove() 移除 类，移除相当于就是把类名删除了，但是这个盒子的长宽高和颜色依旧保留
         box.classList.remove('one')
        // 切换类，就是两个类名的css选择器，能一个能切换到宁外个去，转换类名
        //one类中盒子是黑色，然后我可以切换到是白色的two类中去，最后显示白色盒子
       // box.classList.toggle('one')
    </script>

设置/修改 表单元素 属性

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

  <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" id="" class="agree">
    <script>
        // 1. 获取元素
        let input = document.querySelector('input')
        // 2. 取值或者设置值  得到input里面的值可以用 value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

        // 2. 启用按钮
        let btn = document.querySelector('button')
        // disabled 不可用   =  false  这样可以让按钮启用
        btn.disabled = false
        // // 3. 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = true
    </script>

5.定时器-间歇函数

开启定时器

在这里插入图片描述

关闭定时器

在这里插入图片描述

定时器

<script>
        //就是网页上常见的那个效果，打开网页，自动翻页那个
        //语法 setInterval(函数，间隔时间)
        //上面的语法表示 每隔一个时间就调用一次那个时间函数

        // setInterval(function () {
        //     console.log('高薪就业')
        // }, 1000)

        function show() {
            console.log('月薪过2万')
        }

        let timer = setInterval(show, 1000)
        // let timer1 = setInterval(show, 1000)

        // 清除定时器,就是停止在定时操作
      //  clearInterval(timer)
    </script>

6.综合案例

// 数据
let data = [
{
imgSrc: ‘images/b01.jpg’,
title: ‘挑战云歌单，欢迎你来’
},
{
imgSrc: ‘images/b02.jpg’,
title: ‘田园日记，上演上京记’
},
{
imgSrc: ‘images/b03.jpg’,
title: ‘甜蜜攻势再次回归’
},
{
imgSrc: ‘images/b04.jpg’,
title: ‘我为歌狂，生为歌王’
},
{
imgSrc: ‘images/b05.jpg’,
title: ‘年度校园主题活动’
},
{
imgSrc: ‘images/b06.jpg’,
title: ‘pink老师新歌发布，5月10号正式推出’
},
{
imgSrc: ‘images/b07.jpg’,
title: ‘动力火车来到西安’
},
{
imgSrc: ‘images/b08.jpg’,
title: ‘钢铁侠3，英雄镇东风’
},
{
imgSrc: ‘images/b09.jpg’,
title: ‘我用整颗心来等你’
},
]
//获取元素，图片和h3
let pic = document.querySelector(‘.pic’)
let text = document.querySelector(‘.text’)
let i = 0//记录图片的张数
//因为这几张图片都是采用的是数组存储的方式，那么我们可以通过数组下标，类似于遍历的做法

    //2开启定时器
    setInterval(function () {

        i++//因为点开了网页首先显示的是i=0，即第一张图片，然后第二张图片进行++操作
        //并且图片换了，那么图片里的字也要换
        //则修改图片中的src属性
        pic.src = data[i].imgSrc//这句话的意思相当于就是，前面pic.src=表示重定值
        //后面的date[i]表示date数组中第i个元素的值，然后又调用imgSrc，表示将date数组中进行i++，加到哪个数
        //然后那个对应的图片的路径赋值给pic对象中的src属性，
        //简单地说上面的操作就是按到顺序来进行图片换图片

        text.innerHTML = data[i].title

        //然后有一个值得注意的点就是
        //图片和文字只有9张，那么在数组里头相当于就是只有0-8的索引号
        //我们想要的效果就是第九张图片播放完了然后会接着播放，就是那种循环的效果
        //那么这里就可以设置循环来播放

        // 无缝衔接
        if (i === data.length - 1) {
            i = -1
        }
        // i === 8 ? i = -1 : i
    }, 1000)

day2

1.事件

什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
就是一个

事件监听

什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
语法：
在这里插入图片描述
实操
解释：步骤就两步
1，获取元素，用个变量来接，
2，变量名，addEventListener(‘事件’, 事件处理函数)
（注意;这里的事件可以是点击click还有就是后面的会学的鼠标移开的事件）

   <button>点击我</button>
    <script>
        //1. 获取按钮元素
        let btn = document.querySelector('button')
        //2. 事件监听   绑定事件 注册事件 事件侦听
        // 事件源.addEventListener('事件', 事件处理函数)
        btn.addEventListener('click', function () {
            alert('月薪过万')
        })
    </script>

案列：关闭二维码
在这里插入图片描述

 <script>
        // 1. 获取元素   事件源 i   关闭的 erweima 
        let close_btn = document.querySelector('.close_btn')
        let erweima = document.querySelector('.erweima')
        // 2. 事件监听
        close_btn.addEventListener('click', function () {
            // erweima 关闭  他是隐藏的
            erweima.style.display = 'none'
        })
    </script>

拓展阅读-事件监听版本

在这里插入图片描述

事件类型

在这里插入图片描述
案列：小米搜索框
涉及到;focus和burl两个事件。具体含义如下
Focus事件当元素获得焦点时，触发focus事件。当通过鼠标点击或选中元素或通过tab键定位到元素时，该元素就会获得焦点。Focus()方法触发focus事件，或规定当发生focus事件是运行的函数。
Blur事件会在元素失去焦点时触发，既可以是鼠标行为，也可以是按tab键离开的。与foucsout一样，元素失去焦点时触发。两者唯一的区别存在于foucsout可以在父 元素上检测子元素失去焦点的情况。
当元素获得焦点时触发focus事件，执行focus函数。失去焦点时，触发blur事件，执行blur函数。

  // 1. 获取元素   input 
        let search = document.querySelector('input')
        let list = document.querySelector('.result-list')
        // 2. 事件监听 获得光标事件  focus
        个人理解，他这里的获取标focus应该意思应该就是鼠标一点了过后
        
        search.addEventListener('focus', function () {
            // 显示下拉菜单
            list.style.display = 'block'
            // 文本框变色
            this.classList.add('search')
        })
        // 3. 事件监听 失去光标事件  blur
        search.addEventListener('blur', function () {
            // 隐藏下拉菜单
            list.style.display = 'none'
            // 文本框去色
            this.classList.remove('search')
        })

效果
在这里插入图片描述
案列二：全选文本框
在这里插入图片描述

<script>
    // 1. 获取元素  全选 和   ck 小复选框
    let all = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let span = document.querySelector('span')
    // 2. 事件监听   全选按钮  
    all.addEventListener('click', function () {
      // console.log(all.checked)  // true  false 
      // 我们需要做的就是把 all.checked 给下面三个小按钮
      // 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      // 当我们的全选按钮处于选中状态，则可以改为取消
      if (all.checked) {
        // console.log('要改')
        span.innerHTML = '取消'
      } else {
        span.innerHTML = '全选'
      }
    })


    // 3. 小按钮的做法 同时给多个元素绑定相同事件
    for (let i = 0; i < cks.length; i++) {
      // 绑定事件
      cks[i].addEventListener('click', function () {
        // console.log(11)
        // 只要点击任何一个小按钮，都要遍历所有的小按钮  
        for (let j = 0; j < cks.length; j++) {
          // 都来看看是不是有人没有选中
          if (cks[j].checked === false) {
            // 如果有false 则退出循环 结束函数
            all.checked = false
            span.innerHTML = '全选'
            return
          }
        }
        // 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
        all.checked = true
        span.innerHTML = '取消'
      })
    }

注意：这里省略了一个发布文字的案列，那个效果就是你发布文字，他能显示出你写了多少字‘了，并且还会有个字数限制

2.高阶函数

表达式

在这里插入图片描述

回调函数

在这里插入图片描述

具体操作

<script>
        let num = 10
        //函数表达式
        let fn = function () { }
        btn.onclick = function () { }
        // 高阶函数 函数的高级用法，把函数当值来看看

        //  回调函数

        // setInterval(function(){}, 1000)
        function fn() { }
        setInterval(fn, 1000)
        // 此时 fn 就是回调函数   回头去调用的函数

        box.addEventListener('click', fun)
        function fun() {

        }
    </script>

3.环境对象

this

在这里插入图片描述

操作

 <button>点击</button>
    <script>
        // 环境对象 this 他就是个对象
        function fn() {
            console.log(this)//这里会打印出结果，也就是window，因为window指向了这个对象
        }
        // fn()
        window.fn()///

        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            console.log(typeof this)
            // 会打印btn 因为btn 调用了这个函数，所以 this 指向btn
        })
    </script>

4.编程思想

排他思想

概念

排他思想，就相当于是网页中的那种操作，两个相同的css选择器中，比如两个黑白色的盒子，然后我们想得到白色的盒子，就先要让两个盒子先采用for循环给每个都添加事件，然后采用第二个for，移除每个对象加的事件，最后用环境对象this把自己添加事件，也就是通俗意义上的复活
在这里插入图片描述

具体操作

 <button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // this.classList.add('pink')
                // 干掉所有人
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('pink')
                }
                // 复活我自己
                this.classList.add('pink')
            })
        }
    </script>

案列

5.综合案例

day3

1.节点操作

DOM 节点

概念：DOM树里每一个内容都称之为节点
在这里插入图片描述

查找节点

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

子元素.parentNode

父节点操作

   <div class="father">
        <div class="son">儿子</div>
    </div>
    <script>
        子元素.parentNode
        let son = document.querySelector('.son')
        // 找爸爸
        // console.log(son.parentNode)
        son.parentNode.style.display = 'none'
    </script>

案列：关闭二维码（就是给二维码打×，就会关闭二维码照片）

<script>
    // 1. 获取元素  关闭按钮
    let close_btn = document.querySelectorAll('.close')
    // 2. 绑定多个点击事件给close
    for (let i = 0; i < close_btn.length; i++) {
      close_btn[i].addEventListener('click', function () {
        // 3. 关闭当前的那个二维码  点击谁，就关闭谁的爸爸
        this.parentNode.style.visibility = 'hidden'
      })
    }
  </script>

子节点操作
在这里插入图片描述
语法：

父元素.children

操作（就是一点按钮，会把几个小li变色）

   let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            // console.log(ul.children)
            for (let i = 0; i < ul.children.length; i++) {
                ul.children[i].style.color = 'red'
            }
        })
        ul.children[0].style.color = 'green'
        // console.log(ul.childNodes)

兄弟节点操作
在这里插入图片描述
实操

<button>点击</button>
    <ul>
        <li>第1个</li>
        <li class="two">第2个</li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let two = document.querySelector('.two')
        btn.addEventListener('click', function () {
            // two.style.color = 'red'
            two.nextElementSibling.style.color = 'red'
            two.previousElementSibling.style.color = 'red'
        })
    </script>

增加节点

在这里插入图片描述
语法：

document.createElement

实操

<ul>
        <li>我是大毛</li>
        <li>我是二毛</li>
    </ul>
    <script>
        // 二毛   ul.children[1]
        // 1. 创建新的标签节点
        // let div = document.createElement('div')
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')

        li.innerHTML = '我是xiao ming'
        // 2. 追加节点  父元素.appendChild(子元素) 后面追加
        // ul.appendChild(li)
        // 3. 追加节点  父元素.insertBefore(子元素， 放到那个元素的前面)   
        ul.insertBefore(li, ul.children[0])
    </script>

追加节点：
在这里插入图片描述
克隆节点
在这里插入图片描述

删除节点

在这里插入图片描述
操作

  <button>点击</button>
    <ul>
        <li>我是内容11111</li>
    </ul>
    <script>
        // 需求，点击按钮，删除小li
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click', function () {
            // 删除的语法 父元素.removeChild(子元素)
            ul.removeChild(ul.children[0])
        })
    </script>

2. 时间对象

时间对象：用来表示时间的对象
作用：可以得到当前系统时间

实例化

在这里插入图片描述

   let date = new Date()
        console.log(date)
        // 小括号里面写上时间，可以返回指定的时间 
        let last = new Date('2021-8-29 18:30:00')
        console.log(last)

作用：在控制台输出打印可以得到，当前时间和指定时间，不过都是英文格式的时间
在这里插入图片描述

时间对象方法

在这里插入图片描述


        // new 实例化 时间对象
        // 小括号为空可以得到当前的时间
        let date = new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth() + 1)
        console.log(date.getDate())
        // 时分秒
        console.log(date.getHours())
        console.log(date.getMinutes())
        console.log(date.getSeconds())
        // 星期几
        console.log(date.getDay())

结果：
在这里插入图片描述
案列：页面显示的时间
在这里插入图片描述

        let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let div = document.querySelector('div')
        // 先调用，就省去了1秒的空白期
        getTime()
        setInterval(getTime, 1000)
        function getTime() {
            // 1. 实例化时间对象 一定写到定时器里面才可以额
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let date1 = date.getDate()
            let hour = date.getHours()
            let min = date.getMinutes()
            let sec = date.getSeconds()
            let day = date.getDay()
            div.innerHTML = `今天是： ${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}`
        }

时间戳

在这里插入图片描述
获取当前时间戳
在这里插入图片描述

理解：通俗地说就是返回从1970年后到现在时间的毫秒值
时间戳的操作：

      // 时间戳是总的毫秒数  是独一无二的  
        // 计算倒计时： 核心思想:
        // 将来时间 9.1 12:00   有一个时间戳   2000000
        // 现在的时间 8.29 15:00   有一个时间戳   1000000
        // 可以利用将来的时间戳 减去 现在的时间戳 就是剩余的时间毫秒数
        // 转换为时分秒就是剩余的时间了
        // 1. getTime()
        // let date = new Date()
        // console.log(date.getTime())
        // 2. +new Date()
        console.log(+new Date()) // 当前的时间戳
        console.log(+new Date('2023-8-30 12:00:00'))  // 指定时间的时间戳
        // 3. 只能得到当前的
        // console.log(Date.now())

显示：
在这里插入图片描述
关于时间戳的倒计时案列：
在这里插入图片描述

let hour = document.querySelector('#hour')
    let minutes = document.querySelector('#minutes')
    let scond = document.querySelector('#scond')
    time()
    setInterval(time, 1000)
    function time() {
      // 1. 得到现在的时间戳
      let now = +new Date()
      // 2. 得到指定时间的时间戳
      let last = +new Date('2023-1-22 00:00:00')
      // 3. （计算剩余的毫秒数） / 1000 === 剩余的秒数
      let count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      // m = parseInt(总秒数 / 60 % 60);     //   计算分数
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      // s = parseInt(总秒数 % 60); //   计算当前秒数
      let s = parseInt(count % 60);
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s
    }

3.综合案例

微博发布案例列

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

<script>
    // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    let dataArr = [
      { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
      { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
      { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
      { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
      { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
    ]
    // 需求1：检测用户输入字数
    //   1. 注册input事件
    //   2. 将文本的内容的长度赋值给对应的数值
    //   3. 表单的maxlength属性可以直接限制在200个数之间
    let textarea = document.querySelector('textarea')
    let useCount = document.querySelector('.useCount')
    // 发布按钮
    let send = document.querySelector('#send')
    // ul
    let ul = document.querySelector('#list')
    textarea.addEventListener('input', function () {
      // console.log(this.value.length)
    // this.value可以获取当前输入的值，那么就可以想方法把this的value输入值和那个串联起来

      useCount.innerHTML = this.value.length
    })

    // 需求2： 输入不能为空
    注意观察，就是在输入框里点了一下，然后你按空格，他这里面也会计入数值的
    我们就需要设置判断条件，让他按空格之后不会算字符数，并且发布不能为空
    //   点击button之后判断
    //   判断如果内容为空，则提示不能输入为空, 并且直接return 不能为空
    //   防止输入无意义空格, 使用字符串.trim()去掉首尾空格
    // console.log('  str')
    // console.log('  str '.trim())
    //   并将表单的value值设置为空字符串
    //   同时下面红色为设置为0
    send.addEventListener('click', function () {
      if (textarea.value.trim() === '') {
        //   并将表单的value值设置为空字符串
        textarea.value = ''
        //   同时下面红色为设置为0
        useCount.innerHTML = 0
        return alert('内容不能为空')
      }
      // 随机数
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min
      }
      let random = getRandom(0, dataArr.length - 1)
      // 需求3：   新增留言  写到send 的里面
      // 创建一个小li，然后里面通过innerHTML追加数据
      注意这里的creatElment是创建一个新的节点的意思，表示随着新发布一个评论，多一个新节点
      let li = document.createElement('li')
      // 随机获取数据数组里面的内容, 替换newNode的图片和名字以及留言内容
     注意：这里的innerHTML表示的意思是追加的意思，表示新添加一个
      li.innerHTML = `
       <div class="info">
      <img class="userpic" src=${dataArr[random].imgSrc}>
      <span class="username">${dataArr[random].uname}</span>
      <p class="send-time"> ${new Date().toLocaleString()} </p>
      </div>
      <div class="content">${textarea.value}</div>
      <span class="the_del">X</span>
      `

      // 需求4：删除留言  放到追加的前面
      // 在事件处理函数里面获取点击按钮, 注册点击事件
      //   (易错点: 必须在事件里面获取, 外面获取不到)
      // 删除对应的元素(通过this获取对应的那条需要删除的元素)
      // 教你一招: 放到追加进ul的前面，这样创建元素的同时顺便绑定了事件，赞~~
      // 使用 li.querySelector()
      let del = li.querySelector('.the_del')
      del.addEventListener('click', function () {
        // 删除操作  点击的是X  删除的小li  父元素.removeChild(子元素)
        ul.removeChild(li)
      })
      // 利用时间对象将时间动态化       new Date().toLocaleString()
      // 追加给 ul  用  父元素.insertBefore(子元素, 那个元素的前面)
      ul.insertBefore(li, ul.children[0])
      // 需求5：重置
      // 将表单域内容重置为空
      // 将userCount里面的内容重置为0
      textarea.value = ''
      //   同时下面红色为设置为0
      useCount.innerHTML = 0
    })
  </script>

重绘和回流

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

day4

1. 事件对象

获取事件对象

在这里插入图片描述
写法：

 <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('mouseenter', function (e) {
            console.log(e)
        })

事件对象常用属性

在这里插入图片描述

 // mousemove 鼠标移动事件
        document.addEventListener('click', function (e) {
            // console.log(11)
            // pageX 和 pageY 跟文档坐标有关系
            // console.log(e)
            console.log('clientX:' + e.clientX, 'clientY:' + e.clientY)
            console.log('pageX:' + e.pageX, 'pageY:' + e.pageY)
            console.log('offsetX:' + e.offsetX, 'offsetY:' + e.offsetY)
        })

案列
在这里插入图片描述

document.addEventListener('mousemove', function (e) {
            // 不断得到当前的鼠标坐标
            // console.log(e.pageX)
            // console.log(e.pageY)
            // 把坐标给图片
            // img.style.left = '100px'
            img.style.left = e.pageX - 50 + 'px'
            img.style.top = e.pageY - 40 + 'px'
        })

2.事件流

事件流与两个阶段说明

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

事件捕获和事件冒泡

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

  let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function () {
            alert('我是爸爸')
        }, true)
        son.addEventListener('click', function () {
            alert('我是儿子')
        }, true)
        document.addEventListener('click', function () {
            alert('我是爷爷')
        }, true)
注意，就是这里的末尾添加了true，表示确认事件捕获
点击后，界面弹出来的是自上而下的爷父子，然而如果去掉true或者设置为false就会成事件捕获，即自上而下，子父爷的弹出
        // btn.onclick = function() {}

阻止事件流动

在这里插入图片描述

  let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function (e) {
            alert('我是爸爸')
            e.stopPropagation()
            这里就是具体的用法
        })
        son.addEventListener('click', function (e) {
            alert('我是儿子')
            // 阻止流动 Propagation 传播
            e.stopPropagation()
        })
        document.addEventListener('click', function () {
            alert('我是爷爷')
        })

鼠标经过事件
在这里插入图片描述
推荐还是主要写mouseenter和mouseleave
因为前面的mouseover和mouseout会产生冒泡，即就是在鼠标移动的时候会自动增加

   let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('mouseenter', function () {
            console.log(111)
        })

默认阻止事件
在这里插入图片描述

<a href="http://www.baidu.com">跳转到百度</a>
    <script>
        let a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            // 阻止默认行为 方法
            e.preventDefault()
        })
    </script>

两种注册事件对比
在这里插入图片描述

 <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        // 1.l0 on
        // 多次相同的事件，只执行最后一次
        // btn.onclick = function () {
        //     alert('第一次')
        // }
        // btn.onclick = function () {
        //     alert('第二次')
        // }
        // 解绑事件
        // btn.onclick = null
        // 2. addEventListener
        btn.addEventListener('click', add)
        function add() {
            alert('第一次')
        }
        // btn.addEventListener('click', function () {
        //     alert('第二次')
        // })
        btn.removeEventListener('click', add)
    </script>

3.事件委托

在这里插入图片描述

 <script>
        // 不要每个小li注册事件了  而是把事件委托给他的爸爸 
        // 事件委托是给父级添加事件 而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>

4.综合案例

在这里插入图片描述

//  1. 准备好数据后端的数据
    let arr = [
      { stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
      { stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
      { stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
    ]

    // 获取父元素 tbody
    let tbody = document.querySelector('tbody')
    // 添加数据按钮 
    // 获取录入按钮
    let add = document.querySelector('.add')
    // 获取各个表单的元素
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    // 渲染函数  把数组里面的数据渲染到页面中
    function render() {
      // 先干掉以前的数据  让tbody 里面原来的tr 都没有
      tbody.innerHTML = ''
      // 在渲染新的数据
      // 根据数据的条数来渲染增加 tr  
      for (let i = 0; i < arr.length; i++) {
        // 1.创建tr  
        let tr = document.createElement('tr')
        // 2.tr 里面放内容
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
          <a href="javascript:" id="${i}">删除</a>
        </td>
        `
        // 3.把tr追加给 tobdy  父元素.appendChild(子元素)
        tbody.appendChild(tr)


      }
    }
    // 页面加载就调用函数
    render()

    add.addEventListener('click', function () {
      // alert(11)
      // 获得表单里面的值   之后追加给 数组 arr  用 push方法
      arr.push({
        // 得到数组最后一条数据的学号 1003    + 1
        stuId: arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      })
      // console.log(arr)
      // 重新渲染我们的函数
      render()
      // 复原所有的表单数据
      uname.value = age.value = salary.value = ''
      gender.value = '男'
      city.value = '北京'
    })


    // 删除操作， 删除的也是数组里面的数据 ， 但是我们用事件委托
    tbody.addEventListener('click', function (e) {
      // alert(11)
      // 我们只能点击了链接 a ，才会执行删除操作
      // 那我们怎么知道你点击了a呢？
      // 俺们只能点击了链接才能做删除操作
      // console.dir(e.target.tagName)
      if (e.target.tagName === 'A') {
        // alert('你点击了链接')
        // 删除操作  删除 数组里面的数据  arr.splice(从哪里开始删，1)
        // 我要得到a的id 需要
        // console.log(e.target.id)
        arr.splice(e.target.id, 1)

        // 重新渲染我们的函数
        render()
      }
    })
  </script>

day5

滚动事件和加载事件

滚动事件

在这里插入图片描述

<div>
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字

    </div>
    <script>
        let div = document.querySelector('div')
        window.addEventListener('scroll', function () {
            console.log(111)
        })
        // div.addEventListener('scroll', function () {
        //     console.log(111)
        // })
    </script>

加载事件

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

元素大小和位置

1 scroll家族

使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素
显示隐藏，那我们怎么知道，页面滚动了100像素呢？
就可以使用scroll 来检测页面滚动的距离~~
在这里插入图片描述在这里插入图片描述

2 offset家族

使用场景：
前面案例滚动多少距离，都是我们自己算的，最好是页面
滚动到某个元素，就可以做某些事。
简单说，就是通过js的方式，得到元素在页面中的位置
这样我们可以做，页面滚动到这个位置，就可以返回
顶部的小盒子显示
在这里插入图片描述

3 client家族

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

day6

Window对象

BOM(浏览器对象模型)

在这里插入图片描述

定时器-延时函数

在这里插入图片描述
在这里插入图片描述
两种定时器对比：
 setInterval 的特征是重复执行，首次执行会延时
 setTimeout 的特征是延时执行，只执行 1 次
 setTimeout 结合递归函数，能模拟 setInterval 重复执行
 clearTimeout 清除由 setTimeout 创建的定时任务

JS执行机制

在这里插入图片描述
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这
门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比
如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问
题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
在这里插入图片描述

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

location对象

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

navigator对象

在这里插入图片描述

histroy对象

在这里插入图片描述

swiper 插件

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

本地存储

3.1 本地存储特性
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在
本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右

3.2 localStorage
1、生命周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

综合案例

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

day7

正则表达式

• 介绍

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

• 语法

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

• 元字符

在这里插入图片描述
为了方便记忆和学习，我们对众多的元字符进行了分类：

  1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
  2. 量词 （表示重复次数）
  3. 字符类 （比如 \d 表示 0~9）
    4.
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

• 修饰符

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/385196.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【TypeScript】的上手学习指南！

【TypeScript】的上手学习指南！

目录TS简介TypeScript是什么&#xff1f;为什么要推荐使用TypeScript生态支持安装TypeScriptTS简介 TypeScript是什么&#xff1f; TypeScript官网 简介&#xff1a;TypeScript是JavaScript类型的超集&#xff0c;它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计…
阅读更多...
JVM之执行引擎详解

JVM之执行引擎详解

1、概述javac将.java文件编译成.class文件&#xff0c;然后.class文件通过类加载子系统将字节码加载到运行时数据区&#xff0c;这时运行时数据区中的数据是java字节码&#xff0c;字节码是不能直接运行在操作系统之上&#xff0c;因为字节码指令并非等价于本地机器指令&#x…
阅读更多...
Python练习题

Python练习题

作业1&#xff1a;判断一个数&#xff0c;是否是2的指数 2的指数 0000 0010 0000 0001 0000 0100 0000 0011 0000 1000 0000 0111 0001 0000 0000 1111 提示&#xff1a;所有2的指数&#xff1a;n&(n - 1) 0 exponent int(…
阅读更多...
mybatisplus复习（黑马）

mybatisplus复习（黑马）

学习目标能够基于MyBatisPlus完成标准Dao开发能够掌握MyBatisPlus的条件查询能够掌握MyBatisPlus的字段映射与表名映射能够掌握id生成策略控制能够理解代码生成器的相关配置一、MyBatisPlus简介MyBatisPlus&#xff08;简称MP&#xff09;是基于MyBatis框架基础上开发的增强型工…
阅读更多...
Linux：进程间通信

Linux：进程间通信

目录 进程间通信目的 进程间通信分类 管道 System V IPC POSIX IPC 什么是管道 站在文件描述符角度-深度理解管道 管道使用 管道通信的四种情况 管道通信的特点 进程池管理 命名管道 创建一个命名管道 命名管道的打开规则 命名管道通信实例 匿名管道与命名管道的…
阅读更多...
C语言实现三子棋【详解+全部源码】

C语言实现三子棋【详解+全部源码】

大家好&#xff0c;我是你们熟悉的恒川 今天我们用C语言来实现三子棋 实现的过程很难&#xff0c;但我们一定要不放弃 三子棋1. 配置运行环境2. 三子棋游戏的初步实现2.1 建立三子棋分布模块2.2 创建一个名为board的二维数组并进行初始化2.3 搭建棋盘3. 接下来该讨论的事情3.1 …
阅读更多...
【微信小程序】-- 网络数据请求（十九）

【微信小程序】-- 网络数据请求（十九）

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…
阅读更多...
Jmeter接口测试教程之【参数化技巧总结】，总有一个是你不知道的

Jmeter接口测试教程之【参数化技巧总结】，总有一个是你不知道的

目录&#xff1a;导读 一、随机值 二、随机字符串 三、时间戳 四、唯一字符串UUID 说起接口测试&#xff0c;相信大家在工作中用的最多的还是Jmeter。 大家看这个目录就知道jmeter的应用有多广泛了&#xff1a;https://www.bilibili.com/video/BV1e44y1X78S/? JMeter是一个…
阅读更多...
C#:Krypton控件使用方法详解(第十一讲) ——kryptonScrollBar

C#:Krypton控件使用方法详解(第十一讲) ——kryptonScrollBar

今天介绍的Krypton控件中的kryptonScrollBar。下面介绍这个控件的外观属性&#xff1a;BackColor属性&#xff1a;表示控件的背景色&#xff0c;属性值如下图所示&#xff1a;BackgroundImage属性&#xff1a;表示用于该控件的背景图像&#xff0c;属性值可以为本地导入图片。B…
阅读更多...
final修饰符使用中遇到的一些问题

final修饰符使用中遇到的一些问题

文章目录final修饰符1. final不能用来修饰构造方法2. final修饰变量的一些注意问题2.1 final修饰成员变量2.2 final修饰引用类型2.2.1 演示代码中lombok链式编程介绍final修饰符 final具有“不可改变”的含义&#xff0c;它可以修饰非抽象类、非抽象成员方法和变量。 用final…
阅读更多...
day3 动态的web 开发一个带有Servlet（Java小程序）的webapp

day3 动态的web 开发一个带有Servlet（Java小程序）的webapp

文章目录对于一个动态的web应用来说&#xff0c;一个请求和响应的过程有多少个角色参与&#xff0c;角色和角色之间有多少个协议开发一个带有Servlet&#xff08;Java小程序&#xff09;的webapp&#xff08;重点&#xff09;对于一个动态的web应用来说&#xff0c;一个请求和响…
阅读更多...
【算法经典题集】二分(持续更新~~~)

【算法经典题集】二分(持续更新~~~)

&#x1f63d;PREFACE&#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐ 评论&#x1f4dd;&#x1f4e2;系列专栏&#xff1a;算法经典题集&#x1f50a;本专栏涉及到的知识点或者题目是算法专栏的补充与应用&#x1f4aa;种一棵树最好是十年前其次是现在二分整数二分机器人…
阅读更多...
java25种设计模式之工厂模式

java25种设计模式之工厂模式

Java设计模式 - 工厂模式 工厂模式是一种创建模式&#xff0c;因为此模式提供了更好的方法来创建对象。 在工厂模式中&#xff0c;我们创建对象而不将创建逻辑暴露给客户端。 例子 在以下部分中&#xff0c;我们将展示如何使用工厂模式创建对象。 由工厂模式创建的对象将是…
阅读更多...
AI for Science系列（一） ：飞桨加速CFD（计算流体力学）原理与实践

AI for Science系列（一） ：飞桨加速CFD（计算流体力学）原理与实践

AIScience专栏由百度飞桨科学计算团队出品&#xff0c;给大家带来在AI科学计算领域中的一系列技术分享&#xff0c;欢迎大家关注和积极讨论&#xff0c;也希望志同道合的小伙伴加入飞桨社区&#xff0c;互相学习&#xff0c;一起探索前沿未知。 作为系列分享的第一篇&#xff0…
阅读更多...
工作实战之代码规范

工作实战之代码规范

目录 前言 一、项目初期遇到的问题 1.项目整体架构搭建&#xff0c;微服务架构从头到尾分几层&#xff0c;每层负责那些功能 2.项目服务划分 3.项目服务命名约定 4.项目层级划分 5.项目包名约定 6.技术选型&#xff0c;包括微服务组件&#xff0c;日志组件&#xff0c;数…
阅读更多...
WebGIS行政区炫酷特效——流光特效教程

WebGIS行政区炫酷特效——流光特效教程

先来看下效果： 图片截图： 流光特效的思路是从行政区的边界中随着时间不断的取若干段线条换成另一种高亮颜色。 流光的第一步首先是发光，发光的教程在这里： GIS矢量图形多边形地块行政区发光，阴影发光特效实现_疯狂的GISer的博客-CSDN博客 学会发光以后，接下来需要做的…
阅读更多...
python实现图书管理系统(超详细)

python实现图书管理系统(超详细)

python实现图书管理系统 图书管理系统python实现图书管理系统图书管理系统:图书的功能&#xff1a;现在开始添加数据:增加数据删除数据查询数据图书位置修改图书的借出图书的还回主体界面完整代码功能运行截图实验环境&#xff1a;PyCharm 2021.1.3 x64 专业版图书管理系统: 数…
阅读更多...
详解JAVA字节码

详解JAVA字节码

目录 1.概述 2.字节码文件构成 2.1.魔数 2.2.版本号 2.3.常量池 2.4.访问标志 2.5.索引 2.6.字段表 2.7.方法表 3.字节码指令 3.1.概述 3.2.指令分类 3.2.1.加载存储指令 3.2.2.运算指令 3.2.3.其他指令 3.3.完整指令工作流程 4.字节码保护 1.概述 以往的编程…
阅读更多...
浅析安科瑞能耗监测云平台在公共建筑上的应用及未来发展趋势

浅析安科瑞能耗监测云平台在公共建筑上的应用及未来发展趋势

摘要&#xff1a;文章以每年发布的上海市国家机关办公建筑和大型公共建筑能耗监测及分析报告变化为切入点&#xff0c;分析了历年能耗分析报告的内容和功能变化&#xff1b;介绍了上海市国家机关办公建筑和大型公共建筑能耗监测平台发展和应用历程&#xff1b;揭示了当下显现的…
阅读更多...
MOV压敏电阻应用推荐及选型要点说明

MOV压敏电阻应用推荐及选型要点说明

ESD器件-MOV压敏电阻是一种非线性的电阻元器件产品&#xff0c;具有瞬态电压抑制功能&#xff0c;能够吸收电路中多余的电流&#xff0c;可保护一些敏感电路及其他电子产品设备的电路不受ESD、雷击瞬态浪涌电流的危害。对于它的一些应用范围&#xff0c;优恩小编在这里举例说明…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023