| 知识点汇总表 | |||
| 分类 | 关键词 | 关键词 | 链接地址 |
| DOM&BOM | DOM | 1、DOM ( Document Object Model )
:文档对象模型 2、DOM是W3C(万维网联盟）推荐的处理可扩展标记语言( html或者xhtml )的标准编程接口 |
链接地址 |
| 页面特效演示案例 | 页面特效:调用这些接口可以改变网页的内容、结构、属性、样式，从而让页面发生变化 |
链接地址 | |
| DOM树 | html文档可以理解成─颗树，叫DOM树(文档树模型) |
链接地址 | |
| 网页特效实现步骤 |
1、找到要改动的html标签(获取页面元素) 2、修改标签的样式、内容、属性等 |
链接地址 | |
| 获取页面元素 | 从页面中获取要操作的标签:getElementByld、
getElementsByTagName getElementsByClassName querySelector/querySelectorAll |
链接地址 | |
| getElementByld |
1、根据id值获取标签对象(元素) 2、格式: document.getElementByld("id值") 3、特点:一次只能获取一个标签对象 |
链接地址 | |
| getElementsByTagName | 1、根据标签名获取标签对象(元素) 2、格式:document.getElementsByTagName("标签名") 3、特点:一次可以获取多个标签对象 |
链接地址 | |
| getElementsByClassName |
1、根据标签类值获取标签对象(元素) 2、格式: document.getElementsByClassName("类名") 3、特点:一次可以获取多个标签对象 |
链接地址 | |
| querySelector |
查询选择器： 1、格式: document.querySelector("选择器") 2、css中的基本选择器，复合选择器都能用 3、querySelector 一次只能获取一个标签对象 |
链接地址 | |
| querySelectorAll |
1、querySelector用法和querySelectorAll用法一样 2、querySelectorAll一次性能获取多个标签对象 3、格式:document.querySelectorAll("选择器") |
链接地址 | |
| 事件 | 简单理解︰触发--响应 |
链接地址 | |
| 事件三要素 | 1、事件源:触发事件的元素(绝大多数标签都能作为事件源) 2、事件类型:例如click 点击事件 3、事件处理程序:事件触发后要执行的代码(事件函数) |
链接地址 | |
| 绑定事件的三种方式 | 1、方式一:直接写在标签以on开头的事件中 2、方式二:对象.on事件= function () 0} 3、方式三:对象.addEventListener(事件名, function() 0) |
链接地址 | |
| 鼠标事件 | 1、onclick 点击事件 2、onmouseenter 鼠标进入事件（鼠标进入标签时触发) 3、onmouseleave 鼠标离开事件（鼠标离开标签时触发) 4、onmousemove 鼠标移动事件 |
链接地址 | |
| 图片切换 | 演示图片点击上一张/下一张的切换 | 链接地址 | |
| 键盘事件 | 1、onkeyup 键盘弹起事件 2、onkeydown 键盘按下事件 3、onkeypress 键盘按下事件（不识别ctrl、shift等功能键) |
链接地址 | |
| 其他事件 | 1、ondblclick 双击事件 2、onfocus 获得焦点事件 3、onblur 失去焦点事件 4、onsubmit 表单提交事件 |
链接地址 | |
| 表单验证 | 用户登录案例 | 链接地址 | |
| 事件对象 | 事件触发时就会产生事件对象，并且会以参数的形式传给事件处理函数 |
链接地址 | |
| 样式操作 | 1、修改样式有两种方式:
style属性和className属性 2、style 用来设置单个属性 3、className通过修改标签的class值来修改样式 |
链接地址 | |
| style |
1、格式:对象.style.样式 2、样式:就是css中的样式。如果样式使用横线连接，则去掉横线，之后的单词首字母大写 例如: background-color ---> backgroundColor |
链接地址 | |
| className | className用来修改标签的class值 例如:对象.className ="值" |
链接地址 | |
| 换肤案例 | 1、获取导航栏对象 2、获取所有换肤按钮对象，并注册点击事件 3、在点击事件中更换导航栏颜色 |
链接地址 | |
| 标签内容的获取与修改 | 1、innerHTML获取和修改标签内容 2、innerText获取和修改标签内容 3、区别:innerText不会识别html标签，而innerHTML会识别 |
链接地址 | |
| Type属性 | 修改type属性的值能够修改表单域的状态 |
链接地址 | |
| 复选框 | 1、全选复选框 2、表体复选框 |
链接地址 | |
| 自定义属性 | 1、在html5中允许通过data-*来设置自定义属性，存储数据 2、自定义属性的数据都以对象形式保存在dateset属性中 |
链接地址 | |
| 属性操作方法 |
1、设置属性:dom.setAttribute('属性名'，'值') 2、获取属性值:dom.getAttribute('属性名') 3、移除属性: dom.removeAttribute('属性名') |
链接地址 | |
| 新增节点 | 创建新节点:创建一个新标签对象 追加节点:将创建的标签对象添加到html文档中 |
链接地址 | |
| 删除节点 | 链接地址 | ||
| 其他节点属性 | 1、parentNode:父节点 2、children:子元素节点(伪数组) 3、nextElementSibling:下一个兄弟元素节点(IE9之后起效) 4、previousElementSibling: 上一个兄弟元素节点(IE9之后起效) ...... |
链接地址 | |
| BOM | 1、BOM (Browser Object Model)
:浏览器对象模型 2、BOM提供了一系列与浏览器窗口进行交互的对象、属性、方法 3、window对象是BOM的核心对象，也是顶级对象 4、window对象下又包含了很多对象 |
链接地址 | |
| console对象 | 1、window 调用子对象时可以省略自己 2、console.log()等价于window.console.log0) 3、console.dir()等价于window.console.dir() |
链接地址 | |
| window对象 | 在全局作用域下声明的变量和函数都自动挂载到了window对象上 |
链接地址 | |
| window对象常用方法 | 1、alert是window对象的方法 window.alert("消息")<===> alert("消息") BOM没有通用的标准，所以在各个浏览器上显示的效果不一样 2、window.confirm("消息") \n confirm("消息"):弹出带有确定和取消按钮的消息框 3、var result = comfirm("消息"); 4、window.prompt("提示信息") \n prompt("提示信息"):弹出带有提示消息的输入框 |
链接地址 | |
| onload事件 | 1、浏览器是从上向下解析html文档代码的，所以之前要求script标签写在body标签的最下面 2、window.onload:页面加载事件，在页面加载完成后触发 |
链接地址 | |
| onresize事件 | onresize:窗口大小调整事件，当窗口大小发生改变时触发 |
链接地址 | |
| ES6入门 | ES6 | 1、JavaScript是由网景公司开发的，最初命名为LiveScript 2、从2015年6月之后发布的版本统一叫做ES6 |
链接地址 |
| 关键词 | 1、ES6新增了两个关键词用来声明变量和常量 2、声明变量使用let关键词 3、声明常量使用const关键词 |
链接地址 | |
| let | let:用于声明变量，代替var 关键词 特点:有块级作用域;不存在变量提升;暂时性死区 |
链接地址 | |
| const | const用于声明常量 特点:有块级作用域;声明常量时必须赋值，且赋值后不能修改 |
链接地址 | |
| var、let、const的区别 | 1、var和let都能声明变量，但是let更严谨一些，在es6之后都推荐使用let来声明变量。 2、let的特殊点︰不能提升变量(保证程序的逻辑通畅)、有块级作用域(避免变量交叉污染)、暂时性死区 3、const用来声明常量，常量是不能改变的量，常量也有块级作用域，不能提升，初始化常量时必须赋值 4、能用const就用const |
链接地址 | |
| 解构赋值 | 解构赋值就是将数组或者对象中的单元分别取出并保存在单独的变量中 |
链接地址 | |
| 模板字符串 | 使用反引号声明的字符串就是模板字符串 |
链接地址 | |
| 模板字符串的优点 | 1、字符串可以换行(方便声明标签结构) 2、${}：方便解析变量或者函数 |
链接地址 | |
| 字符串扩展函数 | 1、includes():判断一个字符串是否包含另一个字符串 2、startsWith():判断一个字符串是否以另一个字符串开始 3、endsWith():判断一个字符串是否以另一个字符串结束 4、repeat() :返回一个新字符串，表示将原字符串重复n次。 |
链接地址 | |
| 数组扩展函数 | 1、includes
:判断一个数组中是否包含另一个值 2、find :返回满足条件的第一个单元值 3、findIndex :返回满足条件的第一个值的索引 |
链接地址 | |
| 形参默认值 | 声明函数时给形参设置默认值 |
链接地址 | |
| rest参数 | 1、es6之前，调用函数时可以传入不定数量的参数(可变参数)，函数体内使用arguments
获取多个参数 2、es6开始，取消了arguments，使用扩展运算符来接收参数 |
链接地址 | |
| 箭头函数 | 1、箭头函数的用法和普通函数用法几乎一致 2、去掉function关键词 3、()和之间增加=> |
链接地址 | |
| 箭头函数的特点 | 1、箭头函数不能作为构造函数 2、箭头函数没有arguments，要使用可变参数可以使用rest方式 3、箭头函数没有this对象，在箭头函数中的this指的函数外层的对象 4、如果函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return 5、如果函数中只有一个参数，则不需要写小括号 |
链接地址 | |
| 前端框架VUE3.0 | VUE简介 | vue是一套用于构建用户界面的渐进式框架 简单理解就是用来做网页的框架 |
链接地址 |
| VUE的优点 | 1、易用︰相对于React和Angular来说，Vue上手简单 2、灵活:渐进式技术，能够开发任何规模的Web应用程序 3、性能:Vue采用了虚拟DOM.双向数据绑定等技术，运行速度快 |
链接地址 | |
| 下载/安装Vue | 1、方式一:在页面上以CDN
package的形式导入 2、方式二: npm / yarn安装 3、方式三︰使用官方的CLI 来构建项目 |
链接地址 | |
| 下载/安装Vue | 1、Vue封装了一些自定义属性，这些自定义属性就叫指令 2、指令可以用来控制标签的数据显示、注册事件、样式设置等等 3、指令的核心作用就是帮助我们更好的操控页面 |
链接地址 | |
| 数据填充指令 | 1、差值表达式、v-html指令、v-text 指令 2、v-html、v-text会覆盖标签内原有的内容，插值表达式不会 3、v-html:能识别标签 |
链接地址 | |
| v-bind指令 | v-bind用来为标签的属性节点绑定数据，可以简写为∶ |
链接地址 | |
| class样式绑定 | v-bind 用来绑定class属性时有两种方式: 1、对象方式: <div v-bind:class="{ active: isActive }"></div> 2、数组方式: <div v-bind:class="[fs, bgc]"></div> |
链接地址 | |
| 对象方式 | <div :class=" { active:
isActive }"></div> 1、active:类名，定义在style标签中的类 2、isActive :布尔值，true类起效、false类失效，定义在data中 |
链接地址 | |
| 数组方式 | <div :class="[fs,
bgc]"></div> 1、fs、bgc:变量，要定义在data中 2、fs、bgc的值是类名，定义在style标签中的类名 |
链接地址 | |
| Style样式绑定 | v-bind 用来绑定style属性时有两种方式︰ 1、对象方式: <div :style="{ fontSize: fs }"></div> 2、数组方式: <div :style="[fs, bgc]"> </div> |
链接地址 | |
| 对象方式 | <div :style="{ fontSize:
fs }"></div> : 1、fontSize :属性名 2、fs :样式值（变量)，要定义在data中 |
链接地址 | |
| 数组方式 | <div :style="[c1,
c2]"></div> : 1、c1, c2∶变量，定义在data中 2、c1, c2 ︰的值是对象形式，内部是样式属性和值 |
链接地址 | |
| v-on指令 | v-on用来为标签绑定事件，可以简写为@ |
链接地址 | |
| v-if指令 | v-if 能够根据表达式的真假值来有条件地渲染元素 v-else、v-else-if |
链接地址 | |
| v-for指令 | v-for循环渲染元素 |
链接地址 | |
| v-model指令 | v-model用于数据的双向绑定 |
链接地址 | |
| mvvm开发模式 | 1、Vue是一种采用MVVM开发模式的框架 2、MVVM是—种分离开发思想，将页面开发分为三个部分 |
链接地址 | |
| CompositionAPI |
1、Vue2采用的是 OptionsAPI 2、Vue3采用的是CompositionAPI 3、Vue3兼容Vue2的OptionsAPI |
链接地址 | |
| OptionsAPI | Vue2会将实现业务的数据和方法分拆到data、 methods
等不同的节点中，这种代码组织方式称为OptionsAPI 缺点︰如果页面的业务逻辑比较复杂，需要使用的功能比较多，那程序就会难于开发和维护 |
链接地址 | |
| 响应数据声明 | 1、CompositionAPI提供了两种响应式数据声明方式 ref()和reactive() 2、setup()是CompositionAPI 的入口函数 |
链接地址 | |
| ref | ref()方法通常用来定义简单数据类型（数值型、字符串等) |
链接地址 | |
| reactive | reactive()方法通常用来定义复杂数据类型（数组、对象) |
链接地址 | |
| 用户列表 | 使用reactive声明用户数组 在tr中使用v-for循环输出数组 |
链接地址 | |
| optionsAPI的生命周期函数 | 生命周期: Vue实例挂载、更新、销毁的过程 |
链接地址 | |
| CompositionAPI 的生命周期函数 | 1、CompositionAPI
取消了beforeCreate和created，直接使用setup即可 2、所有的钩子函数必须从Vue 对象中解构出来 3、所有的钩子函数前都要加on |
链接地址 | |
咖喱小鱼丸 ·
更新于 2023-07-13
索引目录
Copyright
2025 imooc.com All Rights Reserved |
京ICP备12003892号-11 京公网安备11010802030151号