了解前端——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.οnclick=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

转载于:https://www.cnblogs.com/immkoy/p/9769431.html

了解前端——js需知道知识点相关推荐

前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
前端 ---JS中的面向对象
JS中的面向对象创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 JS ...
前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
杰普实训（前端）第一天知识点总结
杰普实训(前端)第一天知识点总结今日小结一个完整软件的组成前端工程师和后端工程师前端工程师 Java工程师 js 基础 js与java的简单对于 js组成变量数据类型操作符一元运算符 ...
前端js华为云obs上传下载文件与进度条的设置
前端js华为云obs上传下载文件与进度条的设置首先下载OBS BrowserJS SDK安装包用git将代码拉到本地 git clone https://github.com/huaweiclou ...
前端js 下载xls表格
最近在做的项目中,需要有一个将页面展示的数据下载下来的功能,做爬虫的我感觉到了前端知识的匮乏面对需求,脑海中最先涌现出的是两个方向来实现由后端把xls表格制作出来,然后前端只需点击 a标签即可完成 ...
web前端-JS（DOM、BOM）
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
前端 js实现模糊搜索
前端 js实现模糊搜索 template <input type="text" v-model="keyWord" @input="fuzzyQ ...
前端JS常用工具方法
前端JS常用工具方法 // var ua = window.navigator.userAgent.toLowerCase(); /*** 前端JS常用工具方法* @class Tools*/ exp ...

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

了解前端——js需知道知识点相关推荐

最新文章

热门文章