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

最新推荐文章于 2024-09-29 23:48:51 发布

m0_62413155

最新推荐文章于 2024-09-29 23:48:51 发布

阅读量1.1k

点赞数 29

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_62413155/article/details/137174297

版权

本文详细介绍了JavaScript编程语言的基础知识，包括ECMAScript语法、浏览器对象模型(BOM)、DOM操作，以及变量声明、运算符、流程控制、函数调用、数据类型、数组和对象处理等内容。

摘要由CSDN通过智能技术生成

一、JavaScript的简介

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

二、JavaScript的引入

1.html内部使用script标签

在script内部直接编写js

2.在外部js文件中编写

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

三、JavaScript的基本语法

1、变量的声明

const（constant）:`声明常量
- 必须赋值
- 不可更改
let: 声明局部变量
- 出了语句块失效
- 没有赋值前不能访问
- 只能声明一次
- 一般写在{}中
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、运算符

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

3、流程控制

顺序结构
分支结构
- if(条件){语句块}
- if(条件){语句块} else{语句块}
- if(条件){语句块} else if(条件){语句块} else{语句块}
循环结构
- for(变量初始值；终止条件；每次变化条件){语句块}
- while(条件){语句块条件变量}
  先判断，再执行
- do{语句块}while(条件)
  先执行，再判断

4、函数的调用

function 函数名(){语句块 return ；}
调用：函数名();

    <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、数据类型

①字符串

length：长度
charAt：根据索引找字符串，不报错
indexof：根据字符找索引，找不到返回-1
concat：字符串拼接
endsWith：结尾
startsWith：开头
replace：替换
match：匹配字符；返回字典对象
search：匹配字符；返回索引
slice：切片；不包含stop
- slice(start, stop)
split：切割；支持空字符切割
toLowerCase：转小写
toUpperCase：转大写
trim：剔除空格

②数组

普通数组方法

join：拼接：将数组中的元素转化为字符串，以某元素拼接，不改变原数组
length：长度
- 遍历：0~length-1
concat：数组连接；不影响原始数组
includes：是否包含
indexOf：返回元素索引；找不到返回-1
join：将元素使用字符拼接
pop：删除末尾
push：末尾插入
shift：删除开头
unshift：开头插入
reverse：逆序；影响原数组
sort：排序；影响原数组
splice
- start：操作的索引位置
- deleteCount：删除个数：可选
- items：插入内容：可选
- 向数组中添加或删除元素，并返回被删除的元素
- array.splice(start, deleteCount, item1, item2, …)
slice：切片；不影响原数组

高阶函数

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

forEach：遍历；没有返回值
filter：过滤；以列表的形式返回符合条件的value
find：返回符合条件的第一个索引
map：映射；返回新的一对一的新列表
every：所有value符合条件才返回true
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>

③对象

通过键查询值
- 对象名.键名
- 对象名[“键名”]
Object.keys(对象名)
查看所有的键
let keys = Object.keys(对象名)
遍历
- 先找到索引，再遍历
  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]);}
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、延时操作

setTimeout：只延时执行一次
setInterval：每隔一段时间执行一次
清除
- 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、页面元素获取

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

2、绑定事件

1. 鼠标事件

- onclick
- onmouse
	- enter
	- leave
	- down
	- up
	- move

2. 表单元素

-	onfocus：聚焦
-	onblur：失去焦点
-	oninput：输入内容改变
- onkeyup：键盘抬起

3. 获取/修改

内容
- innerText：不考虑标签
  例：container.innerText = “百度”
- innerHTML：可以识别标签
  例：container.innerHTML = “百度”
属性
- 非类名
  - href
  - title
  - id
  - ……
  - 对象名.属性名
- 类名
  - 对象.classList
    - add：添加
    - remove：删除
    - contains：是否有
    - 例：a.classList.contains(“a2”)
    - toggle：有就删，没有就添加
样式：行外元素
- 设置：都是设置行内样式；.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>