JaveScript第三周知识点

陈小憨
134 阅读6分钟

# JaveScript第三周知识点

第一天知识点

  1. BOM的常用对象
    1. history对象：保存当前窗口的历史纪录（过去的url）
      1. 前进：history.go(1);
      2. 后退：history.go(-1);
      3. 刷新：history.go(0);
    2. location对象：保存了当前窗口的正在打开的url（现在的url）
      1. 协议：https（加密）
      2. 主机号/Ip地址/域名：域名是需要花钱买的，主机和IP地址是免费的
      3. 端口号：https默认端口为443，http默认为80，只有默认端口可以省略不写
      4. 文件的相对路径/路由
      5. 查询字符串/请求消息：前端传输到后端
    3. 属性：url的五个内容
      1. 协议：location.protocal；
      2. 域名：location.hostname；
      3. 端口：location.port；
      4. 路由：location.pathname；
      5. 请求消息：location.search；
  2. DOM：原本是可以操作一切结构化文档的
    1. 核心DOM：可以操作HTML又可以操作XML，但是语法复杂
    2. HTML DOM:只可以操作HTML，不能访问一切自定义，但语法简单
    3. xml DOM:只可以操作XML，被json数据格式代替了
    4. 查找元素：
      1. 通过关系查找元素
      2. 直接查找元素：
        1. document.getElementsByxxx();返回的是一个动态集合HTMLcollection
        2. var elem=document.querySelector("任意css选择器");
    5. 操作样式：
      1. 内联样式
      2. 样式表样式
    6. 操作属性：
      1. 获取属性值
      2. 设置属性值
      3. 删除属性
      4. 判断
    7. 操作内容：innerHTML/innerText/value
    8. 创建元素上树：
      1. 创建空标签
      2. 设置必要的属性和事件
      3. 上树
        1. 创建空标签：var elem=document。creatElement("标签名");
        2. 为其设置必要的属性和事件 elem.属性名="属性值"; elem.on事件名=function(){}
        3. 上树：
          1. 父元素.appendchild(elem);
          2. 父元素.insertBefore(elem,已有子元素);
          3. 父元素.replaceChild(elem,已有子元素）；
    9. 删除元素：elem.remove();

      1. 创建变量：新增的一个let关键字：let 变量名=值；

      2. 类数组转为普通数组：接住=Array.from(类数组对象)

第二天知识点

  1. 递归：函数自己调用了自己，会有停下来的一天
    1. 何时使用：用于遍历层级不明确的情况
    2. 如何使用：
      1. function 函数名（root){1. 第一层要做什么直接做 2. 判断有没有下一层再调用此方法，传入的实参是自己的下一层 }
    3. 算法：深度优先，优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
    4. 缺陷：不能过多使用，性能差，开启大量函数调用浪费内存，只在层级不明确的时候使用
    5. 递归VS纯循环
      1. 递归：
        1. 优点：简单易用
        2. 缺点：性能低
      2. 纯循环：
        1. 优点：几乎不占用性能
        2. 缺点：难度大
  2. 绑定事件：
    1. 在HTML上书写事件属性：<elem on事件名="函数名（实参）">
    2. 在JS中使用事件处理函数属性：elem .on 事件名=function(){操作}
    3. 在JS中使用事件API
      1. 主流：elem.addEventListener("事件名",callback);
      2. 老IE：elem.attachEvent("on事件名",callback);
      3. 兼容：if(elem.addEventListener){elem.addEventListener("事件名",callback);}else{elem.attachEvent("on事件名",callback);}
      4. 优点：符合内容与样式与行为的分离原则
      5. 缺点：有兼容性问题

第三天知识点

  1. 属于BOM：定时器+event；
  2. 事件周期：从事件发生，到所有事件处理函数执行完毕的全过程
    1. 捕获阶段：由外向内，记录发生的事件
    2. 目标优先触发：目标元素==》当前点击的实际发生事件的元素
    3. 冒泡触发：由内向外，依次执行之前记录要发生的事件
  3. 获取事件对event：
    1. 主流:会自动作为事件处理函数的第一个形参传入
    2. 老IE：event，全局有这个变量
    3. 兼容：event，老IE和主流都可以使用
  4. 得到了事件对象可以做什么？
    1. 获取鼠标的坐标
    2. 阻止事件冒泡
    3. 利用冒泡/事件委托，提升网页性能
    4. 阻止浏览器的默认行为
    5. 获取键盘的键码

第四天知识点

  1. 事件的取消绑定：
    1. elem.onclick=()=>{},那么elem.onclick=null
    2. elem.addEventListener("事件名",回调函数);那么elem.removeEventListener("事件名",回调函数）；事件名和回调函数必须添加时一模一样
  2. this的指向：
    1. 单个元素绑定事件this
    2. 多个元素绑定事件this
    3. 箭头函数中的this
    4. 函数中的this
    5. 定时器中的this
  3. 强制改变this的指向：
    1. call/apply：临时的替换了函数的this
    2. bind：永久替换了函数中的this
  4. ES6:
    1. let,const关键字，箭头函数
    2. 模板字符串：可以直接识别变量，不再需要+运算去拼接，而且实现了一个简单的JS环境，甚至支持在里面书写API
    3. 解构赋值：解析结构再进行赋值，赋值的新方式，并且得到了增强
      1. 类似数组的解构赋值
      2. 类似对象的解构赋值
      3. 调用函数时，传递实参的顺序无所谓
      4. 函数返回的结果，可以有多个
    4. set和Map新的数据类型
      1. set：类似数组的一种数据格式-去重数组，然后再转回数组：var s=new set（arr);
      2. Map:类似于对象的一种数据格式
    5. 新的循环：for（var v of arr）{v;}

第五天知识点

  1. 正则表达式：定义字符串中字符出现规则的表达式
    1. 何时使用：切割，替换，验证
    2. 如何使用：/正则表达式/
    3. 最简单的正则就关键字原文"no"-->/no/后缀
    4. 备选字符集：/^[备选字符集]$/
      1. 一个中括号只管一位字符
      2. 正则表达式默认只要满足就不管后续
      3. 前加^,后加$,两者同时使用，代表从头到尾完全匹配，只要做验证必加
      4. 如果备选字符集中的ascii码是连续的，那么可以省略中间部分
    5. 预定字符集：前辈们定义好的一些字符集
      1. 一位数字：\d-->[0-9]
      2. 一位数字，字母，下划线：\w-->[0-9A-Za-z]
      3. 一位空白字符：\s
      4. 一位除了换行外的任意字符：.-很少使用，范围太广
      5. 优先使用预定义字符集，预定义满足了我们再用备选字符集补充
      6. 不管是备选字符集，还是预定义字符集，一个都只管一位
    6. 量词：规定一个字符集出现的次数
      1. 有明确数量：{n,m},{n,}{n}
      2. 无明确数量:?,*,+
    7. 选择和分组：
      1. 选择：在两个规则中选一个 规则1 | 规则2
      2. 将多个字符集临时组成子规则( 规则1 | 规则2)
    8. 指定匹配位置
      1. ^开头 $结尾
      2. 两者同时使用，前加^,后加$，表示从头到尾要求完全匹配，只要做验证
  2. 支持正则表达式的字符串API
    1. 切割：var arr=str.split("固定切割符"/RegExp)；
    2. 替换：
      1. 基本替换法:str=str.replace(/正则表达式/后缀，"新内容")；
        1. replace支持正则，并且搭配上后缀g就可以找到全部
        2. 缺陷：替换的新内容是一个固定的
      2. 高级替换法：str=str.replace(/正则表达式/后缀,function(a,b,c){})
      3. 格式化：前加^,后加$,验证，替换所有必须加g
  3. 正则对象
    1. 创建：
      1. 直接量：var reg=/正则表达式/后缀；
      2. 构造函数：var reg=new RegExp("正则表达式","后缀");
      3. API:验证：var bool=reg.test(用户输入的)；
avatar
文章
阅读
粉丝