WebAPIs 第一天

1.声明变量const优先(补充)

2.WebAPI基本认知

  • 作用和分类
  •  DOM树和DOM对象

3.获取DOM元素

4.DOM修改元素内容

5.操作元素属性

6.定时器-间歇函数

一.声明变量const优先

①  变量声明有var let const

②  建议const优先,尽量使用const,原因是:

  • const语义化更好
  • 很多变量我们声明的时候就知道不会修改了,就使用const
  • 实际开发中,基本都使用const
  • 建议先给const,如果发现后面是被修改的,改为let
  • const声明的值不能更改,const声明变量的时候需要进行初始化
  • 对于引用类型,const声明的变量,里面存的不是值,是地址

③ const声明的对象为什么可以修改里面的属性

  • 因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错 

二. WebAPI基本认知

① 作用和分类

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

② DOM

  •  概念:文档对象模型是用来呈现以及与任意HTML或XML文档交互的API,是浏览器提供一套专门用来操作网页内容的功能
  • 作用:开发网页内容特效和实现用户交互

③ DOM树

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

 

 ④ DOM对象:浏览器根据html标签生成的JS对象

  • 所有的标签属性都可以在这个对象上找到
  • 修改这个对象的属性会自动映射到标签身上

⑤ DOM的核心思想:把网页内容当作对象处理

⑥ document 对象

  • 是DOM里提供一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
  • 网页所有内容都在document里面

三.获取DOM元素

① 两种方式

  • 根据CSS选择器来获取DOM元素(重点)
  • 其他获取DOM元素方法(了解)

② 选择匹配的第一个元素

  语法:document.querySelector('css选择器')

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

  返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象

 如果没有匹配到,则返回null

③ 选择匹配的多个元素

 语法:document.querySelectorAll('css选择器')

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

返回值:CSS选择器匹配到的NodeList 对象集合

举例:

const lis = document.querySelectorAll('ul li')

得到的是一个伪数组(有长度有索引号,但是没有push和pop方法)

哪怕只有一个元素,通过querySelectAll获取过来的也是一个伪数组,里面只有一个元素

遍历:

const lis = document.querySelectorAll('.nav li')
for (let i = 0; i < lis.length; i++) {console.log(lis[i]);
}

④ 其他方式 (了解)

  • document.getElementById('nav')   通过id获取一个元素

  • document.getElementsByTagName('div') 根据标签获取一类元素,获取页面所有div

  • document.getElementsByClassName('w')  根据类名获取元素 获取页面所有类名为w的元素

四.DOM修改元素内容

  •  DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象
  • 就是操作对象使用的点语法
  • 如果想要修改标签元素的里面的内容,可以使用以下方式

        ① 对象.innerText属性

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

        ② 对象.innerHTML属性

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

五.操作元素属性

1.操作元素常用属性

2.操作元素样式属性

3.操作表单元素属性

4.自定义属性

5.1 操作元素常用属性

  • 可以通过JS设置/修改标签元素属性,通过src更换图片
  • 常见的属性:href title src
  • 语法:对象.属性 = 值
const img = document.querySelector('img')
img.src = './images/2.webp'

 5.2 操作元素样式属性

  • 通过style 属性操作CSS
  • 通过类名(className)操作CSS
  • 通过classList操作类控制CSS

① 通过style属性操作CSS

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

// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式属性, 多组单词采用小驼峰命名法
box.style.width = '100px'
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'

注意:

1.修改样式用过style属性引出

2.如果属性有-连接符,需要转化成小驼峰命名法

3.在赋值的时候,不要忘记加单位

② 通过类名(className)操作CSS

  • 如果修改的样式比较多,直接通过style属性修改比较繁琐,可以借助css类名的形式
  • 语法:元素.className = 'active'
const div = document.querySelector('div')
// 多个类名
div.className = 'box nav'

注意

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

③ 通过classList 操作类控制CSS

  • 为了解决className容易覆盖以前的类名,可以通过classList的方式追加和删除类名
  •  语法:追加(add)    删除(remove)  有旧删除,没有就增加(toggle)
// classList  add 追加 类名不加点,并且是字符串
const box = document.querySelector('.box')
box.classList.add('active')
//  删除类box.classList.remove('box')
// toggle 有就删除,没有就增加
box.classList.toggle('box')

5.3 操作表单元素属性

  • 表单很多情况也需要修改属性,比如小眼睛,可以看到密码,本质就是把表单类型转换为文本框

       获取:DOM对象.属性名                表单.value = '用户名'

       设置:DOM对象.属性名 = 新值     表单.type = 'password'

const uname = document.querySelector('input')
//  1.获取表单里面输入的数据,innerHTML 得不到表单中输入的内容console.log(uname.value)
// 2.设置表单的值   innerHtml得不到表单的内容
uname.value = 'kkkk'
uname.type = 'password'
  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示,如果为true就表示添加了改属性,如果为false就表示移除了该属性
const ipt = document.querySelector('input')
console.log(ipt.checked)
// 只接受bool值
ipt.checked = trueconst btn = document.querySelector('button')
btn.disabled = true

5.4 自定义属性

  • 标准属性:标签天生自带的,比如class id titlt等,可以直接使用点语法操作,比如disabled, checked
  • 自定义属性

        ① 在html5中推出专门的data-自定义属性

        ② 在标签上一律以data-开头

<div data-id="1" data-spm="hello">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>

        ③ 在DOM对象上一律以dataset对象方式获取

const one = document.querySelector('div')
console.log(one.dataset.id)
console.log(one.dataset.spm)

六.定时器 -间歇函数

6.1 定时器函数介绍

① 每隔一段事件就需要自动执行一段代码,不需要手动触发

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

(1)开启定时器

  •   作用:每隔一段时间调用一下这个函数
  •   间隔时间单位是毫秒
  •  定时器返回的是一个id数字
setInterval(函数,间隔时间)setInterval(function () {console.log('一秒执行一次')
}, 1000)function fn () {console.log('一秒执行一次')
}//  调用的时候写的是函数名,不要加小括号
// 不是立即执行,是经过1000秒之后才执行
let n = setInterval(fn, 1000)// 这样写也是可以的
// setInterval('fn()', 1000) 

(2)关闭定时器

function fn () {console.log('一秒执行一次')
}
//  调用的时候写的是函数名,不要加小括号
// 不是立即执行,是经过1000秒之后才执行
let n = setInterval(fn, 1000)
clearInterval(n)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java的内存模型

Java内存基础 并发编程模型的两个关键问题 线程之间如何通信及线程之间如何同步 线程之间的通信机制有两种&#xff1a;共享内存和消息传递。 在共享内存的并发模型里&#xff0c;线程之间共享程序的公共状态&#xff0c;通过写-读内存中的公共状态 进行隐式通信。在消息传…

财务管理系统javaweb会计账房进销存jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 财务管理系统javaweb java,Struts2,bootstrap,mysql,…

jzoj 1028: 【入门】最小公倍数

1028: 【入门】最小公倍数 时间限制: 1.000 Sec 内存限制: 16 MB 提交: 19748 解决: 13503 题目描述 求两个整数M和N的最小公倍数。 输入 输入一行&#xff0c;包括两个整数. 输出 输出只有一行&#xff08;这意味着末尾有一个回车符号&#xff09;&#xff0c;包括1个…

删除块参照 删除块定义

删除块参照 void CDwgDatabaseUtil::DeleteBlockReference(CString strBlockName) {// 锁定文档acDocManager->lockDocument(acDocManager->curDocument());AcDbObjectId objRecId;if (

Vue中实现图片懒加载简单说明

1.安装 npm i vue-lazyload1.2.6 2.导入 import VueLazyload from "vue-lazyload"; 3.注册插件 说明&#xff1a;main.js文件 import imgs_src from "src" Vue.use(VueLazyload, {// 懒加载默认图片loading:"imgs_src" }); 4.前台 说明:vue文…

关于Transformer的理解

关于Transformer&#xff0c; QKV的意义表示其更像是一个可学习的查询系统&#xff0c;或许以前搜索引擎的算法就与此有关或者某个分支的搜索算法与此类似。 Can anyone help me to understand this image? - #2 by J_Johnson - nlp - PyTorch Forums Embeddings - these ar…

leetcode202. 快乐数

题目&#xff1a;leetcode202. 快乐数 描述&#xff1a; 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无…

两只小企鹅(Python实现)

目录 1 和她浪漫的昨天 2 未来的旖旎风景 3 Python完整代码 1 和她浪漫的昨天 是的,春天需要你。经常会有一颗星等着你抬头去看&#xff1b; 和她一起吹晚风吗﹖在春天的柏油路夏日的桥头秋季的公园寒冬的阳台&#xff1b; 这世界不停开花&#xff0c;我想放进你心里一朵&am…

Linux 终端命令之文件浏览(1) cat

Linux 文件浏览命令 cat, more, less, head, tail&#xff0c;此五个文件浏览类的命令皆为外部命令。 hannHannYang:~$ which cat /usr/bin/cat hannHannYang:~$ which more /usr/bin/more hannHannYang:~$ which less /usr/bin/less hannHannYang:~$ which head /usr/bin/he…

XML-BEANS compiled schema: Could not locate compiled schema resource 异常处理

使用poi5.2.2生成ppt&#xff0c;生成堆叠图&#xff0c;设置值时抛出异常 XML-BEANS compiled schema: Could not locate compiled schema resource org/apache/poi/schemas/ooxml/system/ooxml/stoverlappercent872etype.xsb (org.apache.poi.schemas.ooxml.system.ooxml.st…

linux patch 和 git patch

一、Linux patch 文件生成和应用 生成方式1&#xff1a;patch #多文件打 patch diff -uparN file1 file2 > xx.diff diff -uparN folder1 folder12 > xx.diff ------------------------------------------------------- diff --help -u 显示有差异行的前后几行(上下文)…

tensorflow 1.14 的 demo 02 —— tensorboard 远程访问

tensorflow 1.14.0&#xff0c; 提供远程访问 tensorboard 服务的方法 第一步生成 events 文件&#xff1a; 在上一篇demo的基础上加了一句&#xff0c;如下&#xff0c; tf.summary.FileWriter("./tmp/summary", graphsess1.graph) hello_tensorboard_remote.py …

PG常用SQL

数据库 创建数据库 PostgreSQL 创建数据库可以用以下三种方式&#xff1a; 1、使用 CREATE DATABASE SQL 语句来创建。2、使用 createdb 命令来创建。3、使用 pgAdmin 工具。 CREATE DATABASE 创建数据库 CREATE DATABASE 命令需要在 PostgreSQL 命令窗口来执行&#xff0…

【数据结构】哈希表

总结自代码随想录 哈希表的原理&#xff1a; 对象通过HashCode()函数会返回一个int值&#xff1b;将int值与HashTable的长度取余&#xff0c;该余数就是该对象在哈希表中的下标。

Delta动态对冲

Delta动态对冲 1.前言 期权交易有四种基本交易方式:买入看涨期权、卖出看涨期权、买入看跌期权和卖出看跌期权。通过四种基本交易方式与不同行权价期权的结合又能衍生出各种各样的垂直价差组合、跨式组合、宽跨式组合等等组合。而无论期权组合的配置多么复杂,其最基本的属性…

python ffmpeg合并ts文件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;点击跳转 当你从网站下载了一集动漫&#xff0c;然后发现是一堆ts文件&#xff0c;虽然可以打开&#xff0c;但是某个都是10秒左右&#xff0c;…

编写一个函数,将参数字符串反向排列(C语言递归实现)

比如&#xff1a;char arr[ ]"abcdef";逆序之后数组的内容变成&#xff1a;fedcba a b c d e f \0 1.交换a和f 2.逆序中间的bcde 1.交换b和e 2.逆序中间的cd 1.交换c和d 2.c和d之间有一个元素或者没有元素就停止 #include <string.h> void Reverse(char* ps) {…

代码随想录第46天 | 139. 单词拆分、多重背包

139. 单词拆分 确定dp数组以及下标的含义 dp[i] : 字符串长度为i的话&#xff0c;dp[i]为true&#xff0c;表示可以拆分为一个或多个在字典中出现的单词。 确定递推公式 如果确定dp[j] 是true&#xff0c;且 [j, i] 这个区间的子串出现在字典里&#xff0c;那么dp[i]一定是tru…

智安网络|恶意软件在网络安全中的危害与应对策略

恶意软件是指一类具有恶意目的的软件程序&#xff0c;恶意软件是网络安全领域中的一个严重威胁&#xff0c;给个人用户、企业和整个网络生态带来巨大的危害。通过潜伏于合法软件、邮件附件、下载链接等途径传播&#xff0c;破坏用户计算机系统、窃取敏感信息、进行勒索等不法行…

什么是DNS的递归查询和迭代查询?

在 DNS 查询中&#xff0c;有两种主要的查询方式&#xff1a;递归查询和迭代查询。它们的工作方式和关系如下&#xff1a; 递归查询 (Recursive Query)&#xff1a; 当一个客户端&#xff08;例如你的电脑或手机&#xff09;向 DNS 服务器&#xff08;通常是你的本地 DNS 服务器…