DOM 常用的DOM获取方法: node.children 返回子元素节点,没有兼容性问题,动态获取 node.parentNode 获取父节点,没有兼容性问题 node.offsetParent 获取最近的定位父节点 node.tagName 获取元素节点的标签名 常用的DOM操作: document.createElement("TagName") 创建一个元素节点 parentNode.appendChild(node) 在父节点内容的最后添加子节点 parentNode.ins…

JavaScript的解析顺序 第一阶段:编译期 寻找关键字声明的变量.函数声明的变量,同时会对变量进行作用域的绑定 var声明的变量,在编译期会赋一个默认值undefined,变量提升的特性. ES6及以后所有的变量申明方式都不具备变量提升,在声明之前调用会报错,这个现象在语法上称为暂时性死区TDZ. 如果一个变量同时被var声明又被function声明,则变量提升的值以函数为准(函数为一等公民).但最后是以赋值的数值作为变量的最终值. console.log(a); //函数a consol…

fetch 在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象. fetch(url, initObj) .then(res=>res.json()) .then(data=>{ //这里得到返回的json对象,可进行操作 }) .cateh(err){ console.log(err); }; //initObj { body: JSON.stringify(data), // must match 'Content-Type' header cache:…

Symbol 为什么需要symbol ES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和原来的属性名发送冲突,显然我们是不希望这种情况发生的.所以,我们需要确保每个属性名都是独一无二的,这样就可以防止属性名的冲突了.因此,ES6里就引入了Symbol,用它来产生一个独一无二的值. symbol是什么 Symbol是ES6引入的一种原始数据类型,接受一个字符串参数,来对产生的Symbol…

数组的冒泡.选择和插入排序法 冒泡排序法(从小到大) function bubble(arr){ for(let i = 0 ;i<arr.length-1;i++){ for(let j = i+1;j<arr.length;j++){ if(arr[j]<arr[i]){ let temp = arr[j]; arr[j] = arr[i]; arr[i] = temp; } } } return arr; } 选择排序法(从小到大) function select(arr){ fo…

DOM特殊元素获取 document.documentElement //HTML标签 document.head //head标签 document.title //title标签 document.body //body标签 typeof 的那些坑 typeof null 返回Object, 然而null是基本类型值而不是引用类型值,null == null 是成立的. typeof NaN 返回number,NaN是一个自身不等于自身的数值类型. typeof Symbol 返回funct…

call,apply,bind call,apply,bind这三者的区别,及内部实现原理,点这里 promise promise函数的内部实现原理,点这里 闭包 闭包就是能够读取其他函数内部变量的函数.形式上,就是一个函数返回一个内部函数到函数外,内部函数引用外部函数的局部变量.本质上,闭包是将函数内部和函数外部连接起来的桥梁. 原型链 JavaScript中每一个对象都有一个__proto__和constructor属性,每一个函数都有一个prototype属性,因函数也是对象,所以函数也拥…

前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档. 浏览器本身分为两种模式,一种是标准模式,一种是怪异模式(混杂模式),浏览器通过doctype来区分这两种模式,doctype在html中的作用就是触发浏览器的标准模式,如果html中省略了doctype,浏览器就会进入到Quirk…

原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是”实践”,要理解这东西容易得很,关键是要去”实践”,去”执行”,去”反馈”,去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些…

一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本,即EcmaScript. 事实上ECMAScript只是JavaScript的一部分,完整的JavaScript是由以下三个部分组成的: 核心(ECMAScript) 文档对象模型(DOM)Document object model 浏览器对象模型(BOM)Broswer object model…

JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队列中会按照顺序一个接一个的执行.异步代表JavaScript代码在任务队列中的顺序并不完全等同于代码的书写顺序,比如事件绑定.Ajax.setTimeout()等任务的发生时间是"不可被预期"的. 页面加载时,JavaScript引擎会顺序执行页面上所有JavaScript代码,优先执行同…

Ajax(Asynchronous JavaScript and XML) 这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据.在原生方法上,Ajax技术的核心是XMLHttpRequest对象(简称XHR). XHR用法 open(method, url, isAsync) 开启一个method类型的请求,url是相对于当前页面(也可以是绝对路径),open方法并不会真正发送请求,而只是启动一个请求已备发送. send(data) 接收作为请求主体发送的数据,如果不需要必须传…

Promise Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. Promise对象代表一个异步操作,有三种状态: pending(进行中).fulfilled(已成功)和rejected(已失败). 只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态. 回顾ES5中若要实现以下异步编程逻辑,将会形成回调地狱(回调不断嵌…

flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目". 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(…

jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行".jQuery具体的实现,都被包含在了一个立即执行的匿名函数构造的闭包里面,然后只暴露 $ 和 jQuery 这2个变量给外界: (function(window, undefined) { // 用一个函数域包起来,就是所谓的沙箱 // 在这…

CORS(cross origin resource sharing)跨域资源共享 来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. 简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的AJAX通信…

async函数 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是 Generator 函数的语法糖 什么是语法糖? 意指那些没有给计算机语言添加新功能,而只是对人类来说更"甜蜜"的语法.语法糖往往给程序员提供了更实用的编码方式,有益于更好的编码风格,更易读.不过其并没有给语言添加什么新东西 async函数使用时就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已 async函数对 Generato…

Iterator 迭代器是一种接口.是一种机制. 为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). Iterator 的作用有三个: 为各种数据结构,提供一个统一的.简便的访问接口: 使得数据结构的成员能够按某种次序排列: 主要供for...of消费. Iterator本质上,就是一个指针对象. 过程是这样的: (1)创建一个指针对象,指向当前数据结构的起始位置. (2)第一次调用指针对象的next方法,…

BFC布局(Block Formatting Contexts) 来源:https://www.cnblogs.com/lzbk/p/6057097.html 块级格式化上下文是页面中的一块渲染区域,它决定了其子元素将如何定位,一起和其他元素的关系和相互作用. BFC的特性 内部的box会在垂直方向,从顶部开始一个接着一个地放置 box 垂直方向的距离由margin(外边距)决定.属于同一个BFC的两个相邻box的margin会发生叠加(垂直方向上的外边距合并问题) BFC的区域不会与float…

来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度,蓝色为基线(字母x底部所在的水平线) 行内元素: 行内块元素: (左)在流内内容的情况下,内联块元素的基线是正常流中最后一个内容元素的基线(左边的例子).对于这最后一个元素,它的基线是根据它自己的规则找到的. (中)在流内内容但内联块元素有overflow:hidden属性的情况下,基线是内联块元素…

转:https://segmentfault.com/a/1190000011061136 前言 前一阵面试,过程中发现问到一些很基础的问题时候,自己并不能很流畅的回答出来.或者遇到一些基础知识的应用,由于对这些点理解的不是很深入,拿着笔居然什么都写不出来,于是有了回顾一下这些基础知识的想法. 首先就是面试中经常会问到的,JS是怎么实现继承的,其实问到继承,面试官想问的可能还是你对JS面向对象的理解吧. 这一部分的主要参考资料:<JavaScript高级程序设计>.<JavaScript…

关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好.前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊. 1.从资源加载方面来说,浏览器的加载顺序是按源码从上到下加载解析的,遇到link,script等资源都会阻塞页面渲染,所以我们会把script放在</body>前面,我们还可以结合构建工具(webpack,gulp...)压缩js文件,抽离公共js.去掉空格.注释,尽可能地让js文件变小,防止脚本阻塞页面渲染. 2.在写代码的时…

React.js 编写react需要安装的三个开发环境下的模块 babel 解析JSX react 实现ui用户界面 react-dom 处理dom JSX:在JavaScript里面写html代码(最好用圆括号包起来,单标签要闭合),在html代码中用插值符号{}可以写js代码 ReactDOM.render(element, container, cb) 往容器中渲染一个组件element 循环返回dom的时候要加上key属性,但这个属性不能在props中取到 添加css用style属性=一…

一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]”.习惯将数组赋值给一个变量. var arr = []; var arr = [1,2,3,4,5,6,7,888,999,666]; arr[5] = 88; //把数组下标为5的项改为88(设置数组中的某一项) console.log(arr); console.log(arr[0]); //1…

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 四个概念 entry:入口起点,可以配置多页面. output:出口,项目编译完成后之后文件输出路径. loader:webpack 自身只理解 JavaScript,loader 能够去处理非 JavaS…

mongodb和mongoose模块 数据库 数据库有关系型数据库(MySQL)和非关系型数据库(mongodb),两者的语法和数据存储形式不一样. mySQL 关系型数据库 类似于表格的形式,每一条数据都是以id为标识 table thead name sex age id tbody May female 18 1 Simple male 25 2 mongodb 非关系型数据库 集合,相当于表的概念,Bson,一条数据代表一个文档(数据的基本单位) { id : name : May ag…

koa 基于Node.js的web框架,koa1只兼容ES5,koa2兼容ES6及以后. const Koa = requier("koa"); const koa = new Koa(); //koa.use注册中间件(一个用来处理请求/修饰向服务器发起的请求的异步函数,参数为ctx和next) //每一个请求都会从上往下执行,当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件.当在下游没有更多的中间件执行后,堆栈将展开并且每个中间件恢复执行其上游行为. k…

Node.js 事件循环机制 setImmediate()是将事件插入到事件队列尾部,主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数,和setTimeout(fn,0)的效果差不多 process.nextTick()方法可以在当前"执行栈"的尾部-->下一次Event Loop(主线程读取"任务队列")之前-->触发process指定的回调函数.也就是说,它指定的任务总是发生在所有异步任务之前,当前主线程的末尾. 事件…

前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七.事件 八.拓展 一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Br…

JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 button1,通过原生的js 设置背景色为红色?JS5.处理a.html文件时,以下哪行伪代码可能导致内存越界或者抛出异常()JS6.下面的代码结果是JS7.下面的代码结果是JS8.考察this(测试环境是浏览器,Node环境中全局对象有所不同)JS9.var和函数的声明提前JS10.给基本类型…