Web APIs_day01

最新推荐文章于 2024-08-16 16:17:53 发布
最新推荐文章于 2024-08-16 16:17:53 发布
阅读量705 收藏 19
点赞数 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74153968/article/details/140770353
版权

变量声明

变量声明有三个 var（老派写法）let 和 const

const 优先

  • const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化。
  • 对于引用数据类型，const声明的变量，里面存的不是值，是地址。所以const声明的对象可以修改里面的属性，只要地址不变，就不会报错。
  • 建议数组和对象使用 const 来声明

let

  • 基本数据类型的值或者引用类型的地址发生变化的时候使用
  • 一个变量进行加减运算，比如 for循环中的 i++
<script>
    // 引用数据类型，const声明的变量，里面存的不是值，是地址。
    //可以改为const
    let person = {
      uname: '张三',
      age: 18,
      gender: '男'
    }
    person.gender = '女'
    console.log(person.gender);
    console.log(person);
    
    //错误，地址不一样了，改变了对象
    const names = []
    names = [1,2,3]   
    //正确
    const names = []
    names[0] = '1'
    names[1] = '2'
    names[2] = '3'
    //错误，地址不一样了，改变了对象
    const obj ={}
    obj={
      uname:'张三'
    }
    //正确
    const obj = {}
    obj.names = '张三'

 </script>

Web API 基本认知

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器（开发网页内容特效和实现用户交互）

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

DOM树

将 HTML 文档以树状结构直观的表现出来，称之为文档树或 DOM 树

作用：文档树直观的体现了标签与标签之间的关系

DOM对象

  • DOM对象：浏览器根据html标签生成的 JS对象 

（1）所有的标签属性都可以在这个对象上面找到

（2）修改这个对象的属性会自动映射到标签身上

  • DOM的核心思想 ：把网页内容当做对象来处理
  • document 对象 

 （1）DOM 里提供的一个对象

 （2）它提供的属性和方法都是用来访问和操作网页内容的  例：document.write()

 （3）网页所有内容都在document里面

获取DOM对象

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：

包含一个或多个有效的CSS选择器 字符串（必须加' '）

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。

注意：

可以直接修改操作

选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数：

包含一个或多个有效的CSS选择器 字符串（必须加' '）

返回值：

CSS选择器匹配的NodeList 对象集合

注意：

（1）不可以直接修改操作，只能通过遍历的方式一次给里面的元素做修改。

（2）得到的是一个伪数组：有长度有索引号的数组 ，但是没有 pop() push() 等数组方法。

（3）想要得到里面的每一个对象，则需要遍历（for）的方式获得。

（4）哪怕只有一个元素，通过querySelectorAll() 获取过来的也是一个伪数组，里面只有一个元素而已。

其他获取DOM元素方法（了解）

  • 根据id获取一个元素

document.getElementById('nav')

  • 根据标签获取一类元素   获取页面所有的div

document.getElementsByTagName('div')

  • 根据类名获取元素   获取页面所有的类名为w的

document.getElementsByClassName('w')

操作元素内容

目标：修改元素的文本更换内容

对象.innerText 属性

（1）将文本内容添加/更新到任意标签位置

（2）显示纯文本，不解析标签

对象.innerHTML 属性

（1）将文本内容添加/更新到任意标签位置

（2）会解析标签，多标签建议使用模板字符

info.innerText = `<strong>你好啊</strong>`   //<strong>你好啊</strong>

info.innerHTML = `<strong>你好啊</strong>`   //你好啊（字体加粗）
 年会抽奖案例
<div class="wrapper">
    <strong>年会抽奖</strong>
    <h2>一等奖:<span id="one">???</span></h2>
    <h2>二等奖:<span id="two">???</span></h2>
    <h2>三等奖:<span id="three">???</span></h2>
  </div>
  <script>
    //数据准备
    const personArr = ['小张', '小陈', '小袁', '小红', '小蓝', '小江']
    //一等奖
    const random1 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random1]);
    //获取元素
    const one = document.querySelector('#one')
    one.innerHTML = personArr[random1]
    personArr.splice(random1, 1)
    //二等奖
    const random2 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random2]);
    //获取元素
    const two = document.querySelector('#two')
    two.innerHTML = personArr[random2]
    personArr.splice(random2, 1)

    //三等奖
    const random3 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random3]);
    //获取元素
    const three = document.querySelector('#three')
    three.innerHTML = personArr[random3]
    personArr.splice(random3, 1)

  </script>

操作元素属性

操作元素常用属性

通过 JS 设置/修改标签元素属性

语法：

对象.属性 = 值

 页面刷新 图片随机更换
<img src="./images/1.webp" alt="">
  <script>
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //获取元素
    const img = document.querySelector('img')
    const random = getRandom(1, 6)
    img.src = `./images/${random}.webp`
 </script>
操作元素样式属性
通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

注意：

（1）修改样式通过style属性引出

（2）如果属性有-连接符，需要转换为小驼峰命名法，如：backgroundColor

（3）赋值的时候，需要的时候不要忘记加css单位。

（4）style是行内样式，会覆盖其他样式。

 更换背景图片
<script>
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    const random = getRandom(1, 10)
    document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
 </script>
操作类名(className) 操作CSS

修改的样式比较多的情况下使用

语法：

元素.className = 'active'     (active只是一个类名）

注意：

（1）由于class是关键字, 所以使用className去代替。

（2）className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名。

（3）直接使用 className 赋值会覆盖以前的类名

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，可以通过classList方式追加和删除类名。

语法：

  • 追加一个类         元素.classList.add('类名')
  • 删除一个类         元素.classList.remove('类名')
  • 切换一个类         元素.classList.toggle('类名')

注意：

（1）类名不用加'.'，且必须是字符串。

（2）toggle   有就删掉，没有就加上。

轮播图随机版 
<div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]


    //获取随机数
    const random = parseInt(Math.random() * sliderData.length)
    //获取图片 
    const img = document.querySelector('.slider-wrapper img')
    //修改图片
    img.src = sliderData[random].url
    //获取文字
    const p = document.querySelector('.slider-footer p')
    //修改文字
    p.innerHTML = sliderData[random].title
    //修改背景色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    //修改圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    li.classList.add('active')

  </script>

 

操作表单元素属性

获取: DOM对象.属性名 

设置: DOM对象.属性名 = 新值

例如：

表单.value = '用户名'

表单.type = 'password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 ；如果是false 代表移除了该属性。

  <Button>点击</Button>
  <input type="checkbox" name="" id="">
  <script>
    const btn = document.querySelector('button')
    btn.disabled = true
    
    const ipt = document.querySelector('input')
    ipt.checked = true
    //ipt.checked = 'true'也会选中，但不提倡，有隐式转换
 </script>

自定义属性

（1）在html5中推出来了专门的data-自定义属性

（2）在标签上一律以data-开头

（3）在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

每隔一段时间需要自动执行一段代码，不需要手动去触发。

开启定时器

setInterval(函数，间隔时间）

注意：

（1）每隔一段时间调用这个函数，间隔时间单位是毫秒。

（2）函数名字不需要加括号

（3）定时器返回的是一个id数字

关闭定时器

let 变量名 = setInterval(函数，间隔时间）

clearInterval(变量名）

注意：

（1）一般不会刚创建就停止，而是满足一定条件再停止。

（2）函数名字不需要加括号

（3）定时器返回的是一个id数字

如果函数后面加括号，其写法为 ：setInterval('函数()'，间隔时间） 不提倡

阅读注册协议
<textarea name="" id="" cols="30" rows="10">
  用户注册协议
  欢迎注册为京东用户！在您注册过程中，您需要完成我们注册流程，【请您注意】如果不同意以下协议，请你停止注册。
</textarea>
  <br>
  <button class="btn" disabled>我已经阅读用户协议（5）</button>
  <script>
    const btn = document.querySelector('.btn')
    let i = 5;
    let n = setInterval(function () {
      i--
      btn.innerHTML = `我已经阅读用户协议${i}`
      if (i === 0) {
        clearInterval(n)
        //定时结束，开启按钮
        btn.disabled = false
        //button按钮特殊，用innerHTML来修改
        btn.innerHTML = '同意'
      }
    }, 1000)
  </script>

综合案例

轮播图定时器版

<div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    //获取图片
    const img = document.querySelector('.slider-wrapper img')
    //获取文字
    const p = document.querySelector('.slider-footer p')
    //获取背景色
    const footer = document.querySelector('.slider-footer')
    //定时器
    let i = 0
    setInterval(function () {
      i++
      if (i >= sliderData.length) {
        i = 0
      }
      //修改元素
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      //小圆点
      //先删除以前的小圆点
      document.querySelector('.slider-indicator .active').classList.remove('active')
      //只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
  </script>

 

时钟

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 50px auto 0;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }

    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(./images/second.png);
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <script>
    /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

    // 查找页面的元素，定时器调用的函数外面，查找一次即可
    const second = document.querySelector('.ss');
    // 封装时钟效果，定时器定时调用的函数
    // 通过定时器每隔一秒钟再调用一次。
    let du = 0
    setInterval(function () {
      //一秒钟秒钟转6°
      du += 6
      if (du >= 360) {
        du = 0
      }
      second.style.transform = `rotate(${du}deg)`;
    }, 1000);
  </script>
</body>

</html>

晚风的街
关注
  • 7
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebAPI-day-01.md
10-23
自给学习整理的笔记，即可以为自给提供复习，也可以为大家提供帮助。喜欢请关注
day02_WebAPIs.md
07-22
黑马前端
Web APIs_day04
m0_74153968的博客
08-10 711
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。（2）删除节点和隐藏节点（display:none） 的区别： 隐藏节点还是存在的，但是删除，则从html中删除节点。算法：将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数（剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间）指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。
Web APIs _day03
m0_74153968的博客
08-02 954
script>//获取大复选框//获取小复选框//添加大复选框点击事件i++) {})//添加小复选框点击事件i++) {})
Web APIs _day02
m0_74153968的博客
07-31 512
定义：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数。事件监听就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。事件对象：也是个对象，这个对象里有事件触发时的相关信息。例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮。（1）在事件绑定的回调函数的第一个参数就是事件对象。
Web APIs_day05
最新发布
m0_74153968的博客
08-16 673
（1）数据存储在用户浏览器中（2）设置、读取方便、甚至页面刷新不丢失数据（3）容量较大，sessionStorage和localStorage约 5M 左右。
day01_WebAPIs
function_road的博客
05-29 380
day01 - Web APIs 学习目标： 能够通过ID来获取元素 能够通过标签名来获取元素 能够通过class来获取元素 能够通过选择器来获取元素 能够获取body和html元素 能够给元素注册事件 能够修改元素的内容 能够区分innerText和innerHTML的区别 能够修改像div这类普通元素的属性 能够修改表单元素的属性 能够修改元素的样式属性 1.1. Web API介绍 1....
web APIs_day06
qq_44697315的博客
03-23 51
web APIs
APIs_day1-2
weixin_55598229的博客
04-03 232
小结小结练习。
day04_WebAPIs
function_road的博客
05-29 177
day04 - Web APIs 学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用histo...
day02_WebAPIs
function_road的博客
05-29 167
day02 - Web APIs 学习目标： 能够说出排他操作的一般实现步骤 能够使用html5中的dataset方式操作自定义属性 能够根据提示完成百度换肤的案例 能够根据提示完成全选案例 能够根据提示完成tab栏切换案例 能够区分元素节点、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createEl...
webAPIs-day02笔记.md
12-06
webAPIs-day02笔记.md
Firefox OS App Day_Web APIs
03-22
【Firefox OS App Day_Web APIs】这一主题聚焦于利用HTML5和Web APIs在Firefox操作系统上构建应用程序的实践。HTML5是现代网页开发的核心标准，它引入了许多新的元素、APIs和功能，极大地增强了网络应用的能力，使之...
work-day-APIS
05-01
"work-day-APIS"是一个项目，专注于提供与工作日相关的API服务，允许用户通过编程方式管理和记录他们的日常活动。这个API可能包含了处理工作日活动的各种功能，如添加、查看和更新任务，以及可能的时间跟踪和提醒...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 647
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
caryeko的专栏
08-15 159
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 370
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 770
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值