博客学习前端

学习于该博客即该作者的相关博客：
https://movie.blog.csdn.net/article/details/82797794
1.
   /*      定时器的bug,开启新定时器之前，必须先关闭旧定时器 */
                window.clearInterval(timer);
2.Uncaught TypeError: Cannot set property 'onclick' of undefined
   问题分析：当JS文件放在head标签里中时，并且绑定了onclick事件，就出现了这
   个错误
   原因：
   W3School中介绍浏览器先加载完按钮节点才执行JS，当浏览器自顶向下解析时，找
   不到onclick绑定的按钮节点了
   转载于该博客：https://blog.csdn.net/wls666/article/details/89281458
3.
  history历史地址对象：forward,back,go
  location地址对象     网址定位:href超链接
  BOM的顶层对象就是window对象
  window对象的弹框功能：
  alert警告框,confirm确认框，promp提示框
4.单次定时器:setTimeout() 仅执行1次
   循环定时器:setInterval() 无限循环
5.定时器积累Bug的解决：
   在JS中，如果一次性开启了N个定时器，则会产生定时器积累的Bug;解决这一Bug
方法很简单，只需要在每次开启新定时器前，将旧的定时器做一次清空即可。
6.获取id：
  document.getElementById("ID名")   返回指定的id对象
  获取name值：
  document.getElementsByName("name名) 返回指定name值的对象集合
  获取类名：
  document.getElementByClassName("class名“）；返回指定class名的对象集合
  获取标签名：
  document.getElementsByTagName("标签名");  返回指定标签名的对象集合
  获取标签内容：
  element.innerHTML:  获取标签内部的所有内容
  element.innerText;  获取标签内部的文本内容
7.获取属性：
  element.getAttribute("name:) 或者element属性名  ：获取属性的值
8.<a href="javascript:;">
  点击链接后没有反应，也就是上面路径后面不会加#，不会跳转，一般用于开发
时（页面还没有完成时）
9.itemSelects[i].checked = !itemSelects[i].checked;
   itemSelects[i].click();
10.反选计数器定义放在反选内容里面，不然有点问题，全选选不到
11.加引号啊加引号
     什么.getElementsByTagName("tr");什么.backgroundColor = "yellow";
12.全局函数：
    parseInt(num);     取整，不会四舍五入
    Math.round(num);   取整，会四舍五入
13.正则表达式：正则表达式是字符模式的对象，主要用来验证客户端的输入数据
。用户填写表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用
Java,PHP,等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的
服务器端的系统资源，并且提供更好的用户体验
14.测试正则表达式：
   RegExp 对象的方法：
   test：在字符串中测试模式匹配，返回true或false
   exec: 在字符串中执行匹配搜索，返回结果数组
   String 对象中的正则表达式方法
   match(pattern):返回pattern中的子串或null
   replace(pattern,replacement)：用replacement替换pattern
   search(pattern)：返回字符串中pattern开始位置
   split(pattern)：返回字符串指定pattern拆分的数组

学习于该博客:
https://blog.csdn.net/m0_55221239/article/details/115313923
1.表单经常需要做一些非空验证，长度验证，合法性验证等
2.onsubmit只能表单上使用，提交表单前会触发，onclick是按钮等控件使用，用
来触发点击事件
  在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中
验证，也可以在onsubmit中验证
  但是onclick比onsubmit更早的被触发
转载于该博客：
https://www.cnblogs.com/min-yu/p/11187485.html
3.所有的表单项元素都value属性
4.JavaScript的RegExp对象
  概念：RegExp是正则表达式(regular expression)的简写
  正则表达式(英语:Regular Expression,在代码中常简写为regrex,regexp或RE)
  使用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式。搜索模
式可用于文本搜索和文本替换。
5.语法：
   var reg = new RegExp(/正则表达式主体/,修饰符（可选));或更简单的方法
   var reg=/正则表达式主体/修饰符（可选）；

  案例：
  var reg = new RegExp(/kaikeba/i);
  var reg = /kaikeba/i;  此处定义了一个正则表达式。kaikeba是一个正则表达
式主体（用于检索)
  i是一个修饰符（搜索不区分大小写）
6.修饰符：
  i:执行对大小写不敏感的匹配
  g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
  m:执行多行匹配
  表达式：
  [a-z]:查找方括号之间的任何字符
  [0-9]:查找任何从0至9的数字
  (x|y):查找任何以|分隔的选项
  元字符：
  \d：查找数字
  \s:查找空白字符
  \b:匹配单词边界
  \uxxxx:查找以十六进制数xxxx规定的unicode字符
  量词：
  n+:匹配任何包含至少一个n的字符串
  n*:匹配任何包含零个或多个n的字符串
  n?:匹配任何包含零个或一个n的字符串
7.动态表格：
  table.rows:获取表格中的所有行
  tr.cells:获取表格中某一行的所有单元格
  tr.rowindex:获取表格中某一行的下标索引（从0开始）
  td.cellindex:获取单元格的下标索引
  table.insetRow():从表格中创建新行，并将行添加到rows集合中
  table.deleteRow():从表格即rows集合中删除指定行
  tr.insertCell():从表格的行中创建新的单元格，并将单元格添加到cells集合
中

学习于该博客：
https://blog.csdn.net/qq_35942348/
1.js函数内置对象---arguments
   方法调用时，可以得到所有传进来的参数
2.在函数内的定义的变量均为局部变量
   函数运行完之后就会销毁（垃圾回收机制），所以外界无法访问
3.JS事件
   HTML事件是发生在HTML元素上的事情
   JavaScript可以触发这些事件
   可以看做是用户的某些操作，或者说业务需要监听的某些操作
4.test.addEventListener("click",myfun);
   function myfun() {｝
5.let obj = Object.create(null)与let obj = {}（对象字面量创建对象）的区
别
  Object.create(null)创建的对象是非常纯净的，没有任何其它元素
  而字面量创建的对象是带有_proto_的，下面有一些方法与属性，这便是js的原
型链继承，它继承了Object的方法和属性
  如果需要对象的继承属性和方法，用字面量。如果只要里面的元素，就用另一种
6.JavaScript prototype(原型对象）
  此属性是函数特有的，每个函数都会默认添加一个，用于继承属性和方法
7.prototype继承
  所有的JavaScript对象都会从一个prototype(原型对象）中继承属性和方法:
  Date对象从Date.prototype继承
  Array对象从Array.prototype继承
  Person对象从Person.prototype继承
  所有JavaScript中的对象都是位于原型链顶端的Object的实例
  JavaScript对象有一个指向一个原型对象的链
  当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原
型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性
或到达原型链的末尾（逐级查找）
  Date对象,Array对象，以及Person对象从Object prototype继承
8.this指向:
   this永远指向最后一个调用它的那个对象
9.如何解决this指向问题？
  ①，使用ES6中箭头函数
  ②，函数内部使用_this = this
  ③，使用apply,call,bind方法
  ④，new实例化一个对象
10.apply,call,bind:
     apply():
     一，apply()方法调用一个函数，其具有一个指定的this值，以及作为一个数组（或者类似数组的对象）提供的参数，fun.apply(thisArg,[argsArray])
     二，thisArg：在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象
     三，argsArray:一个数组或者类数组对象，其中的数组元素将作为单独的参数传给fun函数。参数为null或者undefined，则表示不需要传入任何参数
     call():
     一，call()调用一个函数，其具有一个指定的this值，以及若干个参数列表，fun.call(thisArg,arg1,arg2..)
     二，thisArg:在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象
     三，arg1,arg2,...;若干个参数列表
     bind():
     一.bind()创建一个新的函数，当被调用时，将其this的关键字设置为提供的值，在调用新函数时，在任何提供一个给定的参数序列
     二，bind创建了一个新函数，必须手动去调用
11.区别:
     ①，apply和call基本类似，他们的区别只是传入的参数不同
     ②，apply传入的参数是包含多个参数的数组
     ③，call传入的参数是若干参数列表
     ④，bind方法会创建一个新的函数，当被调用的时候，将其this关键字设置为提供的值，我们必须手动去调用
12.JavaScript的事件流模型
    ·事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
    ·事件捕捉：事件由最不具体的节点先接受，然后逐级向下，一直到最具体的（与上面相反）
    ·DOM事件流：三个阶段：事件捕捉，目标阶段，事件冒泡

13.防抖与节流：
     函数防抖：当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一次操作进行。比如赛车通道，第二辆进以及第一辆销毁
     函数节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数，比如客运大巴的乘客上车
14.为什么要有虚拟dom?
    ·文档对象模型或DOM定义了一个接口，该接口允许JavaScript之类的语言访问和操作HTML文档
    ·但是此接口需要付出代价，大量非常频繁的DOM操作会使页面速度变慢
    ·虚拟dom的出现就是为了解决dom的性能问题
15.虚拟dom是什么？好处是？
    ·本质就是JS对象
    ·真实节点抽象成JS对象（文档结构树）
    ·虚拟节点(VNode)表示DOM树中的节点。当需要操纵时，可以在虚拟DOM的内存中执行计算和操作，而不是真实DOM上进行操作
    ·相对于直接操作dom，这自然会更快
16.
  function getQueryString(name) { 
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  var r = window.location.search.substr(1).match(reg); 
  if (r != null) return unescape(r[2]); 
  return null; 
}
17.按钮中的字显示在右侧style="text-align: right;"
18.eval()函数可计算某个字符串，并执行其中的JavaScript代码
     该方法值接受原始字符串作为参数，如果string参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为eval()函数传递String对象来作为参数