js学习笔记

用户2167649952666
272 阅读12分钟

p63 三元表达式

image.png

p104 数组长度可以修改

image.png

image.png

会有两个空元素 image.png

image.png

p105 数组声明时可以不声明长度，只声明一个空列表

image.png

p115 函数的使用

image.png

p126 arguments

image.png

image.png arguments是一个伪数组，只有函数才有arguments，所有函数都默认内置

p138

js在es5标准下没有块级作用域，es6新增块级作用域。即：在es5标准下for循环里面的变量在循环外也能使用

p139 作用域链 js可以在函数内部定义函数，内部函数可访问外部函数的变量。若变量名冲突，采取就近原则

image.png

p140 p141 预解析

image.png

image.png

函数声明有普通声明和函数表达式函数表达式两种方式。其中函数表达式是将函数写成变量声明的形式，比如： var fun = function() {...}。 当预解析函数表达式的时候，会将var fun;提到最前面，var成了一个变量而不是函数，所以若是调用写在函数声明之前会失败，显示undefine类型。而函数的普通定义方式则不会出现这种情况，预解析会将整个函数定义放在最前面，所以函数调用在声明前和声明后都可以。

p145 对象创建三种方式 利用字面量创建对象

image.png

image.png

image.png 调用属性和方法的两种方式 image.png

p146

image.png

p147 利用new Object创建对象

image.png image.png

p149 利用构造函数创建对象

image.png

示例：

image.png

p150 方法调用

image.png

p151 js没有类的概念，构造函数就相当于类，实例化对象直接使用构造函数实例

p153 对象的遍历

for(变量 in 对象){
    ...
}

循环中变量习惯用k或key，就像java中习惯i一样 image.png

p155 js内置对象导读

image.png

p156 内置对象

image.png

p157 学会查询MDN文档

MDN官网网址

image.png

p158 Math对象 Math对象

p160 js如果对字符串类型的数字运算时，会自动将字符串隐式转换为数字，然后给出正确结果

image.png

p163 Date日期对象 注意：和Math对象不同，Date对象是有构造函数的 初始化Date对象建议使用字符串类型作为参数，不建议使用参数来初始化（可能会有一些问题）

image.png

image.png

image.png

p164 格式化日期

image.png

注意：getMonth()和getDay()是从0开始计算的。getMonth()真实数据值要加1；getDay()周一到周六是正确的，但周日为0

image.png

p166 Date的总毫秒数（时间戳）

image.png

p169 数组组建的两种方式

image.png

image.png

p170 检测是否是数组 instanceof

image.png

p171 添加删除数组元素 添加数组元素

image.png

image.png

image.png

p172 删除数组元素

image.png

p174 数组排序

image.png

image.png

p175 获取数组元素索引

image.png

image.png

p177 数组转换为字符串

image.png

image.png

image.png

p178 基本包装类型

image.png

p179 字符串不可变

当给字符串重新赋值时，原来的字符串保留，系统会在内存中开辟一个新的空间来保存新的字符串。所以，大量修改字符串是个很占用内存的操作，所以不要频繁拼接或者修改字符串

p180 根据字符返回位置

image.png

image.png

p182 根据位置返回字符

image.png

image.png

p183

image.png

p185 拼接以及截取字符串

image.png

p186 替换字符串以及转换为数组

image.png

image.png

p187 简单数据类型和复杂数据类型

image.png

p188

image.png

image.png

p189

image.png

p190 复杂数据类型的传参

复杂数据类型传参是传递的引用。

image.png

总结：

在计算机中，有堆和栈两种空间类型，都可以存放变量。其中栈存放简单数据类型的变量，当将简单类型a的值赋值给简单类型b时，b会在栈中重新开辟一个内存空间，并将a的值复制一份放进这个空间里。所以，对于简单数据类型的赋值以及传参传递的是值的复制，实参和形参是两个地址不同的变量。但对于复杂数据类型，栈中存放的是复杂对象的地址，而复杂类型的值放在堆中。当对复杂类型赋值或传参时，新变量或者形参是在栈中作为一个指针指向原对象在栈中的地址，并不开辟新地址来存放变量。总的来说，在赋值或者传参时，简单类型会在栈中开辟一个新的空间，并复制原变量的值；而复杂类型并不开辟新空间，只是作为一个指针在栈中指向原变量的地址，新变量是它的一个引用

p191 web API简介导读

image.png

p192 web API和JS基础关联性

image.png

image.png

image.png

image.png

p193 API和web API

image.png

image.png

image.png

p194 DOM

image.png

p195

image.png

image.png

image.png

p196 getElementByid获取元素

image.png

p197 getElementsByTagName获取元素

image.png

image.png

p198 H5新增获取元素方式

image.png

image.png

p199 获取body和html元素

image.png

image.png

p200 事件三要素

image.png

p201 执行事件过程

image.png

常见的鼠标事件 image.png

p202 修改元素

image.png

元素添加事件： image.png

元素不添加事件： image.png

p203 innerHTML和innerText区别 innerHTML更常用

image.png

p204 操作元素，修改元素属性

image.png

p209 js修改css样式属性

image.png

p211
循环精灵图
在以前通过精灵图设置很多背景图标时，需要手动一个个去设置，非常麻烦。但其实精灵图排列是有规律的，找到规律可以通过js进行设置。
主要是通过document.querySelecter()获取到一个对象列表，然后对列表元素进行遍历，通过字符串拼接的方式改变backgroundPosion（注意是负值），然后就可以给很多图标设置不同背景了。
示例如下：

image.png

p213 使用className修改样式属性

image.png

image.png image.png

p215
操作元素总结

image.png

p216
排他思想（算法）

image.png

p221
获取自定义属性值

image.png

p222
设置、移除自定义属性

image.png

image.png

image.png

image.png

p226
h5自定义属性书写规范与获取 data-

image.png

image.png

image.png

p227
节点操作

image.png

image.png

image.png

p228
节点操作之父节点

image.png

image.png

image.png

p229
子节点
children很重要，也很好用。它既没有兼容性问题，也能选出所有元素节点，加上索引号可以选出第一个和最后一个节点

image.png

image.png

image.png

p230
获取第一个和最后一个子元素

image.png

image.png

children选择first和end最常用

image.png

image.png

p232
兄弟节点

下面这两个包含文字节点，不常用 image.png

返回兄弟元素节点，但有兼容性问题 image.png

image.png

最好的解决方法是自己封装一个返回兄弟元素节点的兼容性函数

image.png

p233
创建和添加节点

创建节点 image.png

添加节点 插入节点

image.png

image.png

p235
删除节点

image.png

image.png

p237
复制节点

image.png

image.png

p244
document.write创建元素（冷门，了解，会新建页面清空之前的元素，不常用）

image.png

image.png

p245
innerHTML和createElement效率对比

innerHTML创建节点需要拼接字符串时，每拼接一次就创建一个字符串对象，比较耗时。
createElement创建节点无需拼接字符串，创建多个节点是速度是innerHTML速度的10倍 但innerHTML采用数组形式来大量创建节点时，速度是createElement的两倍多，但需要一个临时数组，空间复杂度会变高

image.png

image.png

p246
dom重点核心（总结）
创建 增删改查

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

p247
事件高级导读

image.png

image.png

p248
注册事件的两种方式

传统方式： image.png

方法监听注册方式（推荐）：

image.png

image.png

image.png

p249
attachEvent注册事件（非标准，ie9以前浏览器才识别，新版本不支持，垃圾）

image.png

兼容各个浏览器的方法：封装一个兼容性函数（了解，现在生产环境不太注重兼容性） image.png

p250
删除（解绑）事件

image.png

image.png image.png

image.png

p251
dom事件流理论

image.png image.png

image.png

所谓事件冒泡，是触发事件这个信息向父级冒泡，而不是将事件向上传递

比如父盒子定义了mouseover事件，子盒子没有定义。当鼠标放在子盒子上时，子盒子没有触发事件，但是会将鼠标经过子盒子这个信息传递给父盒子，父盒子定义了mouseover事件，所以就会进行触发。从视觉上来看就是鼠标经过父盒子时出发了一次事件，当鼠标经过子盒子又进行了一次触发（但实际上是父盒子又进行了一次触发），工触发两次

p252
dom事件流代码验证

image.png

dom事件流分为捕获阶段和冒泡阶段。捕获阶段事件从上级传到下级，冒泡阶段事件从下级传到上级。addElementListener若是第三个参数为true，则执行捕获阶段；缺省或false则执行冒泡阶段

image.png image.png

p253
事件对象

image.png

image.png

image.png

image.png

p254
常见事件对象
e.target和this区别（重点）

image.png

image.png image.png

总结：
e.target指向的是触发事件的对象，this触发的是绑定事件的对象。比如下面这个html结构：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

若是给ul绑定了点击事件，而在点击时点击的是li。则e.target指向li，this指向ul

p255
返回事件类型
阻止默认行为

image.png image.png

p256
阻止事件冒泡

image.png

image.png

image.png

p257
事件委托

image.png

image.png

image.png

事件绑定的是父元素，而我们点击的是子元素，addElementListener方法第三个参数缺省说明执行冒泡阶段。当我们点击子元素时，e.target可以得到当前点击元素，虽然子元素没有添加点击事件，但在向上冒泡的过程中浏览器发现父元素添加了点击事件，于是就会执行子元素里面定义的改变背景颜色的命令。代码如下： image.png

p258
禁止右键菜单和禁止选中文字
禁止右键菜单：contextmenu
禁止选中文字：selectstart

image.png

p259 常用鼠标事件
获得鼠标在页面中的坐标

image.png

image.png

image.png

p260
案例：跟随鼠标的天使
鼠标事件：mousemove，鼠标移动事件，只要鼠标一移动就会触发这个时间。在这里，我们给document进行注册

image.png

p261
常用的键盘事件

image.png

keyup只是按键松开时执行一次。而keydown和keypress只要按着键就会一直执行，两者区别是keypress不识别功能键，而keydown能识别所有按键

三个键盘事件的执行顺序：
image.png

p262
keyCode判断用户按下哪个键

image.png

image.png

p263
模拟京东按键输入内容案例

image.png

p264
快递单号查询（放大效果）

image.png

p266
BOM浏览器对象导读

image.png

image.png

p267
bom概述

image.png

image.png

image.png

p268
页面加载事件

window.load()是传统方式，不推荐。 image.png

window.addEventListener("load", )和document.addEventListener("DomContentLoaded")是新的两种加载事件方式，后者更快，交互效果更好 image.png

p269
调整窗口大小事件

image.png

image.png

p270
定时器之setTimeout

image.png

image.png

给定时器起名字，以便于以后清除定时器 image.png image.png

p271
回调函数

image.png

p272
清除定时器

image.png

image.png

p273
定时器之setInterval

image.png

image.png

总结：setTimeout是一次性的，setInterval是不断循环的

p274
倒计时效果

image.png

p275
清除定时器clearInterval

image.png

注意：当变量声明而暂时不赋值时，最好初始化为null（如下）。若是不做初始化，系统默认为undefinded，很容易引起问题
let timer = null;

image.png

p276
案例：发送短信

image.png

p277
this指向问题

image.png 定时器中this指向的是window
构造函数this指向它构造的对象
类中的方法中的this指向的是调用它的对象

p278
同步和异步

image.png

image.png

setTimeout是定时器，在定时器等待过程中会利用等待时间做其他事，异步
sleep是睡眠，只有睡眠醒来时才能去做其他事，睡眠时间不做任何事，同步

p279
同步任务和异步任务执行过程

先按顺序执行同步任务，再按顺序执行异步任务

image.png

image.png

p280
js执行机制

image.png

js执行机制有三部分组成，分别是主线程执行栈、异步进程处理机制、任务队列。一开始所有同步和异步任务都在执行栈中，js会顺序进行遍历：遇到同步任务立即执行，遇到异步任务将其加入到异步进程处理机制中。当异步任务在异步进程处理机制中满足条件时（比如click事件遇到了鼠标点击，定时事件到达等待时间）就立即加入任务队列中。主线程会不断检查任务队列中是否有任务，若有则立即加入执行栈执行并在任务队列中将其删除。主线程不断获取任务并执行任务，这种机制被称为事件循环

image.png

p281
location对象常见属性

image.png

image.png

image.png

p283
获取URL参数

image.png

p284
location常见方法

image.png

assign和replace都可以实现页面跳转，但前者记录历史（能后退到之前页面），后者不记录历史。reload刷新，加上参数true强制刷新代表重新从浏览器获取数据，而不使用之前下载下来的数据

image.png

p285
navigator对象

用来判断用户使用的是pc端还是手机端

image.png

p286
history对象

image.png

例:

history.forward();  
history.back();  
history.go(1);  
history.go(-1);

p287
pc端网页特效导读

image.png

image.png

p288
offsetLeft和offsetTop获取元素偏移

image.png

若是想要获取相对父亲的偏移，则父亲必须有定位 image.png

p289
offsetWidth和offsetHeight获取元素大小
offsetParent返回最近的带有定位的父亲
image.png

p290
offset和style区别

image.png

注意：style只能获得行内样式（就是和html写在一起的），不能获取到内部样式表和外部样式表。所以获取元素用offset，但是不带单位的数值型。设置元素使用style

p291

avatar
文章
阅读
粉丝