HTML 中的 JavaScript 操作指南:基础语法与BOM、DOM操作

一、JavaScript的简介

  1. JavaScript 是一种高级的、解释型的编程语言,主要用于在网页上实现交互式的功能。
  2. 网页开发唯一可用语言,增加网页动态性与交互性。
  3. 学习JavaScript可以分为三个部分
    • ECMAScript:js的基础语法
    • BOM:浏览器 对象 模型,把浏览器抽象成一个对象,用js语法来操作浏览器
    • DOM

二、JavaScript的引入

1.html内部使用script标签

在script内部直接编写js

2.在外部js文件中编写

在html内部通过script的src属性引入外部js

三、JavaScript的基本语法

1、变量的声明

  1. const(constant):`声明常量
    • 必须赋值
    • 不可更改
  2. let: 声明局部变量
    • 出了语句块失效
    • 没有赋值前不能访问
    • 只能声明一次
    • 一般写在{}中
  3. var: 声明全局变量
    • 可以多次声明
    • 自带变量提升效果
    • 没有声明就可以访问
<!-- 变量声明在script中 --><script>const PI = 3.14;console.log(PI);{let a=10;console.log(a);}let a=10;console.log(a);console.log(n);var n=20;console.log(n);</script>

2、运算符

  1. 算数运算符
    • 只有:+、-、*、/、%
  2. 赋值运算符
    • =、+=、-=、*=、/=、%=
  3. 特殊
    • 自增、自减
      • a++: 先返回 再a自加1
      • a–: 先返回,再自减1
      • ++a: 先自加1,再返回
      • –a: 先自减1,再返回
  4. 比较运算符
    • >、<、>=、<=、==、!=
    • ==和===
      • ==:只判断值
      • ===:全等于,先判断值,再判断类型
  5. 逻辑运算符
    • js中的真假
      • [ ]、{ }为真
      • js中的假: false、0、“”、null
    • &&
      • 左侧为真,返回右侧
      • 左侧为假,返回左侧
    • ||
      • 左侧为真,返回左侧
      • 左侧为假,返回右侧
    • !
      • 结果只有true/false
      • 非真为假,非假为真
  6. typeof(name):查看变量name的类型
  7. a instance number:查看变量a是不是number类型的

3、流程控制

  1. 顺序结构
  2. 分支结构
    • if(条件){语句块}
    • if(条件){语句块} else{语句块}
    • if(条件){语句块} else if(条件){语句块} else{语句块}
  3. 循环结构
    • for(变量初始值;终止条件;每次变化条件){语句块}
    • while(条件){语句块条件变量}
      先判断,再执行
    • do{语句块}while(条件)
      先执行,再判断

4、函数的调用

  1. function 函数名(){语句块 return ;}
  2. 调用:函数名();
    <script>function mylog(info, n=10) {for(let i=0;i<n;i++){document.write(info,i,"<br>")}}function mylog2(){document.write("开始执行:")mylog("醒醒了")document.write("结束执行。")}mylog2()</script>

5、数据类型

①字符串
  1. length:长度
  2. charAt:根据索引找字符串,不报错
  3. indexof:根据字符找索引,找不到返回-1
  4. concat:字符串拼接
  5. endsWith:结尾
  6. startsWith:开头
  7. replace:替换
  8. match:匹配字符;返回字典对象
  9. search:匹配字符;返回索引
  10. slice:切片;不包含stop
    • slice(start, stop)
  11. split:切割;支持空字符切割
  12. toLowerCase:转小写
  13. toUpperCase:转大写
  14. trim:剔除空格
②数组
普通数组方法
  1. join:拼接:将数组中的元素转化为字符串,以某元素拼接,不改变原数组

  2. length:长度

    • 遍历:0~length-1
  3. concat:数组连接;不影响原始数组

  4. includes:是否包含

  5. indexOf:返回元素索引;找不到返回-1

  6. join:将元素使用字符拼接

  7. pop:删除末尾

  8. push:末尾插入

  9. shift:删除开头

  10. unshift:开头插入

  11. reverse:逆序;影响原数组

  12. sort:排序;影响原数组

  13. splice

    • start:操作的索引位置
    • deleteCount:删除个数:可选
    • items:插入内容:可选
    • 向数组中添加或删除元素,并返回被删除的元素
    • array.splice(start, deleteCount, item1, item2, …)
  14. slice:切片;不影响原数组

高阶函数

形参是匿名函数
第一个参数是值,第二个参数是索引

  1. forEach:遍历;没有返回值
  2. filter:过滤;以列表的形式返回符合条件的value
  3. find:返回符合条件的第一个索引
  4. map:映射;返回新的一对一的新列表
  5. every:所有value符合条件才返回true
  6. some:有一个符合就返回true
<script>
let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(number) {return number * number;
});
console.log(squaredNumbers); // 输出 [1, 4, 9, 16]
</script>
③对象
  1. 通过键查询值
    • 对象名.键名
    • 对象名[“键名”]
  2. Object.keys(对象名)
    查看所有的键
    let keys = Object.keys(对象名)
  3. 遍历
    • 先找到索引,再遍历
      for(let i=0;i<keys.length;i++){console.log(keys[i], obj[keys[i]])}
    • 直接根据索引遍历
      for(let key in o){console.log(key,obj[key]);}
  4. js的序列化与反序列化
    • 序列化:将对象转字符串
      JSON.stringify(对象名)
    • 反序列化
      JSON.parse(字符串名)
<script>// 序列换:对象转换为字符串let obj_str= JSON.stringify(obj)console.log(obj_str,typeof(obj_str));// 反序列let obj2 = JSON.parse(obj_str)console.log(obj2,typeof(obj2));
</script>

6、延时操作

  1. setTimeout:只延时执行一次
  2. setInterval:每隔一段时间执行一次
  3. 清除
    • clearTimeout(func1)
    • clearInterval(func)
<script>// 序列换:对象转换为字符串let obj_str= JSON.stringify(obj)console.log(obj_str,typeof(obj_str));// 反序列let obj2 = JSON.parse(obj_str)console.log(obj2,typeof(obj2));
</script>

四、BOM

1. window全局变量下的属性

2. BOM(Browser Object Model,浏览器对象模型)是一种用于管理浏览器窗口、框架和弹出对话框等浏览器相关组件的编程接口。

3. BOM 主要核心对象

window 对象
document 对象
location 对象
navigator 对象
screen 对象
4. history
- back: 回退
- forward:前进
- go(n)
- 正值,前进
- 负值,后退
- 0,刷新
5. location
- URL,即网址相关
- herf:当前地址; 返回完整的 URL 地址
- protocol:协议;返回协议部分(如 “http:”)
- host:返回主机名
- port:端口
- pathname: 虚拟路径;URL 的路径部分
- search:查询参数;返回 URL 的查询字符串部分。
- hash:路由模式;返回 URL 的片段标识部分(即 # 后面的内容)。
- 锚点
- reload():刷新
6. navigator:userAgent;浏览器身份
7. scrollBy(0,700):滚动多少
scrollTo(0,300):滚动到
8. 延时操作

五、DOM

文档对象模型(Document Object Model,DOM),通过js来操作页面元素.

1、页面元素获取

  1. querySelector: 找到匹配的第一个
  2. querySelectorAll:找到所有;返回类似数组;可以使用下标获取单个
  3. document.query……:搜索整个文档
  4. target.query……:在target内部去找

2、绑定事件

1. 鼠标事件
- onclick
- onmouse- enter- leave- down- up- move
2. 表单元素
-	onfocus:聚焦
-	onblur:失去焦点
-	oninput:输入内容改变
- onkeyup:键盘抬起
3. 获取/修改
  1. 内容
    • innerText:不考虑标签
      例:container.innerText = “百度”
    • innerHTML:可以识别标签
      例:container.innerHTML = “百度”
  2. 属性
    • 非类名
      • href
      • title
      • id
      • ……
      • 对象名.属性名
    • 类名
      • 对象.classList
        • add:添加
        • remove:删除
        • contains:是否有
        • 例:a.classList.contains(“a2”)
        • toggle:有就删,没有就添加
  3. 样式:行外元素
    • 设置:都是设置行内样式;.style.样式属性名=
    • 获取
      • 行内样式可以直接通过style.样式属性名获取
        例:span.style.backgroundColor
      • 内部样式表以及外部样式表
        需要通过getComputedStyle(obj).样式属性名
        例:let spanStyle = getComputedStyle(span)
    <script>let footer = document.querySelector(".footer");console.log(footer);let ps = footer.querySelectorAll("p")console.log(ps);// 遍历ps.forEach(function(item){console.log(item);})</script>
4. 相关元素
  1. parentElement:父节点;标签名.parentElement
  2. children:所有直接子节点;返回列表,可以使用下标,可以计算长度
  3. nextElementSibling:下一个相邻
  4. previousElementSibling:上一个相邻
5.元素的创建与删除
  1. createElement:创建元素
    只能用document创建document.createElement(“img”);
  2. appendChild
    将元素插入文档
    例: p2.appendChild(span);将span添加进p2中
  3. remove
    删除元素
    标签.remove
    例:img.remove()

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

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

相关文章

聊聊多版本并发控制(MVCC)

多版本并发控制&#xff08;MVCC&#xff09; MVCC一直是数据库部分的高频面试题&#xff0c;这篇文章来聊聊MVCC是什么&#xff0c;以及一些底层原理的实现。 当前读和快照读&#xff1a; 当前读&#xff1a;读取的是事务最新的版本&#xff0c;读取的过程中其他并发事务不…

SpringBoot学习记录(1)

1. 注解 (1) RestController RestController 是一个组合注解&#xff0c;包含了Controller 和ResponseBody 两个注解的功能。 用RestController 标记的类表示这是一个RESTful 风格的控制器&#xff0c;它可以处理HTTP请求并返回JSON格式的响应。 controller&#x…

全栈的自我修养 ———— uniapp中封装api请求

api import request from /tools/request export function login(loginMessage) {return request({url: /login,data: loginMessage,loading: true}) }request // request const urlArr {DEV: http://localhost:6060, // 开发PRO: https://域名:6060, // 生产 }let BASEURL …

适用于 Windows 的 6 个最佳视频转换器

视频转换器可以帮助您在设备上转换和播放不受支持的视频格式。它还可以方便地减小视频文件大小、以通用格式组织所有视频或与其他人共享文件以在不同设备上播放。 Windows 有大量视频转换器可供选择。虽然有些是免费的&#xff0c;但其他一些则提供迎合专业用户的高级功能。在…

Android 二维码相关(三)

Android 二维码相关(三) 本篇文章主要讲下二维码扫描相关. 1: 权限相关 由于文中需要使用Camera以及surfaceview,所以我们需要提前申请相机权限: <uses-permission android:name"android.permission.CAMERA" />2: 添加SurfaceView预览 <?xml version&…

【DETR系列目标检测算法代码精讲】01 DETR算法01 DETR算法框架和网络结构介绍

为什么要有DETR 总所周知&#xff0c;传统的目标检测算法非常依赖于anchor和nms等手工设计操作&#xff0c;非常费时费力&#xff0c;自然而然的就产生了取消这些操作的想法。但是我们首先需要思考的是&#xff0c;为什么我们需要anchor和nms&#xff1f; 因为我们是没有指定…

Altium Designer许可需求分析

在电子设计的世界中&#xff0c;Altium Designer已成为设计师们的得力助手。然而&#xff0c;如何进行有效的许可需求分析&#xff0c;以确保软件的高效使用和企业的可持续发展&#xff1f;本文将带您了解如何进行Altium Designer的许可需求分析&#xff0c;让您在设计的道路上…

安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 从0开始 工具操作解析【三】

同类博文; 安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 工具操作解析 安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 工具操作解析【二】-CSDN博客 回顾以往 在以前的博文简单介绍了这款工具的rom制作全程。今天针对这款工具的…

【Java多线程】8——CompletableFuture

8 CompletableFuture ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个s…

【UI框架】——保姆式使用教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

win11 环境配置 之 Jmeter(JDK17版本)

一、安装 JDK 1. 安装 jdk 截至当前最新时间&#xff1a; 2024.3.27 jdk最新的版本 是 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/ 建议下载 jdk17 另存为到该电脑的 D 盘下&#xff0c;新建jdk文件夹 开始安装到 jdk 文件夹下 2. 配…

Java23种常见设计模式汇总

七大原则网站地址&#xff1a;设计模式7大原则&#xff0b;类图关系-CSDN博客 创建型设计模式&#xff1a;创建型设计模式合集-CSDN博客 七大结构型设计模式&#xff1a;7大结构型设计模式-CSDN博客 11种行为型设计模式&#xff1a; 11种行为型模式&#xff08;上&#xff0…

Oracle 19c 高可用部署实战系列之Data Guard理论与实战

课程介绍 Oracle Data Guard确保企业数据的高可用性、数据保护和灾难恢复。 Oracle Data Guard提供了一组全面的服务&#xff0c;用于创建、维护、管理和监视一个或多个备用数据库&#xff0c;使生产Oracle数据库能够在灾难和数据损坏中幸存下来。Oracle Data Guard将这些备用…

我于窗中窥月光,恰如仰头见“链表”(Java篇)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Python计算物理粒子及拉格朗日和哈密顿动力学

&#x1f3af;要点 运动和计算&#xff0c;牛顿运动定律&#xff0c;&#x1f3af;Python符号计算粒子速度随时间变化的微分方程&#xff0c;并绘制运动趋势图。单粒子一维物理运动&#xff0c;数学方程表示和计算&#xff1a;&#x1f3af;在重力作用下和空气阻力为线性&…

java项目通用Dockerfile

创建Dockerfile文件&#xff0c;放到项目根目录下和pom.xml同级别 仅需修改为自己项目端口号即可&#xff0c;其他的无需改动 FROM openjdk:11.0.11-jre-slimCOPY target/*.jar .EXPOSE 8080ENTRYPOINT java -jar *.jar构建语句(注意末尾的点 . ) docker build -t container…

代码随想录算法训练营第38天 | 509.斐波那契数, 70。爬楼梯, 746.使用最小花费爬楼梯

Leetcode - 509&#xff1a;斐波那契数 题目&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(…

协程的好处

轻量级&#xff1a;协程是比线程更轻量级的任务单元&#xff0c;它们在应用程序中的创建和销毁的开销较低。相比于线程&#xff0c;可以创建大量的协程而不会造成显著的资源消耗。 协作式调度&#xff1a;协程采用协作式调度方式&#xff0c;即协程主动让出执行权给其他协程&am…

实现公网数据传输给内网(使用frp)

如果你想在内网设备2上运行 FRP 服务器端&#xff08;frps&#xff09;&#xff0c;在内网设备3上运行 FRP 客户端&#xff08;frpc&#xff09;&#xff0c;并使用公网设备1来完成数据传输&#xff0c;你需要通过公网设备1来访问设备2&#xff0c;然后设备2再转发请求到设备3。…

Android Studio Iguana | 2023.2.1 补丁 1

Android Studio Iguana | 2023.2.1 Canary 3 已修复的问题Android Gradle 插件 问题 295205663 将 AGP 从 8.0.2 更新到 8.1.0 后&#xff0c;任务“:app:mergeReleaseClasses”执行失败 问题 298008231 [Gradle 8.4][升级] 由于使用 kotlin gradle 插件中已废弃的功能&#…