front_end_fan

在火狐Firefox、opera、IE下阻止冒泡事件是不同的代码的，火狐下使用的是event.stopPropagation()，而IE下使用的是cancelBubble，jQuery 可以使用e.stopPropagation()就可以兼容了，如果是纯粹的JavaScript需要下面的代码来统一： if (event.stopPropagation) { // Mozilla and Opera

Object类型1. 实例化对象所有其他对象都继承Object。创建object实例的方式有两种：第一个种是使用new操作符后跟Object构造函数var person = new Object() 注意：O是大写第二种是使用对象字面量：var person = { name: 'tg' }; 访问对象属性使用的是点表示法，也可以用方括号表示法来访问。var person = {

想要知道下列问题的答案，就去看看这本书吧！1.怎么获取数据类型？ typeof xxx xxx instanceof Array Array.isArray(xxx)2.字符串和数组的api区别？ 字符串本质是类数组对象，字符串为只读，只能用length访问长度，[key]来取值，不能修改，不能使用slice(),forEach()...等数组API.3.原生js

正则表达式正则表达式（regular expression）是一个描述字符模式的对象。JavaScript的RegExp类表示正则表达式，String和RegExp都定义了方法。1.1 正则表达式的定义正则表达式有两种方法定义：一种是使用正则表达式直接量，将其包含在一对斜杠（/）之间的字符。var pattern = /s$/; 另一种是使用RegExp()构造函数。var pattern = n

Event 事件客户端JavaScript程序采用了异步事件驱动编程模型。一、相关术语事件流描述的是从页面中接收事件的顺序。事件就是Web浏览器通知应用程序发生了什么事情。事件类型（event type）是一个用来说明发生什么类型事件的字符串。例如，“mousemove”表示用户移动鼠标，“keydown”表示键盘上某个键被按下等等。事件目标（event target）是发生的事件与之相关的对象。当

函数1.函数简介通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用。ECMAScript中的函数使用function关键字来声明，后跟一组参数以及函数体，这些参数在函数体内像局部变量一样工作。function functionName(arg0, arg1....argN) { statements } 函数调用会为形参提供实参的值。函数使用它们实参的值来计算返回值，称为该函数

数组1.数组简介数组是值的有序集合。每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示（从0开始），称为索引，整个数组用方括号表示。var arr = [1,2,3]; 除了在定义时赋值，数组也可以先定义后赋值。var arr = []; arr[0] =1; 数组元素可以是任意类型。var arr = [1,'a',{name:'a'},function(){}]; 上面数组a

对象JavaScript是面向对象编程（Object Oriented Programming，OOP）语言。面对对象编程的核心思想就是是将真实世界中各种复杂的关系，抽象成一个个对象，然后由对象之间分工合作，完成对真实世界的模拟。何为对象？对象是单个实物的抽象。 一本书、一辆汽车、一个人都可以是“对象”，一个数据库、一张网页也可以是“对象”。世界上所有的对象都可以是“对象”。对象是一个容器，封装了

JSONJSON（JavaScript Object Notation，JavaScript对象表示法），它是JavaScript的一个严格子集。JSON只是一种简单数据格式，并不是只有JavaScript拥有。1、语法JSON对值的类型和格式有严格的规定：复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不

BOMWindow对象是客户端JavaScript程序的全局对象。11.1 计时器setTimeout()和setInterval()可以用来注册在指定的时间之后单次或重复调用的函数。两者都是客户端JavaScript中的全局函数，也就是Window对象的方法。（1）setTimeout()setTimeout()方法用来实现一个函数在指定的毫秒数之后运行，返回一个值，这个值可以传递给clearTi

DOM–属性和CSS一、属性HTML元素由一个标签和一组称为属性（attribute）的名/值对组成。1、HTML属性作为Element的属性表示HTML文档元素的HTMLElement对象定义了读写属性，它们映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性（如id、标题lang和dir）的属性，以及事件处理程序属性（如onclick）。特定的Element子类型为其元素定义

鉴于时不时，有同学私信问我怎么学前端的问题。这里统一回复一下，如下次再遇到问我此问题同学，就直接把本文链接地址发给你了。 首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时，人家管你叫帅哥一样，你答应与否都无妨。 正题开始，前端怎么学，应该因人而异，别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线，先平后陡。项目实践和练

DOM1、DOM文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。如下图：上图中的每一个方框是文档的一个节点，它表示一个Node对象，而所有节点组成了节点树（DOM树）。节点有7种类型：

案例描述body很长，可以滑动，body头部有一个模拟下拉的选择框。下拉选择有滚动轴，如下图。我给body一个overflow：hidden和高度是没有用的。手机网站上背景还是可以滑动，然后我给body一个touchmove的preventdefault()阻止事件，body滑动阻止了，PC上面是可以了，但是手机上面滑动div还是会导致底部body的滑动，我给div 一个阻止冒泡的事件stopPr

语句表达式在JavaScript中是短语，而语句（statement）就是JavaScript整句或命令。JavaScript语句是以分号结束。默认情况下，JavaScript解释器依照语句的编写顺序依次执行。1. 表达式语句（1） 复合语句我们可以用花括号将多条语句括起来，这就是复合语句（语句块）。{ var a = 1; var b = 1; } （2）空语句分号前面可以没有任何

表达式表达式（expression）是JavaScript中的一个短语，JavaScript解释器会将其计算出一个结果。将简单表达式组合成复杂表达式最常用的方法就是使用运算符（operator）。运算符按照特定的运算规则对操作数进行运算，并计算出新值。1、表达式1.1 原始表达式原始表达式是表达式的最小单位—它们不包含其他表达式。JavaScript中的原始表达式包含常量、直接量、变量或关键字。直接

1 运算符ECMA-262描述了一组用于操作数据值的运算符，包括算术运算符、位运算符、关系运算符和相等运算符。1.1 一元运算符只能操作一个值的运算符叫做一元运算符。1.递增和递减递增（++）和递减（–）都有两种使用方式：前置型和后置型。前置型指的是运算符放在要操作的变量之前，而后置型则是运算符放在要操作的变量之后。var age = 10; var age2 = 10; ++age; --a

Array类型ECMAScript数组的每一项可以保存任何类型的数据，也就是说，而且数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。var colors = [1, 'tg', {}]; 在上面的例子中，数组中保存了数值、字符串和对象。1、初始化数组实例创建数组的基本方式有多种：（1）使用Array构造函数当传递一个参数时，如果传递的参数是数值，则会按照该数值创建包含给定项

Date类型在JavaScript中，Date类型是用来保存日期的，它能精确到1970年1月1日之前或之后的285616年。1、创建日期对象要创建一个日期对象，使用new操作符和Date构造函数即可：var now = new Date();//Thu Sep 21 2017 08:41:51 GMT+0800 (中国标准时间) 在调用Date构造函数而不传递参数时，新创建的对象自动获得当前日期和

基本包装类型（Boolean、Number、String）1、基本包装类型简介ECMAScript提供了三个基本包装类型：Boolean、Number、String。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能过调用一些方法来操作这些数据。执行步骤如下：创建S提让那个类型的一个实例在实例上调用指定的方法销毁这个实例var s1 = new String

开发技巧1、使用var声明变量如果给一个没有声明的变量赋值，默认会作为一个全局变量（即使在函数内赋值）。要尽量避免不必要的全局变量。2、行尾使用分号虽然JavaScript允许省略行尾的分号，但是有时不注意的省略，会导致不必要的错误。建议在可用可不用行尾分号的地方加上分号。3、获取指定范围内的随机数var getRandom = function(max, min) { min = arg

常用API合集一、节点1.1 节点属性Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类型的常数值，只读 Node.nodeValue //返回Text或Comment节点的文本值，只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写 Node.baseURI //返回当前网页的绝对路径No

作用域1.1 作用域几乎所有的编程语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。作用域有全局作用域和局部作用域（一般是在函数内）之分。1.1.1 全局作用域在代码中任何地方都能访问到的对象拥有全局作用域。一般来说，拥有全局作用域有以下几种情况：（1）在最外层的函数和在最外层函数外面定义的变量拥有全局作用域例子：var name = 't

原型链3.1 原型每一个JavaScript对象（null除外）都和另一个对象相关联，也可以说，继承另一个对象。另一个对象就是我们熟知的“原型”（prototype），每一个对象都从原型继承属性。只有null除外，它没有自己的原型对象。我们可以通过proto（首尾都是双下划线）来获取实例的原型对象。注意：proto连接的是实例与构造函数的原型对象之间，而不是实例与构造函数之间。所有通过对象直接量创建

this关键字JavaScript代码都存在于一定的上下文对象中。上下文对象通过this关键字来动态指定，它永远指向当前对象。简单的说，就是返回属性或方法“当前”所在的对象。this的工作原理在5种不同的情况下，this指向的各不相同。（1）全局范围内this 当在全局范围内使用this，它将指向全局对象（2）函数调用function test(){ console.log(this);

Geolocation API（地理位置）1、地理位置（Geolocation API）Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制（比如IP地址、Wifi热点、手机基站等）。1.1 检测地理位置是否可用if('geolocation' in navigator){ //地理位置可用 }else{ //地理位置不可用 } 1.2 获取当前定位

多媒体（video和audio）一、音频（audio）和视频（video）在HTML5中引入了<audio>和<video>元素，用来在HTML文档中嵌入音频和视频：<audio src="m.mp3"/> <video src="m.mp4" width=320 height=400 /> 由于不同的浏览器对标准音频和视频的编解码支持上并不一致，所以通常需要使用<source>元素来为指定不同

Blob2、BlobBlob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。（以二进制形式保存的较大的对象）比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.2.1 生成Blob对象生成Blob对象有两种方法：一种是使用Blob构

File API3、文件系统API3.1 File API在HTML5中新增了File API，可以让网页要求用户选择本地文件，并且读取这些文件的信息。选择的方式可以是HTML<input>元素，也可以是拖拽。<input type="file" id="photo">var selectedFile = document.getElementById('photo'); var file = s

Canvas二、canvasHTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。要使用Canvas API，首先需要新建一个<canvas>网页元素<canvas id="canvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas>

Canvas二、canvasHTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas>标签只是图形容器，您必须使用脚本来绘制图形。要使用Canvas API，首先需要新建一个<canvas>网页元素<canvas id="canvas" width="400" height="200"> 您的浏览器不支持canvas！ </canvas>

富文本编辑器1、富文本编辑器简介富文本编辑（WYSIWYG（What You See Is What You GET，所见即所得））。最先的富文本编辑，就是在页面中嵌入一个包含空HTML页面的iframe，然后通过设置designMode属性，这个空白的HTML页面就可以编辑了，编辑对象则是该页面<body>元素的HTML代码。 designMode属性有两个可能的值：“off”和“on”，默认为

表单Web表单是开发人员与用户交互的重要控件。1、form1.1 form独有的属性和方法在HTML中，表单是由<form>来表示的，而在JavaScript中，表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它跟其他HTML元素具有相同的默认属性。<form>也有自己独有的属性和方法：acceptCharset：服务器能够处理的字符集

AJAX超文本传输协议（HyperText Transfer Protocol，HTTP）是用于从WWW服务器传输超文本到本地浏览器的传输协议（transport）。它可以使浏览器更加高效，使网络传输减少。Ajax（Asynchronous JavaScript and XML）描述了一种主要使用脚本操纵HTTP的Web应用架构。Ajax的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不

console对象console对象是JavaScript的原生对象，可以将信息输出在控制台。1、打开控制台不同系统平台打开浏览器的控制台可能有些不一样，下面以chrome浏览器为例，可以使用下列方式打开：按F12鼠标右键里选择“检查”在右上角的菜单中点击“更多工具/开发者工具”打开控制台以后，你可以看到下列不同的面板：Elements：查看网页的HTML源码和CSS代码。 Resources：查

单体内置对象（Global、Math）内置对象也就是我们不必显示地区实例化，直接就可以使用了，因为它们已经实例化了。1、Global 对象Global对象是一个全局对象。所有在全局作用域中定义的属性和函数，都是Global对象的属性，比如：isNaN()、isFinite()、parseInt()以及parseFloat()，实际上都是Global对象的方法，它还包括了其他一些方法：1.1 Glob

2.4 数据类型ECMAScript中有5种简单数据类型（基本数据类型）：Undefined、Nul、Boolean、Number和String。还有1种复杂数据类型–Object，Object本质上是由一组无序的名值对组成的。 注：在ES6中新增了Symbol。2.4.1 typeof操作符typeof操作符用来检测给定变量的数据类型，可能的返回值："undefined" 这个值未定义 "b

##语法##2.1 语法JavaScript程序是用Unicode字符集编写的。2.1.1 区分大小写JavaScript中的一切（变量、函数名和操作符）都区分大小写。比如变量名test和变量名Test代表的是两个不同的变量。2.1.2 标识符标识符是指变量、函数、属性的名字，或函数的参数。标识符格式规则：第一个字符必须是一个字母、下划线（_）或一个美元符号（$）所以有了以_为所写的undersco

以后再写页面上的js代码，一定要考虑复用性。比如封装好一个方法，其他地方要能够直接使用就像是下面的代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>textarea还剩余字数统计</title> <style type="text/css"> body,a{ font-size:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0} #main{ position: absolute; width: 2