03.js基本知识点总结

任丽琼
122 阅读9分钟
BOM 的常用对象

  1. history对象：保存了当前窗口的历史记录（过去的url）

          前进：history.go(1)
      后退：histoty.go(-1)
      刷新：history.go(0)

  2. location对象：保存了当前窗口的正在打开的url（现在的url） 一个url有几部分组成：5部分

      1.协议：http（加密），https（未加密），ftp（传输文件），ws（直播），前面两个叫做请求-响应模型。
  2.主机号/ip地址 /域名：域名要花钱购买，主机号\ip地址是免费的但只能访问自己
  3.端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写
  4.文件的相对路径|路由：百度加密了。
  5.查询字符串|请求消息：form表单提交带来的东西

  3. 属性获取url的5个部分的内容，直接输入location对象即可查看

      协议：location.protocal  
  域名：location.hostname
  端口：location.port
  路由：location.pathname
  请求消息：location.search

  4. 跳转：location=“新url” --替换当前窗口，可以后退

  5. 跳转后禁止后退：location.replace("新url")--替换当前窗口禁止后退。location.reload()---刷新

6.DOM

原本DOM是可以操作一切结构化文档，后面升级后分为三方面

1.核心DOM：既可以操作html，又可以操作XML，但语法相对比较繁琐
2.HTML DOM:只能操作html,不能访问一切自定义的东西,语法比较简单
3.XML DOM:只能操作xml，被json数据格式替代了。
一.查找元素：

一. 通过关系找元素

   父亲：parentNode； 第一个儿子：firstElementChild； 孩子们：children；   前一个兄弟：previousElementSibling

2. 直接找元素

  • document.getElementsByxxx()；返回的是一个动态集合
  • let elem=documnet.querySelector(“任意css选择器”)，翻译为查询css选择器。缺点：只能找到单个元素，如果找到多个，也只会返回第一个，没找到就是null。一次只能操作一个元素。
  • let elem=documnet.querySelectorAll(“任意css选择器”)，优点找到了是一个集合，没找到是一个空集合，返回的是一个静态集合。
  • 面试题：document.getxxx和document.queryxxx的区别，后者更适合复合查找。
  • 面试题：动态集合和静态集合的区别？1.动态集合每一次dom发生变化，他都会悄悄的再次查找，让页面和数据保持一致，但是效率也就低了，不支持foreach；----静态集合每一次DOM发生变化，他不会悄悄的查找，让页面和数据没有保持一致，但是效率也就高了，支持forEach的使用

二. 操作样式 1.内联样式 2.样式表样式：let sheet=document.styleSheet[i],获取想要操作的样式表。获取次样式表中所有的样式规则let rules=sheet.css.Rules;

三. 操作属性：

  1. 获取属性值：核心DOM：elem.getAttribute（“属性名”）；HTML DOM:elem.属性名；
  2. 设置属性值：核心DOM：elem.setAttribute（“属性名”，“属性值”）；HTML DOM:elem.属性名=“属性值”
  3. 删除属性：设置属性值为空字符串，确实某些属性可以删除，但只是删除了属性值，属性名还在，而uoude属性哪怕只有一个属性名，也会具有作用（比如：href，disabled，readonly）；；核心DOM elem.removeAttribute（“属性名”）； HTML DOM：elem.属性名=“”；属性节点删不干净
  4. 建议优先使用HTML DOM，HTML DOM实现不了再用核心DOM补充；缺点：class必须写为className，自定义的东西操作不了。

四. 如何创建空元素以及上树：3步

  1. 创建空标签：let elem.document.creatElement（“标签名”）；
  2. 为起设置必要的属性和事件：elem.属性名=“属性值”；elem.on事件名=function（）{}
  3. 上树：父元素.appendChild（elem）在父元素末尾追加一个子元素elem；父元素.insertBefore（elem，已有子元素），在父元素追加一个子元素elem，但是放在已有子元素的前面；父元素.replaceChild（elem.已有子元素，在父元素追加一个子元素，但是会替换掉已有子元素）。----删除元素：elem.remove();
递归
  1. 递归简单来说就是函数之中再一次调用了函数自己。何时使用：专门用于遍历层级不明确的情况---DOM和数据(children只能找到儿子层，找不到孙子层)
  2. 如何使用：function 函数名（root）{1.第一层要做什么直接做；2.判断有没有下一层，如果有下一层则再次调用此方法，只不过传入的实参是自己的下一层} 函数名（实际的根）
  3. 算法：深度优先，优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点；缺陷同时开启大量函数，性能相对较差，浪费内存，只在层级不明确时使用。
  4. 递归和纯循环的区别：递归简单易用，性能低；纯循环几乎不占用性能，但难的一批
绑定事件：三种方式
  1. 在HTML上书写事件属性：<elem on事件名="函数名（实参）"> 缺点：不合符内容与样式与行为的分离原则；无法动态绑定；一次只能绑定一个元素；不支持绑定多个函数对象
  2. 在教室中使用事件处理函数属性：elem.on事件名=function（）{操作} 优点符合内容与样式与行为的分离原则，动态绑定，一次能绑定多个元素；但是也不支持绑定多个函数对象
  3. 在js中使用事件API：但是老IE用不了；---主流：elem.addEventLister(“事件名”，callback)；老IE：elem.attachEvent（“on 事件名”），callback）；兼容：if（elem.addEventlistenner）{elem.addEventListenner("on事件名"，callback)}；支持绑定多个函数但有兼容性问题。
    1. 事件的取消绑定:若使用了elem.onclick=()=>{},则elem.onclick=null。2.如果使用了elem.addEventListener（“事件名”，回调函数）；那么elem.removeEventListener（“事件名”，回调函数），事件名和回调函数必须和添加时的一模一样。
定时器

属于BOM：重点只有两个：定时器和event（事件对象）

  1. 事件周期：从事件发生，到所有事件处理函数执行完毕的全过程。三个阶段1.捕获阶段：由外向内，记录要发生的时间有哪些2.目标优先触发：目标元素--当前点击的实际发生事件的元素3.冒泡触发：由内向外，依次执行我们之前记录着要发生的事件。
  2. 获取事件对象event：主流：会自动作为事件处理函数的第一个形参传入；老IE：event--老IE全局有这个变量。兼容：event，两者都可以用。
  • 得到了事件对象可以获取鼠标的坐标：获取鼠标相对于屏幕的坐标：e.screenX/Y;获取鼠标相对于窗口/客户端/文档显示区域的坐标e.clientX/Y； 获取鼠标相对于网页的坐标：e.pageX/Y；得到事件对象还可以阻止事件冒泡：主流e.stopPropagation();老IE：e.cancleBubble=true;兼容e.cancleBubble=true。
  1. 利用冒泡，事件委托，开发常用提升网页性能，有了它事件函数可以换为箭头函数。优化：如果多个子元素定义了相同或相似的事件操作，最好只给父元素定义一次。为什么：每一次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站性能越差。 -认识目标元素target：点击哪一个，永远就是哪一个，不会变化。主流：e.target；老IE：e.srcElement。兼容：e.srcElement
  2. 阻止浏览器默认行为：如a标签默认可以跳转，提交按钮可以提交表单，右键自带弹出框....主流：e.preventDefault();老IE：e.returnValue=false;兼容：e.returnValue=fals.
This和解构赋值
  1. this的指向：单个元素绑定事件this指这个元素；多个元素绑定事件this指当前元素。箭头函数中的this指外部对象。函数中的this指当前正在调用函数的这个人。定时器的this指window
  2. ES5强制改变this的指向：call/apply临时替换了函数的this--借用；语法：函数名.call(借用的对象，实参)--单独传入每个实参；；；函数名.apply(借用的对象，arr)--只能传入一个实参要求是一个数组，apply会悄悄打散数组。call，apply相当于立刻调用函数，立刻执行的。；；；bind：永久替换了函数中的this-买。三件事1.创建了一个和原函数功能完全相同的新函数2.将新函数的this永久绑定为了指定对象，别人借不走。3.将新函数的部分参数永久固定。语法：let 新函数=函数名.bind（永久对象，永久实参），不是立刻执行需要自己调用。bind绑定新函数不能被call/apply再次借走。
  3. 三个固定套路：1.Math.max/min.apply(Math,arr),支持数组；2.Object.prototype.toString.call/apply(x)===[object Array]判断xx是不是数组；3.类数组转为普通数组:接住=Array.prototype.slice.call/apply(类数组对象)；；；接住=Array.from（类数组对象）
  4. ES6：模板字符串：可以直接识别变量，不再需要+加运算去拼接。'我的名字叫${name}'
解构赋值

解析结构再进行赋值，赋值的新方式。如果赋值符号左右两边的结构一样，就会悄悄的解开结构再一一的进行赋值。

  1.类似数组的结构赋值
    let[a,b,c]=[1,2,3];
    console.log(a);
console.log(b);
console.log(c);
 2.类似对象对象的结构赋值
 let{a=默认值，b，c}={c:3,a:1,b:2}
    console.log(a);
console.log(b);
console.log(c);
  形参可以设置默认值，如果自己传入了，就用自己的值
  3.调用函数时，传递实参的顺序无所谓
  function f1({name，age}){return'我的名字叫${name}',今年         ${age}岁}
  consol.log(f1({age:"18",name:"rlq"}))
正则表达式

正则表达式：定义字符串中字符出现规则的表达式。何时使用：切割，替换，验证。语法：/正则表达式/

  1. 最简单的正则就是关键字原文'no'====/no/后缀；后缀：g 找全部；；；i忽略大小写

  2. 备选字符集：/^[备选字符集]/；；一个中括号只管一位字符；；正则表达式默认只要满足就不管后续了，而我们做验证希望的是用户从头到尾按照我们的要求来，希望从到尾完全匹配。解决方法：前加，后加/；；一个中括号只管一位字符；；正则表达式默认只要满足就不管后续了，而我们做验证希望的是用户从头到尾按照我们的要求来，希望从到尾完全匹配。解决方法：前加^，后加，两者同时使用，代表要求从头到尾完全匹配/^[备选字符集]$/ - 只要做验证必加。 如果备选字符集的assii码是连续的则可省略中间部分，一位数字[0-9];一位字母[A-Za-z];一位汉字[\u4e00-\u9fa5]

  3. 预定义字符集,简化了备选字符集：一位数字\d;一位数字，字母，下划线\w；一位空白字符：\s，预定义字符集也只管一位。

  4. 量词：规定一个字符集出现的次数：1、有明确数量：字符集{n,m}：前边相邻的字符集，至少n个，最多m个；字符集{n,}：前边相邻的字符集，至少n个，多了不限；字符集{n}：前边相邻的字符集，必须n个

  5. 无明确数量：字符集?：前边相邻的字符集，可有可无，最多1个；字符集*：前边相邻的字符集，可有可无，多了不限；字符集+：前边相邻的字符集，至少一个，多了不限

  6. 选择和分组：分组将多个字符集临时组成一组子规则(规则1|规则2)

  7. 预判公式：1.(?![0-9]+)−>不能全由数字组成，可能有大写、小写、汉字、日文、特殊符号...2.(?![0−9a−z]+) -> 不能全由数字组成，可能有大写、小写、汉字、日文、特殊符号...2.(?![0-9a-z]+) -> 不能全由数字组成、也不能全由小写组成、也不能全由数字和小写的组合组成

  8. 支持正则表达式的字符串API：

  • 切割：var arr=str.split("固定切割符"/RegExp);

  • 替换：1、基本替换法：

      	str=str.replace(/正则表达式/后缀,"新内容");
  	replace支持支持正则，并且搭配上后缀g就可以找到全部
  	缺陷：替换的新内容是一个固定的

  1. 高级替换法：

     	str=str.replace(/正则表达式/后缀,function(a,b,c){
 	console.log(a);//正则匹配到的关键字
 	console.log(b);//正则匹配到的关键字的下标
 	console.log(c);//原字符串
 	return 判断a关键字的长度，而返回不同的数量
avatar
文章
阅读
粉丝