了解前端——js需知道知识点

• 一、介绍
  • 1、JS是一门弱类型语言，变量需要使用 var 来声明（但是这种声明方式有变量提升效果，在ES6之中我们一般使用let 来声明变量）同时他也是一门解释型面向对象语言；
  • 2、JS的基本组成，JS一般由三部分组成
    • 1、ECMAScript ：这是JS的语法标准，现在更新至ES6，包括变量，表达式，运算符，函数，if，for
    • 2、DOM：操作网页上元素的API，可以让盒模型，移动，变色等
    • 3、BOM：操作浏览器部分功能的API，实现浏览器的部分功能，如前进，后退等
• 二、ECMAScript基础介绍
  • 1、一般来说ES对换行，空格，缩进不敏感，但是我们还是会推荐在每一行的结尾写上分号，而且最好严格按照缩进进行程序编排，方便阅读，方便修改；每个浏览器都是一个解释器，而其控制台可以让我们打印东西；
  • 2、alert（“ ”）弹出框；console.log(" " ),浏览器控制台打印；prompt( )用户输入字符串的地方，相当于input
  • 3、若我们对一个未定义的变量进行操作，报错就是“xx is not defined ”，若是该变量定义过，但并未赋值，输出结果不会报错，会输出一个值undefind,该值的类型也为undefined；
  • 4、数据类型与python类似，不做详细介绍，可以互相比较学习记忆，重点记下以下方面：
    • 1、typeof 用于获取目标的数据类型；
    • 2、“+”，“-”这种运算符，数值和字符串之间同样可以进行操作而且不会报错，但是输出啥就不一定了，具体情况具体分析，操作中有一个隐式转换存在；
    • 3、一般我们在JS中进行值的比较时使用“===”，要求值和类型必须完全相同；“==”只需要值相等即可；
    • 4、与 ：&； 或 ：||；
    • 5、if语句 ：if（ 条件）{代码体 }else if（条件）{代码体}else{代码体}
    • 6、switch 条件。 case条件，若前者的条件和某一个case的条件相等，则执行该case条件的语句，遇到break停止；
    • 7、while语句：while（ 条件）{循环体}
    • 8、for循环便利：for（var i=1；i<100;i++){循环体}
    • 9、定义函数：function 函数名( ){ }；可以使用return给出返回值；他的实参是一个伪数组arguments;
• 三、DOM操作介绍
  • 1、DOM：文档对象模型；目的即是让JS可以操作html的节点；html在加载完毕之后，渲染引擎会在内存之中将html文档生成一个DOM树；操作时即可以修改树上节点的属性，在html之中一切都是节点，整个html也是节点object；DOM操作以事件驱动为核心，故而在进行DOM操作时我们需遵循事件三部曲
    • 1、获取事件源，如div=document.getElementById( )
    • 2、绑定事件，将一个函数绑定在事件上：div.onclick=function( ){ }
    • 3、函数中的代码体即为我们的操作程序
  • 2、常见的事件如下
    • onclick ;鼠标单击时触发
    • ondblclick；鼠标双击时触发
    • onchange；文本内容或者下拉菜单发生变化时触发
    • onfocus/onblur：获得焦点/失去焦点时触发
    • onmouseover/onmouseout;鼠标悬停/离开时触发
  • 3、获取事件源的常见方式
    • 1、div1=document.getElementById( );通过id来获得单个标签
    • 2、div2=document.getElementsByClassName( );通过classname来获取标签数组，是数组！
    • 3、div3=document.getElementsByTagName( );通过tagname来获取标签数组，是数组！
    • 4、通过节点关系获得节点
      • div4=div3.parentNode;获得该元素的直接父元素节点
      • div5=div4.children;获得div4元素的所有子元素节点数组
  • 4、基本节点操作
    • 创建节点:var a1=document.creatElement( "li" );创建一个li标签，但此时创建的节点并没有在页面中显示，需要继续进行插入
    • 插入节点：
      • 1、父节点。appendChild（新的子节点）
      • 2、父节点。insertBefore（新的子节点，参考子节点）
    • 删除节点：父节点。removeChild（子节点）
    • 复制节点：
      • 要复制的节点。cloneNode（）；括号里面参数默认为false，表示只复制节点本身，不包括子节点
      • 要复制的节点。cloneNode（true）；复制节点和所有子节点；
  • 5、对元素节点属性的操作
    • 1、获取元素节点的属性
      • 元素节点。属性；或者元素节点【“属性”】；获取类名使用classname
      • 推荐方法为。节点。getAtrribute（“属性名”）；获取类名使用class
    • 2、对节点的操作
      • 节点。属性名=“新的属性”
      • 节点。setAttribute（属性名，新的属性名）
    • 3、innerText和innerHTML
      • innerText来说，若是使用其获取值，他会获取标签中的文本信息，若是有子元素，也会获取子元素之中的文本信息；但是innerHTML则会获取子元素的标签名和文本信息
      • 故而若是来设置值，使用innerText，会将所有的东西当作文本显示在页面上，包括标签；但是innerHTML可以见标签解析成文本
    • 4、value，将value的新值完全赋值给拥有value的标签，包括标签名
  • 6、定时器
    • 一次性定时器，setTimeout（ ）
      • 语法：setTimeout（function，time（单位为毫秒））
      • 注意：我们一般可以在其前面声明一个变量接收到这个定时器，var ti=setTimeout( ),然后使用clearTimeout(ti)方法以便于清楚定时器
    • 循环执行定时器，setInteral( )
      • 语法：t2=setIneral（function，time），每隔改时间执行一次前面函数
      • 清除定时器：clearTimeout（t2）
    • 使用定时器之前最好也先清除一下定时器，防止意外发生，用过之后也清除i下定时器
  • 7、client、offset、scoll
    • client；可视
      • clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度 
      • clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度 
      • clientWidth 内容区域+左右padding 元素内部宽度，不包括边框，magin，滚动条 
      • clientHeight 内容区域+ 上下padding 元素内部高度，不包括边框，magin，滚动条
    • offset；偏移
      • offsetWidth占位宽 内容+padding+border 
      • offsetHeight占位高 内容+padding+border 
      • offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值 
      • offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
    • scroll；滚动
      • scrollHeight和scrollWidth 对象内部实际内容的高度/宽度
      • scrollTop和scrollLeft 用来获取对象被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
• 四、BOM操作介绍
  • 1、介绍：BOM为浏览器对象模型，可以操做浏览器的部分功能（但是大部分功能都被浏览器整合，故用的不多）
  • 2、window对象是BOM顶层核心对象，其他的对象都是其子对象，DOM也是BOM的一部分，但是我们使用window调用时可以省略window
  • 3、BOM的一些操作
    • open：打开窗口；语法为open（url，_blank/_self/_parent)
    • navigator方法
      • navigator.userAgent:获取客户端的浏览器、系统
      • navigator.platform:获取浏览器支持的系统，win/mac