WebAPI

最新推荐文章于 2023-08-21 16:12:57 发布
最新推荐文章于 2023-08-21 16:12:57 发布
阅读量3k 收藏 9
点赞数
分类专栏： js 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67124455/article/details/128875753
版权

WebAPI知识详解

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.
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

• 修饰符

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

自学cs的小菜鸡
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你 4 步搭建弹性可扩展的 WebAPI
阿里云技术
09-17 242
导读：本节课程主要分为三个部分，基本概念中介绍基于函数计算的 WebAPI 与普通的 WebAPI 的区别及优势；开发流程中介绍如何在函数计算的控制台进行 WebAPI 的开发；操作演示中会实例演示函数计算 WebAPI 的开发过程。 基本概念 常见的 WebAPI 架构如上图所示，主要包括客户端（浏览器）、服务器、数据库，WebAPI 由服务器提供，同时服务器要完成负载均衡、登录鉴权的相关操作。 当客户端流量快速增大时，服务器端只能通过水平扩展加机器的方式来增加提高服务能力。 这种常规模式..
Web API 实用案例
WangZhang_521的博客
03-17 2249
01-window对象 <!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"> &lt
WebApi的创建和简单实现（一）
热门推荐
沈夕林的博客
06-03 4万+
WebApi 1.what? 答: 对接各种客户端（浏览器，移动设备），构建http服务的框架 2.where? 答:部署在IIS中给外部应用提供数据 3.why? 答:C#MVC完美支持实现简单,明了,可控制 一、创建WebApi 1、开发环境：vs2019. 2、然后点击下一步 3、点击创建 4、然后再点击创建就会进入新建项目，然后再MVC（Models，Views，Controller...
c# Web API实例，与发布、部署、api调用
forwarepro的博客
08-21 2288
c# web api实例，与发布、部署IIS、调用api
web api讲解（很多人都觉得自己会了？）
m0_67742636的博客
08-26 878
api基础讲解
学习.net web api开发的好例子
02-02
学习.net web api开发的好例子，采用的是.net环境下的web mvc开发简单的api，典型的MVC架构，适合初学者
c#Web Api入门案例一
KJJfighting的博客
09-16 1万+
一、项目创建 看图 MVC架构的话，它会有view-model-control三层，在web api中它的前端和后端是分离的，所以只在项目中存在model-control两层。 1、我们在model文件夹中添加一个类 在movie类中添加代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace test_api_1.Controllers { pub
C# webapi接口调用实例
荆棘的博客
05-19 7753
书接上回，在demo的基础上进行webapi接口调用实例开发。
Asp.Net Core Web Api的简单实例
qq_39935495的博客
02-25 7873
文章目录WebApi第一个Asp.NetCoreWebApi程序 WebApi Web API是网络应用程序接口。包含了广泛的功能，网络应用通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进行开发出强大功能的web应用。 第一个Asp.NetCoreWebApi程序 首先新建项目,选择ASP.NET Core Web API 项目名称随意就好 直接点下一步就行 新建好了是这样的 Controllers文件夹是你的控制器 WeatherForecastController.
API与事件基础
smx19980410的博客
12-04 589
1.1. Web API介绍 1.1.1 API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 举例解释什么是API。 例如， ​ C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 ​ javascript中有一个函数alert
C# WEB API
10-31
C# WEB API 最近项目上要用到WEB API 接口，参考网上相关文档写了个简单的调用实例。供大家参考，希望对大家有帮助。
gsoap http webapi
08-18
gsoap 使用http get post调用web api接口
WebAPI项目及其HTML测试页面
12-09
1.webapi（接口）项目需要发布到IIS服务器 2.HTML页面可以直接调用发布的接口 3.项目用的编程工具Visual Studio2013
webapi 插件式开发
04-26
一个项目随着业务模块的不断增加，系统会越来越庞大。如果参与开发的人员越多，管理起来难度也很大。面对这样的情况，首先想到的是模块化插件式开发，根据业务模块，拆分成各个独立的插件，然后分配不同开发人员开发...
.net 解决web api 获取不到文件的问题
07-07
.net 解决web api 获取不到文件的问题，全新的文件流获取方式
java调用webapi
10-10
java调用webapi的包，里面有挺多有一些相应的example，可以提供参考
Android 请求 WebAPI的案例
07-15
Android 请求 WebAPI的案例,博客有些地方解释的不够清楚，所以上传了这个案例。方便学习。
C# WebAPI示例
05-16
C# WebAPI示例 C# WebAPI示例 C# WebAPI示例C# WebAPI示例
WebApi和访问WebApi两个项目
12-05
WebApi和访问WebApi两个项目,有源码，注释非常详细，希望对大家有帮助。 HttpWebRequest类访问webApi
wpf webapi
最新发布
01-23
借助于WPF的强大的UI设计和交互性能，开发人员可以创建直观而灵活的用户界面，与WebAPI进行数据交互，并实现数据的展示和操作。通过WPF的数据绑定机制，可以轻松地将WebAPI返回的数据绑定到UI元素上，实现数据的实时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值