夜猫子的知识栈
夜猫子
2022-04-11
目录

javascript基础

# 字符串对象

在JavaScript中，字符串对象常用的属性和方法如下表1和表2所示：

# 表1 字符串对象的属性

属性 说明
length 获取字符串的长度

# 表2 字符串对象的方法

方法 说明
str.toLowerCase()、toUpperCase() 大小写转换
str.charAt(index) 获取某一个字符
str.substring(start，end)不含end, str.substr(start,length)str.slice(start,end),不包含end 截取字符串
replace(regexp,newstr) 替换字符串，一般配合正则使用
str.split(substr)值可为空和符号及字符 分割字符串
str.indexOf('str1',2)、lastIndexOf() 检索字符串的位置，如str1从第二位开始检查

更现代的方法来检查是否包含某字符：str.includes(substr,index),返回的是true和false

# 数组对象

在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”（一般情况下）的数据类型。

数组的创建一般用简写形式，如[1,2,3,4,5]。数组的获取和赋值，都是使用下标的方式，特别注意一点：数组的下标是从0开始，而不是从1开始的。

# 数组的属性

属性 说明
length 获取数组的长度

# 数组的方法

方法 说明
slice() 截取数组部分
unshift() 添加数组元素，在开头添加
push() 添加数组元素，在末尾添加
shift() 删除数组元素，在开头删除
pop() 删除数组元素，在末尾删除
sort() 数组大小比较
reverse() 数组颠倒顺序
join() 将数组元素连接成字符串

还有强大的arr.splice(索引，选择几个数，替换的新元素)

  • 添加/删除元素：

    • push(...items) —— 向尾端添加元素，

    • pop() —— 从尾端提取一个元素，

    • shift() —— 从首端提取一个元素，

    • unshift(...items) —— 向首端添加元素，

    • splice(pos, deleteCount, ...items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items。

    • slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去,同样可以对字符串使用。

    • concat(...items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。

      ​ var sedan = ["S60", "S90"]; ​ var SUV = ["XC40", "XC60", "XC90"]; ​ var Volvo = sedan.concat(SUV);

  • 搜索元素：

    • indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1。
    • includes(value) —— 如果数组有 value，则返回 true，否则返回 false。
    • find/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。
    • findIndex 和 find 类似，但返回索引而不是值。

  • 遍历元素：

    • forEach(func) —— 对每个元素都调用 func，不返回任何内容。

  • 元素判断：

    • some(func) —— 对每个元素都调用 func，返回值中有一个为true则此方法返回true。
    • every(func) —— 对每个元素都调用 func，返回值中全部为true则此方法返回true。

  • 转换数组：

    • map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
    • sort(func) —— 对数组进行原位（in-place）排序，然后返回它。
    • reverse() —— 原位（in-place）反转数组，然后返回它。
    • split/join —— 将字符串转换为数组并返回。
    • reduce/reduceRight(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。
    • copySorted(arr) —— 复制一个数组并不改变原数组

​ let arr = ["HTML", "JavaScript", "CSS"]; let sorted = copySorted(arr);

# 时间对象

对于日期时间对象的方法来说，getXxx()用于获取时间，setXxx()用于设置时间。

# 用于获取时间的getXxx()

方法 说明
getFullYear() 获取年份，取值为4位数字
getMonth() 获取月份，取值为0（一月）到11（十二月）之间的整数
getDate() 获取日数，取值为1~31之间的整数
getHours() 获取小时数，取值为0~23之间的整数
getMinutes() 获取分钟数，取值为0~59之间的整数
getSeconds() 获取秒数，取值为0~59之间的整数

# 用于设置时间的setXxx()

方法 说明
setFullYear() 可以设置年、月、日
setMonth() 可以设置月、日
setDate() 可以设置日
setHours() 可以设置时、分、秒、毫秒
setMinutes() 可以设置分、秒、毫秒
setSeconds() 可以设置秒、毫秒

# 数学对象

对于Math对象的属性来说，我们只需要掌握Math.PI（即圆周率π，一pi为180°）就行。

度数*Math.PI/180为度数的表达方式

对于Math对象的方法来说，我们需要掌握下表中这些方法就行了。

# Math对象常用方法

方法 说明
max(a,b,…,n) 返回一组数中的最大值
min(a,b,…,n) 返回一组数中的最小值
sin(x) 正弦
cos(x) 余弦
tan(x) 正切
asin(x) 反正弦
acos(x) 反余弦
atan(x) 反正切
atan2(x) 反正切
floor(x) 向下取整
ceil(x) 向上取整
random() 生成随机数

# DOM基础

# 1、DOM是什么？

对于DOM，我们总结出以下几点：

（1）DOM操作，可以简单理解成：元素操作；

（2）一个HTML文档就是一棵节点树，页面中的每一个元素就是一个树节点；

（3）每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，就是把这个元素看成一个对象，然后用这个对象的属性和方法进行操作；

# 2、节点类型

DOM节点共有12种类型，不过常见的只有3种（其他不用管）：

（1）元素节点，nodeType值为1

（2）属性节点，nodeType值为2

（3）文本节点；nodeType值为3

# 3、获取元素

在JavaScript中，我们可以通过6种方式来获取指定元素：

（1）getElementById()

（2）getElementsByTagName()

（3）getElementsByClassName()

（4）querySelector()和querySelectorAll()

（5）getElementsByName()

（6）document.title和document.body

虽然这些方法名又长又臭，不过根据英文意思来记忆就很轻松啦。此外对于这些获取元素的方式，有几点需要我们注意的：

（1）只有getElementsByTagName()可以操作动态DOM，其他的都不行

（2）querySelector()表示选取满足选择条件的第1个元素，querySeletorAll()表示选取满足条件的所有元素

（3）当你选取的只有一个元素时，querySelector()和querySelectorAll()是等价的

（4）getElementsByName只用于表单元素，准确来说一般用于单选按钮和复选框

（5）getElementsByTagName()、getElementsByClassName()、getElementsByName()这3个方法返回的都是一个类数组（elements嘛），想要准确获取其中一个元素，可以使用数组下标来实现

# 4、DOM操作

DOM操作的方法

方法 说明
createElement() 创建元素节点
createTextNode() 创建文本节点
appendChild 插入元素，在父元素最后一个子元素后面插入
insertBefore() 插入元素，在父元素任意一个子元素前面插入
removeChild() 删除元素
cloneNode() 复制元素，默认是 false。true，克隆节点及其属性，以及后代。 false，只克隆自身没有节点
replaceChild() 替换元素

在HTML中直接添加元素，这是静态方法。而使用JavaScript添加元素，这是动态方法。这一章介绍的这些就是动态方法，也叫动态DOM操作。动态DOM操作在实际开发中用途是非常广的。

# DOM进阶

# 1、HTML属性操作

在JavaScript中，有2种操作HTML元素属性的方式，一种是用“对象属性”，另外一种是用“对象方法”。不管是用哪种方式，都涉及2种操作：①获取HTML属性值；②设置HTML属性值。

# （1）“对象属性”方式

obj.attr //获取值

obj.attr = "值" //设置值

# （2）“对象方法”方式（主要应用自定义属性）

obj.getAttribute("attr") //获取值

obj.setAttribute("attr","值") //设置值

obj.removeAttribute（"attr"） //删除值

对于操作HTML属性的2种方式，我们总结一下：

①“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性；

②只有“对象方法方式”才可以操作自定义属性；

# 2、CSS属性操作

# （1）获取值

getComputedStyle(obj).attr

# （2）设置值

obj.style.attr = "值"; //使用style对象

obj.style.cssText = "值" //使用cssText属性

# 3、DOM遍历

# DOM遍历的属性

属性 说明
parentNode 查找父元素
childNodes、firstChild、lastChild 查找子元素，包含文本节点
children、firstElementChild、lastElementChild 查找所有子元素，不包含文本节点
previousSibling、nextSibling 查找兄弟元素，包含文本节点
previousElementSibling、nextElementSibling 查找兄弟原始，不包含文本节点

# 4、innerHTML和innerText

在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

# 5.获取dom元素的位置及大小

img

属性 说明
offsetLeft、offsetTop 获取元素偏移（元素相对于父级偏移）如果父元素定位了就以父元素为主，否则就以body为主
offsetWidth、offsetHeight 获取元素宽高其中包含border,width,padding）
offsetParent 返回该元素带有定位的父元素否则返回body
window.pageYOffse 获取整个网页页面被卷去的头部的距离
e.clientTop、clientLeft 返回元素上边框和左边框的大小
e.clientWidth、clientHeight 返回自身包含padding的大小（不带单位），与offset的区别就是不包含边框
e.scrollTop、scrollLeft 返回被卷去的上侧或左侧距离即超出的部分

offset 和 style 的区别，offset 可以获取任意的样式只能读取不能改变，style只能获取行内样式但能设置；

所以，获取信息用 offset 修改样式用 style

可以与鼠标事件结合，可以通过e.pageX-obj.offsetLeft来获取鼠标相对于盒子的位置

总结

获取元素位置：offsetLeft/Top

获取元素大小：clientWidth/Height

获取滚动距离：scrollTop/Left

同时注意的是：获取页面的滚动距离是通过 window.pageYOffse 来获取的

# 事件基础

事件操作是JavaScript的核心，不懂事件操作，JavaScript等于白学。在JavaScript中，事件调用方式有2种：①在script标签中调用；②在元素中调用。

# 鼠标事件

事件 说明
onclick 鼠标单击，ondblclick是双击
onmouseover（不仅经过目标自身触发，经过子盒子也会触发，因为子盒子没有事件所以会冒泡给父盒子） 鼠标移入，区别mouseenter是只经过自身触发
onmouseout 鼠标移出，mouseleave区别同上
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动

鼠标事件对象：

属性 说明
clientX 返回鼠标相对浏览器当前可视区的x坐标
clientY 返回鼠标相对浏览器的y坐标
pageX 返回鼠标相对文档页面x坐标
pageY 返回鼠标相对文档页面y坐标
screenX 返回鼠标相对电脑屏幕x坐标
screenY 返回鼠标相对电脑屏幕y坐标
offsetX 返回鼠标相对当前对象左上顶角x轴坐标
offsetY 返回鼠标相对当前对象左上顶角y轴坐标

# 键盘事件

事件 说明
onkeydown 键盘按下
onkeyup 键盘松开

# 表单事件

事件 说明
onfocus 获取焦点
onblur 失去焦点
onselect 选择文本
onchange 选择某一项触发（单选框、复选框、下拉菜单）

# 编辑事件

事件 说明
oncopy 用于防止文本被复制
onselectstart 用于防止文本被选取
oncontextmenu 用于禁止鼠标右键

# 页面事件

事件 说明
window.onload 页面加载完毕触发
window.onunload 离开页面触发

和onload类似的还有DOMContentloaded,区别是其只预加载dom而不预加载css和图片等。主要应用于图片太多太大，加载太慢的情形。

上面列出来的都是JavaScript中最常用的事件，对于不常用的，我们已经舍弃掉了。学完这些，我们可以自己尝试开发一下各种效果了，如图片轮播、Tab选项卡、回顶部等。

此外，这些事件大多数都是针对PC端的，像移动端还有一些特殊的事件如touchstart、touchend、touchemove等

# 事件进阶

# 1、事件监听器

在JavaScript中，想要给元素添加一个事件，其实我们有2种方式：①事件处理器；②事件监听器。

obj.addEventListener("click", function () {……);}, false);

obj.onclick = function () {……};

如果想要为一个元素添加多个相同事件，必须要用事件监听器，而不能用事件处理器。

# （1）绑定事件

语法：

obj.addEventListener(type , fn , false)

# （2）解绑事件

语法：

obj.removeEventListener(type , fn , false);

说明：

removeEventListener()只能解除“事件监听器”添加的事件，如果要解除“事件处理器”添加的事件，需要用“obj.事件名 = null;”方法来实现。

# 2、event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。

event对象的属性

属性 说明
type 事件类型
keyCode 键码值
shiftKey 是否按下shift键
ctrlKey 是否按下Ctrl键
altKey 是否按下Alt键

# 3、this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

# 4、监听事件和冒泡捕获

**事件流：**通常，一个事件会从父元素开始向目标元素传播，然后它将被传播回父元素。

JavaScript 事件分为三个阶段：

  • 捕获阶段：事件从父元素开始向目标元素传播，从 Window 对象开始传播。
  • 目标阶段：该事件到达目标元素或开始该事件的元素。
  • 冒泡阶段：这时与捕获阶段相反，事件向父元素传播，直到 Window 对象。

09441W5b-0

**事件捕获：**事件从根节点流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直到目标元素（事件的执行顺序是从上往下的）；

**事件冒泡：**与事件捕获相反，事件会从目标节点流向根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直到最顶层元素（事件的执行顺序是从下往上的）。（默认为事件冒泡）

**如何阻止冒泡行为：**插入 e.stopPropagation() 即可阻止冒泡进行，考虑兼容性使用 e.cancelBubble=true 方法。

事件监听：

在 addEventListener() 中省略或将 useCapture 参数设置为 false，将注册冒泡阶段的事件。所以，事件监听器默认监听冒泡事件。

<body>
    <div class="div2">
    	<div class="div1">
    		<button></button>
		</div>
	</div>
</body>


window.addEventListener("click", () => {
    console.log('Window');
  },true);

document.addEventListener("click", () => {
    console.log('Document');
  }); // 已注册为冒泡

document.querySelector(".div2").addEventListener("click", () => { 
    console.log('DIV 2');
  }); // 已注册为冒泡

document.querySelector(".div1").addEventListener("click", () => {
    console.log('DIV 1');
  },true);

document.querySelector("button").addEventListener("click", () => {
    console.log('CLICK ME!');
  },true);

// 初始点击按钮，事件的执行顺序如下
Window
DIV 1
CLICK ME!
DIV 2
Document
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

**实用：**事件委托

也叫事件代理，只操作一次dom，提高了效率。

**其原理：**不给每个子节点单独设置事件监听器，而是设在父节点上，然后利用冒泡原理设置影响每个子节点。如，给 ul 注册点击事件，然后利用target来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，并可以修改当前触发的子元素如 e.target.stye.color="red"。

# window对象

一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。

# window对象下的重要子对象

子对象 说明
document 文档对象，用于操作页面元素
location 地址对象，用于操作URL地址
navigator 浏览器对象，用于获取浏览器版本信息

# 1、窗口操作

# （1）打开窗口

window.open(url, target)

# （2）关闭窗口

window.close()

# 2、对话框

# 3种对话框

方法 说明
alert() 仅提示文字，没有返回值
confirm() 具有提示文字，返回“布尔值”（true或false）
prompt() 具有提示文字，返回“字符串”

# 3、定时器

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

我们也可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterva()来取消执行setInterval()。

# 4、location对象

location对象的属性。location.href就表示获取当前页面地址的所有属性

比如提交按钮会将input表单里的信息传到location里面，这样就可以在另一个页面通过search来获取该信息了。

属性 说明
href 当前页面地址
search 当前页面地址“？”后面的内容，返回的是参数
hash 当前页面地址“#”后面的内容，锚点

location对象方法

location.assign(地址);和href一样可以跳转页面

location.replace(地址);替换当前页面，因为不记录历史所以不能后退页面

# 5、navigator对象

在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。主要是其中的navigator.userAgent属性。

# document对象

document对象其实是window对象下的一个子对象来的，它操作的是HTML文档里所有的内容。document对象常用的属性和方法如下：

# document对象常用的属性

属性 说明
document.title 获取文档的title
document.body 获取文档的body
document.URL 当前文档的URL
document.referrer 返回使浏览者到达当前文档的URL

# document对象常用的方法

方法 说明
document.getElementById() 通过id获取元素
document.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过class获取元素
document.getElementsByName() 通过name获取元素
document.querySelector() 通过选择器获取元素，只获取第1个
document.querySelectorAll() 通过选择器获取元素，获取所有
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.write() 输出内容
document.writeln() 输出内容并换行
编辑 (opens new window)
#基础
上次更新: 2023/7/11 18:57:41
javascript中的对象

javascript中的对象→

最近更新
01
IoC 解决了什么痛点问题？
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License