单词篇

  • ECMA 欧洲计算机制造商协会（一个制定标准的组织）
  • script 脚本
  • ECMAScript JS的标准，核心
  • web 网、网络
  • application 应用
  • program 程序
  • interface 接口
  • API 应用程序接口
  • APIs 很多个应用程序接口
  • document 文档
  • object 对象
  • model 模型
  • DOM (document object model) 文档对象模型
  • level 级别
  • element 元素
  • tag 标签
  • node 节点
  • attribute 属性
  • text 文本
  • get 获取
  • set 设置
  • reset 重置
  • rename 重命名
  • by…. 根据….
  • class 类
  • getElementById 根据id获取页面元素
  • inner 内部的、里面的
  • check 检查、核对、选中
  • checked 检查、核对、选中（check的过去式和过去分词）
  • disabled 禁用
  • readonly 只读
  • select 选择
  • selected 选择（select的过去式和过去分词）
  • selector 选择器
  • query 查询
  • all 全部
  • style 样式
  • interval 间隔、时间间隔
  • timeout 超时
  • picture 图片
  • add 添加
  • remove 移除
  • listen 听
  • listener 听者、侦听器
  • event 事件
  • click 单击、点击
  • mouse 鼠标
  • enter 输入、进入、回车键
  • leave 离开
  • move 移动
  • key 键、关键
  • up 向上
  • down 向下
  • input 输入
  • change 改变
  • focus 焦点
  • blur 模糊（编程中表示失去焦点）
  • this 这、这个
  • target 目标
  • on 在 ….. 时候
  • catch 捕获
  • stop 停止
  • propagation 传播
  • prevent 防止
  • default 默认的
  • date 日期
  • data 数据
  • time 时间
  • full 完整的、完全的
  • year 年
  • month 月
  • day 日、一天
  • hour 时
  • minute 分
  • second 秒
  • local 当地的
  • locale 地方
  • item 项、一项
  • tab 选项卡、制表符
  • callback 回调
  • class 类
  • name 名
  • list 列表
  • toggle 切换
  • contains 包含
  • append 追加
  • insert 插入
  • before 在……之前
  • child 孩子
  • children 很多孩子（child的复数）
  • clone 克隆
  • previous 上一个（常简写为 prev）
  • next 下一个
  • sibling 兄弟姐妹
  • parent 父亲
  • create 创建
  • offset 偏移
  • client 客户端
  • scroll 滚动
  • resize 重置大小
  • load 加载
  • reload 重载（刷新）
  • render 渲染
  • parse 解析
  • window 窗口
  • navigator 导航器
  • location 位置、地点
  • port 端口
  • host 主机
  • hash 哈希
  • history 历史
  • back 后退
  • forward 前进
  • go 去、去往
  • storage 存储
  • session 会话
  • export 出口
  • import 进口
  • gender 性别
  • salary 薪资
  • city 城市
  • notaion 符号、标记法
  • JSON JavaScript对象标记法
  • synchronous 同步
  • asynchronous 异步（常简写为 async）
  • expression 表达式
  • RegExp JS中的正则表达式对象
  • exec 执行
  • test 测试、试验
  • match 匹配
  • replace 替换
  • search 搜索
  • split 分裂
  • laotang 老汤

    DOM操作篇

    基本认知

  1. DOM是干什么的？就是给程序员一个机会，能够让程序员在JavaScript中操作页面元素。
  2. 然后，你要注意，元素中的内容、元素的属性、元素的大小等等 都属于元素，所以要操作属性、操作内容、计算大小等等必须先得到标签。

所以我们应该先从如何查找元素开始学习。

查找元素

  • document.querySelector(‘css选择器’) —— 根据css选择器，查找第一个符合条件的元素
  • document.querySelectorAll(‘css选择器’) —— 根据css选择器，查找所有符合条件的元素，得到伪数组
  • node.parentNode —— 查找节点的父级节点
  • node.previousSibling —— 查找节点的上一个兄弟节点
  • node.nextSibling —— 查找节点的下一个兄弟节点

  • ele.children —— 查找元素的所有子元素，得到伪数组

    创建节点

  • document.createElement('元素名称')

    添加元素

  • 父节点.appendChild(新节点)

  • 父节点.insertBefore(新节点, 参照物)

    移除节点

  • 父节点.removeChild(被移除的子节点)

    克隆节点

  • 节点.cloneNode() —- 只克隆当前节点

  • 节点.cloneNode(true) —- 克隆当前节点及其里面的全部内容

    操作内容

  • let 变量 = 元素.innerHTML

  • let 变量 = 元素.innerText
  • 元素.innerHTML = 新的内容

  • 元素.innerText = 新的文本

    操作属性

    固有属性：

  • let 变量 = 元素.属性名

  • 元素.属性 = 新的值

自定义属性：

  • let 变量 = 元素.getAttribute('属性名')
  • 元素.setAttribute('属性名', 值)
  • 元素.removeAttribute('属性名')

  • 元素.dataset —- 专门获取 data-xxx 属性

    设置样式

  • 元素.style.样式名称 = 值

    操作类名

  • let 变量 = 元素.className

  • 元素.className = 新的类名
  • let 变量 = 元素.classList
  • 元素.classList.add('类名', '类名', ...)
  • 元素.classList.remove('类名', '类名', ...)

  • 元素.classList.toggle('类名')

    尺寸位置

  • 元素.offsetWidth 只读，元素宽度，包括 padding 和 border

  • 元素.offsetHeight 只读，元素的高度，包括 padding 和 border
  • 元素.offsetLeft 只读，元素左上角到父定位元素左边的距离；如果没有父定位元素则表示到浏览器可视窗口左侧的距离
  • 元素.offsetTop 只读，元素左上角到父定位元素上边的距离；如果没有父定位元素则表示到浏览器可视窗口顶部的距离
  • document.documentElement.clientWidth 浏览器的宽度

  • 元素.scrollTop 元素向上滚动的距离

    事件篇

    注册事件

  • 元素.addEventListener('事件名', 处理函数, 是否在捕获阶段触发)

  • 事件处理函数中的 this 表示事件源，给谁添加的事件，this表示谁。

    移除事件

  • 元素.removeEventListener('事件名', 处理函数, 是否是移除捕获阶段的事件)

    事件对象

  • e.clientX —- 获取鼠标点击位置 距离 页面的距离

  • e.offsetX —- 获取鼠标点击位置 距离 当前元素的距离
  • e.key —- 获取用户按的是哪个键
  • e.target —- 表示触发事件的元素
  • e.target.nodeNode —- 表示触发事件的元素的名称（得到大写字母）
  • e.preventDefault() —- 阻止默认行为

  • e.stopPropagation() —- 阻止事件传播、阻止事件流（阻止冒泡）

    常用事件

  • load —- 页面加载事件，所有资源加载完毕后触发

  • DOMContentLoaded —- 页面加载事件，html标签加载完毕即可触发
  • scroll 滚动条滚动时触发
  • resize 浏览器窗口改变大小时触发
  • click 单击事件
  • mouseenter 鼠标移入事件
  • mouseleave 鼠标离开事件
  • input 输入框输入事件
  • keyup 键盘弹起触发
  • keydown 键盘按下触发
  • change 内容改变触发（input内容改变并失去焦点才能触发、下拉框更换选项时触发、文件域改变图片触发）
  • focus 获取焦点时触发
  • blur 失去焦点时触发

  • submit 表单提交时触发

    BOM篇

  • window是浏览器中最大的对象

  • 使用window的属性或方法时，可以省略window
  • setTimeout(函数, 时间) 约定时间后，执行一次函数
  • setInterval(函数, 时间) 每间隔一段时间，执行一次函数
  • location.href
  • history.go()
  • localStorage.setItem(key, value)
  • localStorage.getItem(key)

  • localStorage.removeItem(key)

    其他

  • Date日期对象（会获取年月日时分秒、会获取时间戳）

  • JSON对象（会和JS数据之间的相互转换）
  • JS运行机制（知道 异步任务的结果，肯定在同步任务之后）
  • 正则表达式
  • 回调函数 （）
  • 递归函数
  • 重绘和回流
  • 事件流
  • 事件委托