JavaScript 学习笔记（WEB APIs Day1）

「写在前面」

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：
1. JavaScript 学习笔记（Day1）
2. JavaScript 学习笔记（Day2）
3. JavaScript 学习笔记（Day3）
4. JavaScript 学习笔记（Day4）
5. JavaScript 学习笔记（Day5）

目录

  • 1 Web APIs 课程安排
  • 2 变量声明
  • 3 Web API 基本认知
  • 4 获取DOM对象
  • 5 操作元素内容
  • 6 操作元素属性
  • 7 定时器-间歇函数
  • 8 综合案例

1 Web APIs 课程安排

P78：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=78

2 变量声明

P79：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=79

变量声明时，用 let 还是 const？

建议：有了变量先给 const，如果发现它后面是要被修改的，再改为 let

  • const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
  • 但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。
alt
alt

3 Web API 基本认知

3.1 作用和分类

P80：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=80

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

3.2 什么是DOM

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

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

DOM 作用：开发网页内容特效和实现用户交互

3.3 DOM树

DOM树是什么：

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

3.4 DOM对象

  • DOM对象：浏览器根据 html 标签生成的 JS对象
    • 所有的标签属性都可以在这个对象上面找到
    • 修改这个对象的属性会自动映射到标签身上
  • DOM的核心思想
    • 把网页内容当做 对象来处理
  • document 对象
    • 是 DOM 里提供的一个 对象
    • 所以它提供的属性和方法都是 用来访问和操作网页内容的
      • 例：document.write()
    • 网页所有内容都在 document 里面 
<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    console.dir(div) // dom 对象
  </script>
</body>

4 获取DOM对象

P81：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=81

4.1 根据CSS选择器来获取DOM元素

1. 选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数:

  • 包含一个或多个有效的CSS选择器 字符串

返回值：

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

2. 选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数:

  • 包含一个或多个有效的CSS选择器 字符串

返回值：

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

得到的是一个伪数组：

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法

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

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

<body>
  <div class="box">123</div>
  <p id="nav">导航栏</p>
  <ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    // 1. 获取匹配的第一个元素
    const box = document.querySelector('div')
    const box = document.querySelector('.box')
    const nav = document.querySelector('#nav')
    const li = document.querySelector('ul li:first-child')
    // 2. 选择所有的小li
    const lis = document.querySelectorAll('ul li')
    for (let i = 0; i < lis.length; i++){
    console.log(lis[i])  // 输出每一个小li对象
    }
  </script>
</body>

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

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素，获取页面所有div
document.getElementsByTagName('div')
// 根据类名获取元素，获取页面所有类名为w的
document.getElementsByClassName('w')

5 操作元素内容

P82：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=82

1. 元素 .innerText 属性

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本， 不解析标签

2. 元素 .innerHTML 属性

  • 将文本内容添加/更新到任意标签位置
  • 会解析标签，多标签建议使用模板字符 
<body>
  <div class="box">我是文字的内容</div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 获取标签内部的文字
    console.log(box.innerText)
    // 修改文字内容，不解析标签
    box.innerText = '我是一个盒子'
    // 修改文字内容，解析标签
    box.innerHTML = '<strong>我是一个盒子</strong>'
  </script>
</body>

6 操作元素属性

6.1 操作元素常用属性

P83：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=83

语法：对象.属性 = 值

<body>
  <img src="./images/1.webp" alt="">
  <script>
    // 1. 获取图片元素
    const img = document.querySelector('img')
    // 2. 修改图片对象的属性
    img.src = './images/2.webp'
    img.title = 'pink老师的艺术照'
  </script>
</body>

6.2 操作元素样式属性

P84：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=84

1.通过 style 属性操作CSS

语法：对象.style.样式属性 = 值

<body>
  <div class="box"></div>
  <script>
    // 1．获取元素
    const box = document.querySelector('.box')
    // 2．修改样式属性 对象.styLe.样式属性 = '值' 别忘了跟单位
    box.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'
  </script>
</body>

2. 操作类名(className) 操作CSS

P85：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=85

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：

// active 是一个css类名
元素.className = 'active'

注意：

  1. 由于class是关键字, 所以使用 className去代替
  2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

例：

<head>
  <style>
    .nav {
      color: red;
    }
    
    .box {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div class="nav"></div>
  <script>
    // 1. 获取元素
    const div = document.quertSelector('div')
    // 2. 添加类名
    div.className = 'nav box'
  </script>
</body>

3. 通过 classList 操作类控制CSS

P86：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=86

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

语法：

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

例：

<head>
  <style>
    .box {
      width: 300px;
      height: 300px;
      color: #333;
    }
    
    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
    // 1. 获取元素
    const box = document.quertSelector('.box')
    // 2. 通过classList添加样式，类名不加点，并且是字符串
    // add() 追加类
    box.classList.add('active')
    // remove() 删除类
    box.classList.remove('box')
    // toggle() 切换类，有就删掉，没有就加上
    box.classList.toggle('active')
  </script>
</body>

随机轮播图案例：

P87：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=87

P88：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=88

alt

6.3 操作表单元素属性

P89：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=89

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

例：

<body>
  <input type="text" value="电脑">
  <script>
    // 1. 获取元素
    const uname = document.quertSelector('input')
    // 2. 获表单里面的值
    console.log(uname.value) // 电脑
    console.log(uname.type) // text
    // 3. 设置表单的值
    uname.value = '我要买电脑'
    uname.type = 'password'
  </script>
</body>
  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
  • 比如： disabled、checked、selected 
<body>
  <input type="checkbox">
  <script>
    // 1. 获取元素
    const ipt = document.quertSelector('input')
    // 2. 修改属性
    ipt.checked = true // 只接收布尔值，不用字符串
  </script>
</body>

6.4 自定义属性

P90：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=90

  • 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
  • 自定义属性：
    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取

例：

<body>
  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset) // {id: '1', spm: '不知道'}
    console.log(one.dataset.id) // 1
</ script>
</ body>

7 定时器-间歇函数

P91：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=91

定时器函数可以开启和关闭定时器

1. 开启定时器

语法：

setInterval(函数, 间隔时间)
  • 作用：每隔一段时间调用这个函数
  • 间隔时间单位是毫秒

例：

<script>
  setInterval(function () {
    console.log('一秒执行一次')
  }, 1000)
</script>

2. 关闭定时器

语法：

let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)

例：

function fn() {
  console.log('一秒执行一次')
}
// setInterval(函数, 间隔时间)，函数名不用加小括号
let n = setInterval(fn, 1000)
// 关闭定时器
clearInterval(n)

P92：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=92

alt

8 综合案例

P93：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=93

alt

「结束」
alt

本文由 mdnice 多平台发布

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[CISCN 2019华北Day2]Web1

[CISCN 2019华北Day2]Web1

[CISCN 2019华北Day2]Web1 wp 很遗憾的是&#xff0c;我在做这题时没有什么头绪。用 sqlmap 开最高等级也只扫出来库名&#xff0c;表名和列名扫不出来&#xff0c;就算直接指定表名和列名&#xff0c;还是扫不出来&#xff0c;sqlmap 测出来的方法是时间盲注。 推荐博客&…
阅读更多...
游泳耳机有什么好处？四款适合水下听歌的优质游泳耳机分享

游泳耳机有什么好处？四款适合水下听歌的优质游泳耳机分享

游泳是一项健康有益的运动&#xff0c;而搭配一副高质量的游泳耳机&#xff0c;更能在游泳过程中享受音乐的陪伴。本文将介绍游泳耳机的好处&#xff0c;并为大家推荐四款适合水下听歌的游泳耳机&#xff0c;让大家在游泳中拥有更加丰富的体验。 接下来跟我一起看看游泳耳机的好…
阅读更多...
allegro画PCB如何将版图底板改大

allegro画PCB如何将版图底板改大

Step->Designer Parameter Editor width和hight是你设置的版图高和宽&#xff0c;X和Y是你版图上负坐标的最大值。
阅读更多...
PowerScale重磅升级，加速迈进AI时代

PowerScale重磅升级，加速迈进AI时代

2024开年 给大伙报告一则好消息 Dell非结构化数据存储的扛把子 PowerScale迎来重大升级 第二代PowerScale全闪存系统 即将闪亮登场 此次升级主要涉及硬件、软件及与NVIDIA的合作关系三个方面&#xff0c;升级后的PowerScale有望成为第一个通过 NVIDIA DGX SuperPOD验证的以…
阅读更多...
【电商API接口】电商卖家必看！电商数据源对接全攻略！收藏！

【电商API接口】电商卖家必看！电商数据源对接全攻略！收藏！

电商竞争白热化的今天&#xff0c;一个电商卖家往往会在多个平台铺设店铺来获取更多的客户。 不同的平台有不同的管理系统&#xff0c;因此&#xff0c;卖家们在做分析时需要从多个系统导出数据&#xff0c;比如各类电商平台&#xff08;淘宝、京东......&#xff09;、各类ER…
阅读更多...
Linux安装ossutil工具且在Jenkins中执行shell脚本下载文件

Linux安装ossutil工具且在Jenkins中执行shell脚本下载文件

测试中遇到想通过Jenkins下载OSS桶上的文件&#xff0c;要先在linux上安装ossutil工具&#xff0c;记录安装过程如下&#xff1a; 一、下载安装ossutil&#xff0c;使用命令 1.下载&#xff1a;wget https://gosspublic.alicdn.com/ossutil/1.7.13/ossutil64 2.一定要赋权限…
阅读更多...
大数据开发之Hadoop（优化新特征）

大数据开发之Hadoop（优化新特征）

第 1 章&#xff1a;HDFS-故障排除 注意&#xff1a;采用三台服务器即可&#xff0c;恢复到Yarn开始的服务器快照。 1.1 集群安全模块 1、安全模式&#xff1a;文件系统只接收读数据请求&#xff0c;而不接收删除、修改等变更请求 2、进入安全模式场景 1&#xff09;NameNod…
阅读更多...
kali下-MSF-ftp_login模块破解FTP账号及密码

kali下-MSF-ftp_login模块破解FTP账号及密码

一、环境准备 两台设备在同一个网络内 一台kali系统&#xff1a;192.168.10.128 一台winserver2016&#xff1a;192.168.10.132 二、MSF介绍 metasploit 全称是The Metasploit Framework&#xff0c;又称MSF&#xff0c;是Kali 内置的一款渗透测试框架&#xff0c;也是全球…
阅读更多...
学习JavaEE的日子 day15 访问修饰符，Object，equals底层，final

学习JavaEE的日子 day15 访问修饰符，Object，equals底层，final

Day15 1.访问修饰符 理解&#xff1a;给类、方法、属性定义访问权限的关键字 注意&#xff1a; 1.修饰类只能使用public和默认的访问权限 2.修饰方法和属性可以使用所有的访问权限 经验&#xff1a; 1.属性一般使用private修饰&#xff0c;因为封装 2.属性或者方法如果需要被子…
阅读更多...
珠三角佛山哪里有抄数的公司汽车3d尺寸检测逆向建模三维扫描服务

珠三角佛山哪里有抄数的公司汽车3d尺寸检测逆向建模三维扫描服务

在当今的汽车行业中&#xff0c;随着技术的不断进步&#xff0c;对汽车配件的精度和质量要求也越来越高。传统的测量和设计方法已经无法满足现代工业生产的需要。因此&#xff0c;汽车配件三维扫描及建模设计技术的出现&#xff0c;为汽车制造业带来了革命性的变革。 汽车配件三…
阅读更多...
C++ Linux动态库的编译和调用

C++ Linux动态库的编译和调用

一、C动态库编译 采用g编译C动态库&#xff0c;命令如下&#xff1a; g -fPIC -shared -o 动态库名 cpp文件名1.1 关于fPIC选项 首先了解动态库的载入时重定位。 一般linux的可执行文件都是elf格式&#xff08;一种二进制文件格式&#xff09;&#xff0c;在可执行文件的头部包…
阅读更多...
在线App封装技术：HTML5的新生命

在线App封装技术：HTML5的新生命

HTML5封装的魅力所在HTML5带来了丰富的多媒体功能、地理位置服务、离线存储等特性&#xff0c;使得Web应用的体验更加接近原生App。封装HTML5到App中&#xff0c;可以大大缩短开发周期&#xff0c;降低开发成本&#xff0c;并且一次编写&#xff0c;多平台运行&#xff0c;极大…
阅读更多...
ant-desgin的table的上移、下移

ant-desgin的table的上移、下移

文章目录 html部分函数部分 html部分 <a-table :columns"columns" :data-source"dataList" :loading"listLoading" :pagination"false"><template #bodyCell"{ column, record, index }"><template v-if&qu…
阅读更多...
Xline v0.6.1: 一个用于元数据管理的分布式KV存储

Xline v0.6.1: 一个用于元数据管理的分布式KV存储

Xline是什么&#xff1f;我们为什么要做Xline&#xff1f; Xline是一个基于Curp协议的&#xff0c;用于管理元数据的分布式KV存储。现有的分布式KV存储大多采用Raft共识协议&#xff0c;需要两次RTT才能完成一次请求。当部署在单个数据中心时&#xff0c;节点之间的延迟较低&a…
阅读更多...
2024Java高频面试题之MQ消息中间件，面试都问些什么？（附详细答案）

2024Java高频面试题之MQ消息中间件，面试都问些什么？（附详细答案）

最近很多同学问我有没有java学习资料&#xff0c;我根据我从小白到架构师多年的学习经验整理出来了一份50W字面试解析文档、简历模板、学习路线图、java必看学习书籍 、 需要的小伙伴 可以关注我公众号&#xff1a;“ Tom聊架构 ”&#xff0c; 回复暗号&#xff1a;“ 578”即…
阅读更多...
（人才测评）招聘数据分析师的入职测评方案

（人才测评）招聘数据分析师的入职测评方案

现在是一个大数据的时代&#xff0c;我们的车载导航、淘宝购物、包括人才招聘、都是大数据的产物&#xff0c;然而光靠数据堆积是没用的&#xff0c;所以如何高效的进行数据挖掘与分析&#xff0c;就成了每一件企业思考的问题。 一、 数据分析师的基本工作标准 1、 平时需要…
阅读更多...
信息化和数字化的本质区别是什么？

信息化和数字化的本质区别是什么？

信息化和数字化的本质区别是什么&#xff1f; 谢邀。前两年流行”信息化“&#xff0c;网上铺天盖地都是关于”信息化“的文章&#xff0c;这两年开始流行起“数字化”&#xff0c;于是铺天盖地都是“数字化”的文章&#xff0c;从数字化和信息化这两个关键词热度趋势就可以看…
阅读更多...
qemu安装踩坑记（源码编译make版

qemu安装踩坑记（源码编译make版

qemu安装踩坑记&#xff08;源码编译make版 【写在前面】 本篇文章写于6.27号&#xff0c;发现写完但没发博客2333 大家好这里是β-AS&#xff0c;或者也可以喊我贝塔&#xff0c;或许也可也喊我be7a 没有人会永远学qemu&#xff0c;但永远会有人踩坑.jpg 依旧推荐一首歌 -1…
阅读更多...
如何使用JS逆向爬取网站数据

如何使用JS逆向爬取网站数据

引言&#xff1a; JS逆向是指利用编程技术对网站上的JavaScript代码进行逆向分析&#xff0c;从而实现对网站数据的抓取和分析。这种技术在网络数据采集和分析中具有重要的应用价值&#xff0c;能够帮助程序员获取网站上的有用信息&#xff0c;并进行进一步的处理和分析。 基…
阅读更多...
Pytest插件pytest-django让Django测试更高效

Pytest插件pytest-django让Django测试更高效

在Django应用开发中&#xff0c;测试是确保应用质量的关键环节。然而&#xff0c;Django自带的测试框架并非总能满足开发者的需求&#xff0c;而Pytest插件 pytest-django 则为我们提供了更为灵活、强大的测试工具。本文将深入介绍 pytest-django 插件的基本用法和实际案例&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站