JavaScript入门指南两万余字的基础总结

本片文章记录一下当时自己学习JavaScript的过程以及一些知识点和注意事项,从基础到中高级的内容都有,会以章节的形式慢慢展示出来

学前准备学习基础：DIV+CSS基础扎实开发工具: sublime/webstorm/VScode等等第一章初识JavaScript JavaScript（JS）是什么? JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。 JavaScript通常用来操作HTML页面，响应用户操作，验证传输数据等 java和JavaScript有什么关系？java和JavaScript没有关系 jQuery和JavaScript有什么关系？jQuery是由JS编写的一个js库。 JS代码写在哪里？内嵌 js，外链 js文件里面，利用src属性引入标签属性里面（不推荐） script标签中的属性type="text/javascript"或language=”javascript”，HTML5新规则下可以什么都不用加； script标签可以放置于任何位置，不同的位置要注意加载顺序，通常放在head或body结束之前；写JS代码需要注意什么? 严格区分大小写；语句字符都是半角字符；（字符串里面可以使任意字符）某些完整语句后面要写分号 (;) 代码要缩进，缩进要对齐。 JS里的系统弹窗代码 alert('内容') confirm('确定?) prompt('请输入您的姓名:') 变量很多时候，当我们重复使用某个元素或者某个数据时，内容可能太长或者数据要进行改变，这时就需要定义变量来代替他们。

语法：var + 变量名或者 let + 变量名 (var 和 let 声明的区别见后续章节)

Js中的注释单行注释 // 多行注释 /* */ 获取元素特殊的标签 document.body document.head document.title 复制代码一般标签 document.getElementById() // 匹配ID名称… ele.getElementsByTagName() // 匹配标签名是…的集合动态方法 document.getElementsByName() // 匹配name是…的集合动态方法 ele.getElementsByClassName() // 匹配class名称…的集合动态方法 ele.querySelector() // 匹配css选择器的第一个 ele.querySelectorAll() // 匹配css选择器匹配的所有集合复制代码获取和修改元素HTML 元素HTML内容 // ele代表获取的元素 ele.innerHTML // 获取元素HTML ele.innerHTML = '字符串' // 修改元素HTML 复制代码元素文本内容 // 标准 ele.textContent // 获取元素文本 ele.textContent = '字符串' // 修改元素文本

// 非标准(ie低版本) ele.innerText // 获取元素文本 ele.innerText = '字符串' // 修改元素文本复制代码第二章函数、自定义属性、事件变量与属性的区别 //此为变量 var a = 123;

//此时object 为节点对象（node） var object = document.getElementById('box');

//为object自定义了abc属性，且此属性的值888888 object.abc = 888888;

// 对象.属性名可以获取属性值 object.abc； //888888 复制代码属性分为 : 节点属性和 js属性节点属性 : 元素自带属性 js属性 : js中自定义的属性当js属性为合法节点属性的时候，可以修改节点属性的值

//此时object 为节点对象（node） var object = document.getElementById('box')

// 修改节点对象object的id属性, id属性为节点对象的合法属性 var object.id = 'box'; 复制代码函数函数申明有名函数 // 此时abc就代表此函数，函数不会自动运行，需要调用运行。 function abc(){ console.log(我是有名字的函数) } 复制代码带名字的函数，需函数名加小括号运行，如abc();

匿名函数 function (){} 复制代码匿名函数，不进行赋值会报错

函数表达式 // 匿名函数 var a = function(){} a() //此时用变量名加()来调用

//匿名函数 var b = function abc(){} b() //此时用变量名加()来调用; 如果abc()调用会报错复制代码函数/对象方法对象可以自定义属性对象的属性，如果赋值的是一个函数function(){}, 称之为对象的方法 // 此时object 为节点对象（nodelist） var object = document.getElementById('box'); // 为object自定义了方法 object.abc = function(){}; 复制代码事件属性事件 : 是当事人，在特定的时间在特定的地点发生了某事

js中的事件: 元素.事件属性 = 事件函数 // 获取当前符合条件的节点 var object = document.getElementById('box'); // 给当前节点添加一个点击事件, 配合这对应的处理函数 object.onclick = function(){} 复制代码 function () {}是一个固定的写法，在这个例子中，它被称之为事件函数。

事件函数也可以使用有名函数

var object = document.getElementById('box'); object.onclick = fn; function fn(){} 复制代码 javascript中的事件 [ 鼠标事件, 键盘事件, 表单事件, 系统事件, 等等] onclick —————— 点击（单击）事件 onmouseover ———– 鼠标滑入事件（会冒泡） onmouseout—————鼠标离开事件（会冒泡） onmouseenter————鼠标滑入事件（不会冒泡） onmouseleave————鼠标离开事件（不会冒泡） ondblclick ——————- 双击（单击）事件复制代码更多方法参考www.w3school.com.cn/tags/html_r…

函数中的this 事件函数里面的this就是指触发这个事件的元素

复制代码更多关于this的介绍请看后续章节

第三章操作元素属性 CSS样式以及 []的使用 cssStyle 操作 style 对象复合样式改写 background-color ------> backgroundColor cssText tyle.float的兼容 cssFloat /styleFloat attribute 属性节点获取： getAttribute(名称) 优势: 用.和[]的形式无法操作元素的自定义属性 getAttribute可以操作元素的自定义属性设置： el.setAttribute(名称, 值) 包含： el.hasAttribute(名称) 删除： el.removeAttribute(名称) 复制代码 []的运用当我们需要使用字符串表示属性的时候，或者此时属性会变化的时候

obj.style.width = '100px'; //可改为 obj.style['width'] = '100px'； //亦可 var str = 'width'； obj.style[str] = '100px' 复制代码第四章 javascript数据类型判断条件语句 javascript数据类型七大数据类型 Number String Boolean Null Object Undefined es6新增Symbol

number 数字 let num = 123 复制代码 String 字符串 let str = '只会番茄炒蛋' 复制代码 Boolean 布尔值 // true / false let falg = true 复制代码 Null 空 // 函数表达式 let abc = function(){}

// 函数声明/定义 funticon abc () {} 复制代码 Object 对象 // (节点对象、自定义对象、array(数组)、json、function、系统对象) 复制代码 Undefined 未定义 Symbol // Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID。复制代码判断语句判断语句返回布尔值

==  // 判断值
>   // 大于
<   // 小于
<=  // 小于等于
>=  // 大于等于
!=  // 不等于
=== // 全等于 除了判断值,还会判断数据类型
!== // 不全等

复制代码 if 条件语句 if ( 条件 ) { code // 这是条件满足时执行的代码 }

// 如果（）括号里面是true则运行{} 中代码 if ( 条件 ) { code 1 // 这是条件满足时执行的代码 } else { code 2 // 这是条件不满足时执行的代码 } // 如果（）括号里面是false 则运行 else 大括号中的代码, 总有一个会运行 if ( 条件一 ) { code 1 // 这是条件一满足时执行的代码 } else if (条件二) { code 2 // 这是条件二满足时执行的代码 } else { code 3 // 这是以上两种条件都不满足时执行的代码 } 复制代码 if () 中的条件会强制转化为布尔值，为false数据: false 0 '' null undefined NaN

三目运算三目运算符的语法为conditions ? statementA : statementB ;

let num = 5 num = 5 ? 6 : 5 // 上面这段话的意思就是 num 等于5的话值就改为6 不等于5的话值改为5 复制代码 switch case 条件语句 switch (data) { case 1: code1 // 执行代码 break // break 来阻止代码自动地向下一个 case 运行。 case 2: code2 //// 执行代码 break // break 来阻止代码自动地向下一个 case 运行。 default: 与 case 1 和 case 2 不同时执行的代码 } 复制代码 break break 语句。它用于跳出 switch() 语句，来阻止代码自动地向下一个 case 运行

default 关键词来规定匹配不存在时做的事情

第五章 for循环 while后循环 do while前循环 for循环 for () {}循环 for (初始值; 判断条件; 步幅) { code // 执行代码 }

for (let i = 0; i < 5; i++) { // i初始值为0；i是否小于5；每次循环后i加1 console.log(i) // 0 1 2 3 4 } 复制代码 continue 跳过本次循环 for (let i = 0; i < 5; i++) { // i初始值为0；i是否小于5；每次循环后i加1 if (i === 3) { continue } // 因为在i为3的时候跳过了此次循环，所有3没有被打印出来 console.log(i) // 0 1 2 4 } 复制代码 break的运用 for (let i = 0; i < 5; i++) { // i初始值为0；i是否小于5；每次循环后i加1 if (i === 3) { console.log(i) // 3 break // 跳出中止循环, 提升性能 } } 复制代码变量自增/自减 i++ 和 i-- 先赋值后自增或者自减 let a = 20; let b = a++ // 先把a的值赋值给b, 然后在自增1 console.log(b) // 20 console.log(a) // 21 复制代码 ++i 和 --i 先自增或者自减后赋值 let a = 20; let b = ++a // a的值先自增1, 在赋值给b console.log(b) // 21 console.log(a) // 21 复制代码 while 后循环 do while前循环 while后循环 while (条件) { code // 这里写要执行的代码，条件满足不断执行 } // 条件满足才会执行code代码复制代码 while前循环 do { code 1 // code 1会先执行一遍，然后在根据条件决定是否再执行code 1; } while (条件) { code // 这里写要执行的代码，条件满足不断执行 } 复制代码第六章运算符类型转换算术运算加—————[+] 减—————[-] 乘—————[*] 除—————[ / ] 取模/取余—————[%] 复制代码隐式类型转换

在有字符串的时候,会进行字符串拼接

- / % 会尽力把不是数字的转化为数字复制代码 NaN ———— not a number(不是一个数字) 不是数字的数字类型（number类型） NaN和自己都不相等 isNaN( obj ) 判断是否为NaN,是返回true,否返回false; 复制代码显示类型转化转数字

Number() 可以用于任何数据类型转换成数值 parseInt()、parseFloat():专门用于把字符串转换成数值都是忽略前导的空格

Number() 能把字符串转化为数字。如果字符串是空的（不包含任何字符），则将其转换为0 如果带非数字的字符串,返回NaN。 undefined,返回NaN。 true和false将分别转换为1和0。 null值，返回0。 var a = Number( '-100.02' ); console.log( a ); // -100.02 var a = Number( '100px' ); console.log( a ); // NaN var a = Number( '' ); console.log( a ); // 0 var a = Number( undefined ); console.log( a ); // NaN var a = Number( true ); console.log( a ); // 1 var a = Number( null ); console.log( a ); // 0
parseInt() （取整）取非数字整前的数字，或小数点前的数字
parseFloat() 能取得小数，第二个小数点前的数字复制代码转字符串

String( obj ); obj.toString(); 复制代码赋值运算 = += -= *= /= %= ++ -- 复制代码比较运算 <————–小于

————-大于 = = ————- 等于 <= ————-小于等于 = ————- 大于等于 != ————- 不等于 = = =————- 全等，除了值的判断，还会进行unicode 编码的对比 !==————-不全等返回boolean值复制代码逻辑运算 || ———— 逻辑或 && ———— 逻辑与

赋值操作 let c = a || b // 如果a为true,则用a赋值, 如何a为false,则用b赋值

let c = a && b // 如果a为true,则通过，用 b 赋值,如果a为false,用 a 赋值

布尔值操作 if (a || b) { //如果a为true,则为true //如果a为false,则看b }

if (a && b) { //如果a为true,则通过，看b,b为true则为true //如果a为false,则false }

取反 if (!obj) { // 首先会把obj转化为布尔值，如果 obj是true,则!obj为false } 复制代码运算符优先级 JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。

下图按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值

第七章函数[自执行] [传参] [return] getComputedStyle() 函数自执行函数自执行方式,即创建立即调用一次

函数后面加用小括号,然后在用小括号包起来 (function(){}()) // 函数后面加用小括号,然后在用小括号包起来复制代码函数用小括号包起来,然后后面加小括号 (function(){})() // 函数用小括号包起来,然后后面加小括号复制代码函数后面加小括号,然后在函数前面加 + - ~ ！其中的一个符号 +function(){}() -function(){}() !function(){}() ~function(){}() 复制代码函数传参对应传参形参:即形式参数，是用来接收函数调用时传递过来的数据，命名与变量一致

实参:即真实参数，是给形参传递的具体数据，任何数据类型都可以称为实参

function fn(a, b) { // a,b为形参，且a 为 20，b为10，一一对应 console.log(a) // 20 console.log(b) // 10 console.log(a + b) // 30 } fn(20, 10) // 20,10为实参复制代码不定参 arguments 不定参：实参个数不确定 arguments: 是所有实参的集合，arguments是一个类数组，arguments.length 可以返回实参个数

function fn() { console.log(arguments) // 返回一个包含实参的类数组 } fn(20, 10, 5) // 20, 10, 5为实参复制代码关于什么是类数组,请看以后的章节

函数中的return 函数中默认return的返回值为undefined function fn(a, b) { a + b } let a = fn(10, 20) console.log(a) // undefined, 函数如果没有指定返回值,默认返回undefined 复制代码自定义返回值有时候我们需要函数中返回我们需要的值，这个时候return很有用

function fn(a, b) { return a + b } let a = fn(10, 20) console.log(a) // 30 复制代码 return 返回的数据类型可以是任意类型

function fn(a, b) { a +b return function () { alert('ok') } } let a = fn(10, 20) a() // 此时a就是返回的函数, a()打开了一个系统弹窗复制代码 return 然后的代码不再执行，整个函数结束

function fn(a, b) { a +b return function () { alert('ok') } console.log('我不会被打印出来,因为上面有return') } fn() 复制代码 getComputedStyle() getComputedStyle(obj,null)[cssStyle]获取计算后的样式对象,只读

dummy

复制代码不要获取复合样式:如background

不要获取未设置的样式: 谷歌是具体宽度, ie是auto

兼容：ie8及以下 obj.currentStyle[cssStyle]

if (window.getComputedStyle) { return getComputedStyle(obj)[attr] } else { return obj.currentStyle[attr] } 复制代码第八章作用域 js预解析闭包作用域脚本的有效范围，作用范围。分两大类：全局(script)和局部（function ）

全局(script)域直接定义在script标签下的变量及函数，他们都作用在一个域，全局作用域，so..

复制代码直接定义在script标签下的变量称之为全局变量,script标签下的函数，称之为全局函数

全局变量及函数都是window的一个属性,都能通过window.变量名访问

局部（function ）域任何一个function(){},都会开启一个局部作用域

定义在function(){} 内部的变量称之为局部变量

作用域链：局部作用域内部可以访问父级作用域变量及全局作用域变量，也可以访问父级的函数，及全局函数 ( 往上爬)

let a = 10 function fn() { console.loa(a) // 10 } 复制代码局部变量会覆盖父级（全局）变量，函数亦如此

let a = 10 function fn() { let a = 20 console.loa(a) // 20 } 复制代码 javascript解析 javascript解析即读取代码过程

javascript解析是致上而下预解析:正式解析前的工作，预解析过程会出现变量提升，函数提升 function () { console.log(a) // undefined var a = 10 } 复制代码变量提升在作用域内声明的变量会被提升到作用域的顶部，且对其赋值undefined,这个过程称之为变量提升

上面的列子解析过程为 function() { var a = undefined console.log(a) // undefined var a = 10 } 复制代码函数提升在作用域内的函数定义函数会被提升到作用域的顶部，其值为其函数本身,这个过程称之为函数提升

function () { console.log(fn) // function fn () {} function fn () {} } 复制代码 var和函数重名函数优先，留下函数，函数和函数重名后面定义的覆盖前面的-后来居高 console.log(a) // function a() { console.log(a2) } var a = 10 function a() { console.log(a1) } function a() { console.log(a2) } a() // 报错 console.log(a) // 10 复制代码不会提升的函数：在作用域内的函数表达式函数不会被提升到作用域的顶部，so ~ function () { console.log(fn) // undefined var fn = function () {} } 复制代码闭包 js垃圾回收机制 js 中的变量函数不再使用后，会被自动js垃圾回收机制回收复制代码形成闭包条件条件一：函数内部嵌套函数条件二：内部函数引用外部函数的变量参数使用 return 返回了此内部函数,上面的变量和参数不会被回收

例如: function fn(x) { var a = 5; function bibao() { var b = a + x console.log(x) // 20 console.log(a) // 5 console.log(b) // 25 } return bibao } var c = fn(20) console.log(c()) // 20 5 25 复制代码第九章字符串方法和数组 String 字符串 String即文本（字符串），字符串方法都不改原字符串；

创建字符串的三种办法: new String(), String(), 直接量，三种方式创建出来可以创建

var str = new String('hello')

var str = String('hello')

var str = 'hello' // 直接量复制代码 string.length 属性可以返回字符串长度

string[index] 通过下标获取字符串

String方法 str.concat( str,str...) 字符串拼接用于把一个或多个字符串连接到一块，返回拼接好的字符串复制代码 str.indexOf(value,index )查找字符串，返回查找字符串首次出现的位置; 方法对大小写敏感！ value 匹配字符 index 开始检索的位置, 合法值是 0 到 string.length - 1,默认0 匹配失败返回-1 复制代码 str.charAt(index ) 返回指定索引的字符串 var str = 'hello' console.log(str.charAt(3)) // l 复制代码 str.charCodeAt(index )返回指定索引的ASCII编码 str.substring(start,end ) 截取字符串，从start 开始，截止到end前，不包含end 如果没有end则从num开始整个查找如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。str.substring(1,4) 复制代码 str.slice(start,end ) 截取字符串，从start 开始，截止到end前，不包含end str.toLocaleUpperCase()/ str.toLocaleLowerCase() str.toLocaleUpperCase() 把字符串转换为大写。 str.toLocaleLowerCase() 把字符串转换为小写。复制代码 str.replace( value/RegExp,new ) 用一些字符替换另一些字符,new可以是字符串，也可以是函数 str.split(value/RegExp,length-1) 方法用于把一个字符串分割成字符串数组, 返回分割后的数组 str.search( value/RegExp )返回检索字符串首次出现的位置;未找到返回-1 str.match( value/RegExp )``查找指定的值，返回匹配的值。未找到返回null.正则可以找一个或多个表达式更多字符串方法请见developer.mozilla.org/zh-CN/

Array 数组创建数组的三种办法: new Array(), Array(), [] ，三种方式创建出来都是一样的

var arr = new Array()

var arr = Array()

var arr = [] // 直接量复制代码 arr.length可以访问数组的长度创建即指定数组长度Array( length )及 new Array( length ),length是数字的时候，创建的并不是数组的项，而是数组的长度，项的内容为undefined [] 通过数组索引，访问值 var arr = [1, 2, 3, 4, 5] arr[0] // 1 复制代码修改数组指定索引下的值 var arr = [1, 2, 3, 4, 5] arr[0] = 8888 console.log(arr) // [8888, 2, 3, 4, 5] 复制代码在数组后面添加项 var arr = [1, 2, 3, 4, 5] arr.length = 8888 console.log(arr) // [1, 2, 3, 4, 5, 8888] 复制代码 arr.indexOf( item ) 查找项数组去重利用for循环给数组去除重复项

var arr = [1,2,3,4,5,6,5,4,3,2,1]; var arr2 = [] for (let i = 0; i < arr.length; i++) { if (arr2.indexOf(arr[i] == -1)) { arr2.push(arr[i]) } } console.log(arr2) // [1, 2, 3, 4, 5, 6] 复制代码 Array() 数组方法 arr.unshift( item1,item1,…. ) 向数组的头部添加一个或更多元素，并返回（新的长度）。 arr.push( item1,item1,…. ) 向数组的尾部添加一个或更多元素，并返回（新的长度）。 arr.shift( ) 删除数组的第一个元素（返回删除对象）;。 arr.pop( ) 删除数组的最后一个元素（返回删除对象）。 arr.splice(index,howmany,item1,…..,itemX) （删除/添加）元素，然后（只返回删除对象）。 index 必需。整数，规定添加/删除项目的索引，可以使用负数,如果是添加，原有元素会往高位移动。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX可选。向数组添加的新项目。复制代码 arr.sort() 排序默认arr.sort() 以首字符编码大小排序数组length小于10以冒泡排序冒泡排序下依次比较， return > 0 调换位置，= 0不调换位置，< 0 不调换位置数组length大于10以二分排序复制代码 arr.reverse() 反转数组以上方法不创建新的数组，而是直接修改原有的数组,同时索引会变化

以下方法会创建出一个新的数组, 而不是直接修改原数组

arr.concat() 数组拼接该数组是通过把所有 arrX 参数添加到 arr 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组 ——不修改原数组复制代码 arr.slice() 截取 arr.slice(start,end)方法从已有的数组中返回选定的元素复制代码 arr.join() 拼接成字符串 Array.isArray( ) 判断是不是数组 ECMAscript5 的遍历数组方法以下下方法都能实现遍历，语法也都一样，只是返回值不一样—————————————不修改原数组 array.xxxx( function(currentValue,index,arr ), thisValue ) 参数描述 currentValue ———————必须。当前元素的值 index ——————————–可选。当期元素的索引值 arr————————————可选。当期元素属于的数组对象 thisValue ————————–可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，”this” 的值为 “undefined”

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数复制代码 forEach() arr.forEach() 从头至尾遍历数组 ——————————————————————————–无返回值复制代码 map() 返回值数组 arr.map() 返回一个数组，包含函数所有返回值—————————————————————-返回数组 var arr = [1, 2, 3, 4] var newArr = arr.map(function(x){ return x * x }) console.log(newArr) // [1, 4, 9, 16] 复制代码 filter() true数组 arr.filter() 返回值是一个 return 值为true或能转化为true的值——————————————–返回数组 var arr = [1, 2, 3, 4] var newArr = arr.filter(item => { return item > 3 }) console.log(newArr) // [4] 复制代码 every() arr.every() 针对所有元素，即都为true 则返回true———————————————————————————–返回值 var arr = [1,2,3,4]; var newArr = arr.every(item => {return item < 5}); console.log(newArr) // true, 因为数组的每一项都小于5

var obj = {} // 直接量 var obj = new Object() var obj = Object.create() 复制代码访问JSON的值 obj.attribute 和 obj[attribute]

var obj = { age: 20, name: '番茄炒蛋', sex: '男' } console.log(obj.age) // 20 console.log(obj[age]) // 20 复制代码修改JSON的属性值 var obj = { name: '番茄炒蛋' } obj.name = '只会番茄炒蛋' 复制代码添加JSON属性 var obj = { name: '番茄炒蛋' } obj.age = 20 复制代码删除JSON属性 var obj = { name: '番茄炒蛋', age: 20 } delete obj.name 或者 delete obj[name] 复制代码 JSON数字属性 var obj = { name: '番茄炒蛋', age: 20 } obj[1] = 'hello' obj[2] = 'word' 复制代码 in 判断对象是否存在某个属性 var obj = { name: '番茄炒蛋', age: 20 } console.log('age' in obj) // true 复制代码 for in遍历json for in 遍历JSON var obj = { name: '番茄炒蛋', age: 20 } for (let attr in obj) { //attr 为属性，attr不是必须的，可以为任意变量名 console.log(attr) // 属性名 name age console.log(obj[attr]) // 对应的属性值 '番茄炒蛋' 20 } 复制代码 for in 也可以遍历数组 var arr = [1, 2, 3, 4]

for (let attr in arr) { //attr 为属性，attr不是必须的，可以为任意变量名 console.log(attr) // 下标 console.log(obj[attr]) // 对应下标的值 1 2 3 4 } 复制代码 for循环不能遍历JSON

JSON对象仿jQuery 链式操作 css html function $(option) { var t = typeOf option if (t == 'function') { window.onload = option } else if (t.toLowerCase() == 'string') { var ele = option.subString(1, option.length) el = document.getElementById(ele) } var obj = { css: function (attr, val) { el.style[attr] = val return obj; }, html: function (val) { el.innerHTML = val return obj } } return obj }$ ('#box').css('backgroundColor','red').html('hello'); 复制代码 JSON.parse() 对象化 / JSON.stringify() 对象字符化 JSON.parse() JSON.parse(obj )方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。 var obj = '{ "name": "只会番茄炒蛋", "age": 10, "sex": "男" }'

JSON.parse(obj) // 解析后的值为: obj = { name: "只会番茄炒蛋", age: 10, sex: "男" } 复制代码 JSON.stringify() JSON.stringify( obj )与JSON.parse()进行的是反操作 JSON.stringify({}); // '{}' JSON.stringify(true); // 'true' JSON.stringify("foo"); // '"foo"' JSON.stringify([1, "false", false]); // '[1,"false",false]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify({x: 5, y: 6}); // "{"x":5,"y":6}" 复制代码 Function call() applay() bind()方法 call()和apply都用于函数调用 function fn () { console.log(this) } fn() // window fn.call('hello') // String {"hello"} fn.call(123) // Number {123} 复制代码区别

call( thisvalue, val1，val2，….)

// thisvalue 是函数内部this的值 // 后面是参数列表复制代码 apply( thisvalue, [val1，val2，….])

// thisvalue 是函数内部this的值 // 后面是参数数组，所有参数放数组里面复制代码 bind()都用于创建中

适用于匿名函数 var fn = function (a, b) { console.log(this, a, b) }.bind('hello', 1, 2) fn() // String {"hello"} 1 2

2)有名函数,有些特殊 function fn() { console.log(this) } fn.bind('hello')() // String {"hello"}

3)自执行函数 (function fn() { console.log(this) }.bind('hello')()) // String {"hello"}

(function fn() { console.log(this) }.bind('hello'))() // String {"hello"}

(function fn() { console.log(this) }).bind('hello')() // String {"hello"} 复制代码第十一章定时器 Math函数定时器 setInterval() setInterval(function(){}, 1000) 多用于动画

第一个参数是一个函数

第二个参数是事件, 表示1秒(1000毫秒)后调用一次, 然后每个1秒调用执行一次第一个函数里面的内容

一般使用 var a = 0; setInterval(function () { a++; console.log(a) // 每隔一秒打印a 并且a在自增 }, 1000)

var a = 0; function fn() { a++; console.log(a) } setInterval(fn, 1000) // 和上面的写法数据一样

2)第一个参数fn 与 fn()的区别, fn()会不等延迟直接调用, 后面不在调用 var a = 0; function fn() { a++; console.log(a) } setInterval(fn(), 1000) // 1 打印1,然后就不在调用

带return值的fn var a = 0; function fn() { a++; console.log(a) return function(){console.log('ok')} } setInterval(fn(), 1000) // 1 打印1,然后就不在调用复制代码 clearInterval() 清除定时器 clearInterval(timerManger) 里面的参数是定时管理器 var timer = setInterval(function(){}, 1000) // 设置变量timer为定时管理器 clearInterval(timer) // 清除timer定时管理器复制代码 setTimeout() 一次定时器 setTimeout( function(){},1000 )

第一个参数是一个函数

第二参数是时间，表示1秒（1000毫秒）后调用一次，然后不再调用

var a = 0; setTimeout(function () { a++; console.log(a) // 1 只有一次打印 }) 复制代码 clearTimeout() 清除定时器 clearTimeout(timerManger) 里面的参数是定时管理器 var timer = clearTimeout(function(){}, 1000) // 设置变量timer为定时管理器 clearTimeout(timer) // 清除timer定时管理器复制代码 Math 数字函数 Math对象用于执行数学任务 Math对象无需new，直接调用Math方法就行

Math.random() 求随机值左闭右开区间 // 随机 0~1之间的数 var rand = Math.random() console.log(rand) // 0~1之间的数

// 随机 5~10之间的数 var rand = Math.random() *(10-5) + 5; console.log(rand) // 5~10之间的数

// 封装随机x至y之间的数 function random(x, y) { var rand = x + Math.random() * (y - x) return rand } 复制代码 Math.round()————四舍五入 var num = 12.6 Math.round(num) // 13

var num = 12.3 Math.round(num) // 12 复制代码 Math.ceil() ————向上取整 (上舍入) Math.floor()————向下取整 (下舍入) Math.abs()—————求绝对值 Math.pow(x,y)———–x的y次幂（x的y次方） Math.sqrt(x) —————返回数的平方根 Math.max(x,y,z...)——-求x和y的最大值 Math.min(x,y,z...)——-求x和y的最小值 Math方法二 “度”的定义是，“两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。（如图1）弧度的定义是：两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度。

角所对的弧长是半径的几倍，那么角的大小就是几弧度。它们的关系可用下式表示和计算：

( 弧度 )＝弧长 / 半径

圆的周长是半径的 2π倍，所以一个周角（360度）是 2π弧度。

度跟弧度之间的换算据上所述，一个平角是 π 弧度。即 180度＝π弧度由此可知：弧度＝π/180度 ( ≈0.017453弧度 ) 复制代码 Math.sin（弧度）正弦对边比斜边一个以弧度表示的角 Math.cos（弧度）余弦邻边比斜边是 -1.0 到 1.0 之间的数 Math.PI Math.PI 即π 是圆的周长和它的直径之比。这个值近似为 3.141592653589793 一弧度 = π/180；将角度乘以（2PI/360） 0.017453293 即可转换为弧度复制代码第十二章日期对象Date 日期 new Date() 本地时间 var d = new Date() console.log(d) // Mon Sep 16 2019 15:48:31 GMT+0800 (中国标准时间) 复制代码 toUTCString() 当前世界时 toUTCString() 根据世界时，把 Date 对象转换为字符串。

var d = new Date(); var utc = d.toUTCString() console.log(ytc) // "Mon, 16 Sep 2019 07:48:31 GMT" 复制代码获取具体时间 getFullYear() // 年 getMonth() // 月( 0 ~ 11 ) getDate() // 天( 1 ~ 31 ) getDay() // 星期( 0 ~ 6 ) getHours() // 时 getMinutes() // 分 getSeconds() // 秒 getMilliseconds() // 毫秒 getTime() // 返回 1970 年 1 月 1 日至今的毫秒数复制代码日期格式化 var date = new Date()

date.toLocaleString() ——————–按照本地时间输出 date.toLocaleDateString() —————本地时间年月日 date.toLocaleTimeString() ————–本地时间时分秒 date.toTimeString()————————本地时分秒时区 date.UTC() ————————————世界时返回 1970 年 1 月 1 日到指定日期的毫秒数更多方法参考www.w3school.com.cn/tags/html_r…

第十四章动画运动 requestAnimationFrame()

当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。现在又多了一种实现动画的方案，那就是window.requestAnimationFrame()方法。

基本使用方式 var num = 0; function fn() { num++; document.title = num; requestAnimationFrame(fn) //在内部根据用户浏览器(电脑性能)情况,重复调用 fn } fn() // 页面不断变化,数字自增复制代码 cancelRequestAnimationFrame( timer ) 添加manager定时管理器 var num = 0; var timer; function fn() { num++; document.title = num; timer = requestAnimationFrame(fn) //在内部根据用户浏览器(电脑性能)情况,重复调用 fn if (num == 250) { cancelAnimationFrame( timer ); // 清除停止运动 } } fn() // 页面不断变化,数字自增复制代码把 requestAnimationFrame(fn) 赋值给 timer，timer 就是定时管理器

RequestAnimationFrame( )兼容 // RequestAnimationFrame的兼容 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (fn){ setTimeout(fn,1000/60) }

// cancelAnimationFrame 兼容 window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCanceltAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || clearTimeout; 复制代码速度版运动框架

dummy

复制代码时间版运动框架

dummy

复制代码时间加速版运动框架加速度

例：假如两辆汽车开始静止，均匀地加速后，达到10m/s的速度，A车花了10s，而B车只用了5s。它们的速度都从0变为10m/s，速度改变了10m/s。所以它们的速度变化量是一样的。但是很明显，B车变化得更快一些。我们用加速度来描述这个现象：B车的加速度（a=Δv/Δt，其中的Δv是速度变化量）>A车的加速度。显然，当速度变化量一样的时候，花时间较少的B车，加速度更大。也就是说B车的启动性能相对A车好一些。因此，加速度是表示物体速度变化快慢的物理量。

S是距离，Vf终速度，t是加速的时间。Vf=at，a是加速度，替换可得这是匀加速运动距离的通常表达式

move(Obox, 'left', '800px', 1500); // 调用move函数,指定传递实参 fucntion move(obj,attr,target,tar_t) { // 指定接受形参 target = parseFloat(target); // 转化为number
var init = parseFloat( getStyle(obj,attr)); // 获取初始样式值 var init_time = new Date(); // 获取开始时间 var sty_v; var a = 2 * (target-init) / Math.pow(tar_t,8); // 获取加速度 (function requ() { var cur_t = new Date()- init_time; // 获取动画时长 if( cur_t >= tar_t ){//动画执行时长与动画预设总时间比值大于等于1时, cur_t = tar_t; } else { window.requestAnimationFrame(rQAF); } sty_v = a * Math.pow(cur_t,8) / 2;//根据时间比例获取运动路程比例 obj.style[attr] = init+ sty_v + 'px';//设置样式 })() }

//定义获取样式函数 function getStyle(ele, attr) { // 处理好兼容 return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr]; } 复制代码多值时间版运动框架 move(obox, { width: '200px', height: '200px', left: '800px', opacity: 1 }, 2000, function(){console.log('已经达到目标值')}) // 调用move函数,指定传递实参

//定义获取样式函数 function getStyle(ele, attr) { // 处理好兼容 return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr]; } 复制代码原生的动画运动大致就以上这几种, 如果自己能力强的话建议自己搞一个库出来, 没有这个时间或者懒得弄的话, github上一堆成熟的库供你使用。

第十五章 DOM文档对象模型 DOM(Document Object Model) 文档树对象模型

节点属性 childNodes \ children Ele.childNodes ————————–子节点集合元素.childNodes : 只读属性子节点列表集合标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点 childNodes 只包含一级子节点，不包含后辈孙级

ele.children————————– 获取第一级子元素 nodeType : 只读属性当前元素的节点类型共12种元素节点属性节点: wrap.attributes[0].nodeType 文本节点 nodeName 节点名称

元素节点属性 ele.tagName 元素标签名称有关属性节点操作: 获取： obj.getAttributeNode() 方法获取指定的属性节点。创建： document.createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。添加： obj.setAttributeNode() 方法向元素中添加指定的属性节点。复制代码 firstChild \ firstElementChild 第一个子节点 ele.firstChild : 只读属性标准下：firstChild会包含文本类型的节点非标准下：只包含元素节点

ele.firstElementChild : 只读属性标准下获取第一个元素类型的子节点非标准下：无复制代码 lastChild \ lastElementChild —————————————————最后一个子节点兼容性同上复制代码 nextSibling \ nextElementSibling ——————————————下一个兄弟节点兼容性同上复制代码 previousSibling \ previousElementSibling ——————————-上一个兄弟节点兼容性同上复制代码 parentNode———————————————————————获取父节点 offsetParent ——————————————————————最近定位父级 childElementCount ———————————————————子元素节点个数元素类型子节点数量，等同于 children.length 复制代码创建节点 document.createElement('') 创建元素节点 innerHTML += 添加元素的问题，原本子元素没有了，不是原本的元素了复制代码 document.createTextNode(str) 创建文本节点 element.cloneNode() 参数true克隆元素及后代不会克隆属性及事件，false克隆本元素元素节点操作 parent.insertBefore(new, node) 在已有元素前插入插入子元素 ,在指定的子元素前面插入复制代码 parent.appendChild(new) 在已有元素后插入插入插入子元素，在指定的子元素前面插入例子：留言板插入内容复制代码 parent.removeChild(节点)删除一个节点删除DOM元素复制代码 parent.replaceChild(new, old)替换节点换元素复制代码 CSSOM视图模式(CSS Object Model View) 文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动

Window视图属性 innerWidth/innerHeight window.innerWidth window窗口的内部宽度，不包括用户界面元素，比如窗框 window.innerHeight内部高度复制代码 Document文档视图 document.documentElement.clientWidth document.documentElement.clientWidth==>浏览器窗口可视宽度 document.documentElement.clientHeight==>浏览器窗口可视高度 ====》可获取文档没有内容时候高度没有定义W3C的标准，则 IE为： document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 复制代码元素视图属性 clientWidth/ clientHeight 可视宽高 clientWidth对象的——————–width + padding clientHeight 对象的——————height + padding ==> 不包含子元素（一致）复制代码 offsetWidth/ offsetHeight 可视宽高 offsetHeight:对象height + padding + border offsetWidth: 对象width + padding + border ==> 不包含子元素（一致）复制代码 scrollWidth/ scrollHeight 可视宽高 scrollWidth对象的width + padding scrollHeight应该等用于scrollTop + clientHeight 如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight scrollHeight对象的height + padding ==> 包含子元素内容,子元素定位,overflow:hidden`（一致）复制代码 offsetParent 定位父级获取元素最近的定位父级如果没有定位父级则参考body（元素必须是定位元素）复制代码 offsetTop/offsetLeft offsetLeft:获取对象相对于offsetParent(left)位置 offsetTop:获取对象相对于offsetParent(top)位置复制代码 scrollTop/scrollLeft 滚动宽,滚动高可读可写，有内容溢出元素才有效果 ele.scrollTop 元素Y轴滚动的距离 ele.scrollLeft 元素X轴滚动的距离设置时不能给px 单位，否则会出错！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ document.getElementsByTagName("body")[0].scrollTop = 100; 复制代码 document.body.scrollTop/ scrollLeft 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft IE, firfox：document.documentElement.scrollTop ! ! ! ! ! ! ! ! ! ! ! ! ! ! 复制代码元素方法 getBoundingClientRect(): getBoundingClientRect():得到矩形元素的界线，返回的是一个对象，包含 top, left, right, bottom四个属性值，大小都是相对于浏览器窗口top,left 的距离。返回内容类似于： { top: 143, right: 1196, bottom: 164, left: 889} 复制代码 scrollIntoView(): ele.scrollIntoView() 让元素滚动到可视区域（HTML5标准),参数 true 与浏览器对齐，false元素在窗口居中显示复制代码 event.clientX/event.clientY 相对于window，为鼠标相对于浏览器窗口的偏移 event.clientX 鼠标在文档的水平座标 event.clientY 鼠标在文档的垂直座标复制代码 BOM对象浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

Window 对象它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。 HTML DOM 的 document 也是 window 对象的属性之一 window.document.getElementById("header"); 复制代码 Window 对象属性 document Document 对象 location 浏览器地址信息 Location 对象属性: 对象属性描述 window.location.href 设置或返回完整的 URL。 window.location.search 设置或返回 url?,?+后面的内容。 window.location. hash 设置或返回 url#后面的内容 window.location.port 设置或返回当前 URL 的端口号。 window.location.hostname 设置或返回当前 URL 的主机名。 window.location.host 设置或返回主机名和当前 URL 的端口号 window.location.pathname 设置或返回当前 URL 的路径部分 window.location.protocol 设置或返回当前 URL 的协议复制代码 history 历史记录 History 对象包含用户（在浏览器窗口中）访问过的 URL。

属性 length 返回浏览器历史列表中的 URL 数量。方法 back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。下面一行代码执行的操作与单击两次后退按钮执行的操作一样： history.go(-2) 复制代码 Navigator 对 Navigator 对象的只读引用 window.navigator.userAgent 浏览器信息复制代码 Window 对象方法 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 window.open(url,target) open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口 window.open('www.baidu.com', '_self'); var opener = window.open();//返回值返回的新开页面的window对象 opener.document.body.style.background = 'red'; window.close() opener.close();//可以通过关闭用window.open方法打开的窗口复制代码 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。 document.onclick = function(){ window.scrollTo(0,500); } 复制代码 scrollBy() scrollBy(xnum,ynum) 指定的像素值来滚动内容。不带px xnum 必需。把文档向右滚动的像素数。 ynum 必需。把文档向下滚动的像素数。 document.onclick = function(){ window.scrollTo(0,500); } 复制代码 alert( 内容 ) 警告框 alert( 内容 )警告框经常用于弹出警告信息，无返回值复制代码 confirm(“文本”) 确认框 confirm(“文本”)确认框用于使用户可以验证或者接受某些信息。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。复制代码 prompt(“文本”,”默认值”) prompt(“提示”,”默认值”)提示框经常用于提示用户在进入页面前输入某个值。如果用户点击确认，那么返回输入的值。如果用户点击取消，那么返回值为 null。 function disp_prompt(){ var name=prompt("请输入您的名字","Bill") if (name!=null && name!=""){ document.write("你好！" + name + " 今天过得怎么样？") } } 复制代码 window对象常用事件 onload 文档加载完毕 onscroll 滚动的时候 onresize 调整尺寸的时候第十六章 event对象阻止冒泡注册/ 移除监听事件事件event对象 Event对象用来获取事件的详细信息：鼠标位置、键盘按键

兼容

标准下 : 事件对象是通过事件函数的第一个参数传入如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象 ie: event是一个内置全局对象

var obj.onclick = function (ev) { var ev = ev || window.event; }

Event对象的兼容：ev = ev || window.event; Event对象下的获取鼠标位置：e.clientX || e.clientY 复制代码事件冒泡事件冒泡指子元素触发事件的时候，会冒泡（触发）父级的相同的事件

阻止冒泡: 非标准：ev.stopPopagation(); 非标准：ev.cancelBubble = true; 复制代码注册处理事件标准：obj.addEventListener(事件名称，事件函数，是否捕获); 是否捕获 false冒泡 true捕获先捕获后冒泡有捕获事件名称没有on 事件执行的顺序是正序 this触发该事件的对象复制代码低版ie：obj.attachEvent(事件名称，事件函数); 没有捕获事件名称有on 事件函数执行的顺序：标准ie-》正序非标准ie-》倒序 this指向window 复制代码移除 obj.removeEventListener(事件名称，事件函数) 移除 object.detachEvent(事件名称,function); 拖拽 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起默认事件右键菜单 : oncontextmenu

解决：文字选中再的问题标准：解决办法 return false (阻止默认事件) 非标准ie：全局捕获 onselectstart = "return false"` 处理文字选中 ondragstart = "return false" 处理图片拖动复制代码标准下阻止默认事件，可以拖拽图片啦

鼠标滚轮事件 Ie/chrome: onmousewheel event.wheelDelta 上：120 下：-120 firefox : DOMMouseScroll 必须用addEventListener()添加

fire: event.detail 上：-3 下：3 滚轮属性：event.wheelDelta \ event.detail 复制代码兼容

obj.onmousewheel = handle; // 兼容ie chrome obj.addEventListener ? obj.addEventListener('DOMMouseScroll', handle,boolean) : false; // 兼容firefox

// 滚动函数event对象处理 function handle(e){ e = e || window.event; e.wheel = e.wheelDelta ? e.wheelDelta : -e.detail * 40; } 复制代码阻止默认事件：

标准：event.preventDefault() 非标准：event.returnValue = false;

return false阻止的是 obj.on事件名称=fn 所触发的默认行为 addEventListener绑定的事件需要通过event下面的event.preventDefault(); detachEvent绑定的事件需要通过event下面的event.returnValue = false; 鼠标滚轮与自定义滚动条结合复制代码全兼容添加/删除事件封装 function addEvent(obj, type, fn, boolean){ boolean = boolean || false; // 处理捕获冒泡 obj[type + fn.name] = handle;//添加方法 obj.addEventListener ? obj.addEventListener(type, obj[type+fn.name], boolean) : obj.attachEvent('on'+type,obj[type+fn.name]); // 滚轮事件 if(type == 'mousewheel'){ // obj['on'+type]= handle; // chrome 及ie //兼容火狐 obj.addEventListener ? obj.addEventListener('DOMMouseScroll', obj[type+fn.name], boolean) : ''; } // 处理event对象 function handle(e){ e = e|| window.event; e.wheel = e.wheelDelta?e.wheelDelta:e.detail*(-40); // 处理滚轮方向 fn.call(obj,e); e.preventDefault ? e.preventDefault() : e.returnValue = false; } }

function removeEvent(obj,type,fn,boolean){ boolean = boolean || false; // 处理捕获冒泡 obj.removeEventListener ? obj.removeEventListener(type, obj[type+fn.name], boolean) : obj.detachEvent('on'+type,obj[type+fn.name]); // 滚轮事件 if (type == 'mousewheel') { //兼容火狐 obj.removeEventListener ? obj.removeEventListener('DOMMouseScroll', obj[type+fn.name], boolean) : ''; } } 复制代码第十七章表单事件事件委托 onready封装键盘事件表单中的操作焦点事件

onfocus 获取焦点事件 input、textarea 以及 select 和 a 元素 onblur 获取焦点事件 input、textarea 以及 select 和 a 元素 onchange 内容改变触发 input、textarea 以及 select 元素 onsubmit 事件表单提交时间 onreset 事件重置表单 obj.focus() 给指定的元素设置焦点复制代码事件委托标准：e.target 指向事件触发对象

非标准：e.srcElement 指向事件触发对象

window.onready 文档的onreadystatechange 事件当文档的readyState 属性发生变化的时候触发 readyState 属性返回当前文档的状态（载入中……）。该属性返回以下值: uninitialized - 还未开始载入 loading - 载入中 interactive - 已加载，文档与用户可以开始交互 complete - 载入完成复制代码键盘事件不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件,document能够响应

keydown：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发（opera浏览器除外）。 keypress：用户按下一个按键，并产生一个字符时发生（也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。 keyup：用户释放某一个按键是触发。

event.keyCode : 数字类型键盘按键的值键值 ctrlKey,shiftKey,altKey 布尔值

当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false 复制代码第十八章 RegExp

什么是正则表达式正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式主要用来验证客户端的输入数据。可以节约大量的服务器端的系统资源，并且提供更好的用户体验。复制代码创建正则表达式直接量语法：Reg = /pattern/modifiers;

var Reg = /box/gi; 复制代码 new RegExp 语法 Reg = new RegExp( pattern , modifiers ); // pattern, modifiers此时是字符串 var Reg = new RegExp(“box”, ”gi”);

何种方法创建都是一样的 pattern 模式模板，要匹配的内容 modifiers 修饰符复制代码正则表达式用法及区别 String中正则表达式方法方法描述 match(Reg) 返回RegExp匹配的包含全部字符串的数组或null search(Reg) 返回RegExp匹配字符串首次出现的位置 replace(Reg，newStr) 用newStr替换RegExp匹配结果，并返回新字符串 split(Reg) 返回字符串按指定RegExp拆分的数组

例子: var str = 'hello'; var Reg = /e/i; str.match(Reg); 复制代码 RegExp对象的方法方法描述 exec（）在字符串中执行匹配搜索，返回首次匹配结果数组, test（）在字符串中测试模式匹配，返回true或false

例子: var pattern = new RegExp(“box”,”gi”); pattern.test(str); pattern.exec(str); 复制代码注意区别正则方法和字符串方法使用避免混淆

正则方法：pattern.test(str); 方法的主体是正则表达式字符串方法：str.match(pattern);方法的主体是字符串复制代码修饰符修饰符用于执行区分大小写和全局匹配:

i 忽略大小写匹配 g 全局匹配，默认只匹配第一个元素，就不在进行匹配 m 执行多行匹配例子: var patt = /pattern/i; //忽略大小写匹配 var patt = /pattern/g; //全局匹配 var patt = /pattern/m; //执行多行匹配复制代码 pattern 模式基本匹配 xxx ———————————匹配xxx字符 var Reg = /abc/;

x|y|z —————————-匹配x或y或z字符 var Reg = /abc|bac|cba/; 复制代码 [] [abc]———————————–匹配abc之中的任何一个字符

非 [^abc]———————————匹配非a非b非c字符的

到 [0-9] ———————————匹配0至9之间的数字 [a-z] ———————————匹配小写a至小写z的字符 [A-Z] ———————————匹配大写A至大写Z的字符 [\u4e00-\u9fa5]———匹配中文

还可以组合 var Reg = /hello [0-9a-zA-z]/; 复制代码元字符(转义字符) . —————————————–匹配单个字符，除了换行和行结束符 \w—————————————匹配单词字符,数字,(下划线) \W—————————————匹配非（单词字符和(下划线)） \d —————————————匹配数字 \D —————————————匹配非数字 \s —————————————匹配空白字符（空格） \S —————————————匹配非空格字符 \b —————————————匹配单词边界 ( 除了（字)字母数字_ 都算单词边界) \B —————————————匹配非单词边界 \n —————————————匹配换行符

特殊的转译字符. \ /

1.var reg = /./;//匹配. 2.var reg = /\/;//匹配
3.var reg = ///;//匹配/ 复制代码量词 n?———————————匹配0个或一个n的字符串 n*———————————匹配0个或多个字符串(任意个) n+———————————匹配至少一个n字符串 n{X}——————————匹配包含X个n的序列的字符串 n{X,Y}————————–匹配包含至少X或至多Y个n的序列的字符串 n{x,}—————————-匹配至少X个n的序列字符串

^n———————————匹配以n开头的字符串 n$———————————匹配以n结尾的字符串复制代码贪婪惰性贪婪: 尽可能多的匹配惰性: 尽可能少的匹配前提条件都是要匹配到内容

—— 贪婪 —— —— 惰性 ——

```
          +?
```

? ??

```
          *?
```

{n} {n}? {n,m} {n,m}? {n,} {n,}?

复制代码子组(子表达式) 子组:使用()小括号,指定一个子表达式后,称之为分组捕获型非捕获型复制代码捕获型 1.var str = 'abcdefg'; 2.var reg = /(abc)d/;//匹配abcd 3.var val = reg.exec( str); 4.console.log( val ); //["abcd", "abc", index: 0, input: "abcdefg"]

索引0 为匹配的结果索引1 为第一个子表达式匹配结果 index :首次匹配成功的索引值， input: 匹配目标

—— 字符 —— 引用 (pattern) 匹配pattern并捕获结果，自动设置组号,是从1开始的正整数 \num 引用是值的引用，匹配结果的引用不是匹配形式引用复制代码非捕获型 (？:pattern) (?=pattern) 零宽度正向预言 1.Windows (?=2000) //匹配windows且后面跟2000 匹配 “Windows2000” 中的 “Windows” 不匹配 “Windows3.1” 中的 “Windows”。

(?!pattern) 零宽度负向预言

Windows (?!2000)//匹配windows且后面非2000 匹配 “Windows3.1” 中的 “Windows” 不匹配 “Windows2000” 中的 “Windows”。复制代码说实话正则我搞的很头大, 一般都是用到什么网上去搜, 自己写还要去看笔记...

第十八章 cookie cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据

1.不同的浏览器存放的cookie位置不一样，也是不能通用的 2.cookie的存储是以域名形式进行区分的 3.cookie的数据可以设置名字的 4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样 5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样复制代码访问cookie 要在服务器环境下我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来 console.log( document.cookie ); 复制代码存储cookie document.cookie = '数据名=值'; 复制代码设置cookie过期时间 cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁, 如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间

过期时间必须是一个日期对象转换成的字符串（时间戳.toGMTString()） document.cookie = ‘数据名=值; expires=过期时间’;

例如: var oDate = new Date(); oDate.setDate( oDate.getDate() + 5); oDate.toGMTString();//转换为日期字符串 document.cookie='age=20; expires='+oDate; 复制代码 cookie封装 // 设置cookie封装 function setCookie(obj, time) { for (key in obj) { var d = new Date(); d.setDate( d.getDate() + time ); document.cookie = key + '=' + obj[key] +'; expires = ' + d.toUTCString(); } } setCookie({ name:'hello', sex:'man', love:'逛街', }, 5)

// 获取cookie封装 function getCookie() { var cookie = document.cookie; var result = {}; for(key in arguments){ var val = '\b'+arguments[key]+'=(\w*)+'; var reg =new RegExp(val,'i'); val = reg.exec(cookie); result[arguments[key]] = val? decodeURI(val[1]):null; } return result; } getCookie('age', 'name')

// 移除Cookie function removeCookie() { for(key in arguments){ var json ={}; json[arguments[key]]=null; setCookie(json,-1); } } removeCookie('name'); 复制代码第十九章脚本化HTTP Ajax Ajax概述 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。功能：在不刷新页面的情况下，实现与后台的数据交互

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 Ajax技术核心是XMLHttpRequest对象(简称XHR)

1 运行在服务器 2 不能跨域复制代码 XMLHttpRequest 对象方法创建XMLHttpRequest 对象创建 new XMLHttpRequest() ie 6以下版本new ActiveXObject('Msxml2.XMLHttp.3.0') 或 new ActiveXObject('Msxml2.XMLHTTP.6.0') 例如: new XMLHttpRequest() || new ActiveXObject('Msxml2.XMLHTTP.3.0')||new ActiveXObject('Msxml2.XMLHTTP.6.0'); 复制代码 Open(``method,url,asynch,[username],[password]) 指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method: http请求方法，一般使用”GET“,”POST“. url：请求的服务器的地址； asynch：是否采用异步方法，true为异步，false为同步；后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

// GET GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。 xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

注意: 特殊字符(eg:&等)，传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为utf-8格式即可。或者使用提交url通用方法。

// POST POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。 xhr.open(‘post’, ‘demo.php’, true); 而发送POST请求的数据，不会跟在URL的尾巴上，而是通过send()方法向服务器提交数据。 xhr.send(‘name=Lee&age=100’); 一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

例如: xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 复制代码 SetRequestHeader(String header,String Value)如果是POST方式，需要设置请求头设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用，一般在post方式中使用。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 复制代码 send(data) 向服务器发出请求，如果采用异步方式，该方法会立即返回。 content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。复制代码 Abort() 停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。复制代码 XMLHttpRequest对象属性 onreadystatechange 请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）。复制代码 readyState 表示XMLHttpRequest对象的状态： 0：未初始化。对象已创建，未调用open； 1：open方法成功调用，但Send方法未调用； 2：send方法已经调用，尚未开始接受数据； 3：正在接受数据。Http响应头信息已经接受，但尚未接收完成； 4：完成，即响应数据接受完成。复制代码 responseText | responseXML responseText 服务器响应的文本内容 responseXML 服务器响应的XML内容对应的DOM对象复制代码 Status 服务器返回的http状态码。 200表示“成功”， 404表示“未找到”， 500表示“服务器内部错误”等。

通过xhr.getResponseHeader(“Content-Type”);可以获取单个响应头信息 getAllResponseHeaders();获取整个响应头信息 console.log(xhr.getAllResponseHeaders()) 复制代码第二十章 Ajax封装跨域 jsonp Ajax封装 function ajax(obj) { var type = obj.type || 'GET' // 请求类型 url = obj.url // url处理 asyn = obj.asyn !== true // 异步处理 data = '' // 预设写入数据 dataType = obj.dataType || 'json' // 数据类型 success = obj.success, // 回调函数 error = obj.error; // 错误处理函数 for(key in obj.data){ // 数据处理 data += key+'='+obj.data[key]+'&'; } data = encodeURI(data); var xhr=new XMLHttpRequest(); if(window.XMLHttpRequest){ // 处理兼容 xhr = new XMLHttpRequest(); } else { try{ xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch(e) { xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0'); } } //如果是GET请求方式,设置数据 if(type.toUpperCase() == 'GET'){ var date = new Date().getTime();//添加一个时间用来处理，GET方式缓存的问题 url = url+'?'+data+date; data = null; } else if (dataType.toUpperCase() == 'XML') { data =null; } xhr.open(type,url,asny); // 请求架设 xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded'); // 设置请求头信息 xhr.send(data); // 发送数据 xhr.onreadystatechange= function(){ // 监听请求 // readyState 为XMLHttpRequest对象的状态 // status 为服务器返回的http状态码 if(xhr.readyState== 4 && xhr.status==200){ var response; if(dataType === 'json' || dataType === 'text'){ if(dataType === 'json'){ // 解析json数据 response = JSON.parse(xhr.responseText); } else { // 普通数据 response = xhr.responseText; } } else { response = xhr.responseXML; } success&&success(response); } else { error && error(xhr.status); } } } 复制代码跨域 iframe 跨域 // 用的超级少了

json 跨域

jsonp,大家已经知道json是什么了，那么p是什么？p是填充的意思,json的填充 jsonp返回的数据形式是 callback({age:30,name:'二狗'}) 而不是{age:30,name:'二狗'}是用括号包裹,前面的名称就是‘填充’，也就是jsonp的p. 为什么前面有一段字母呢？因为script接受的数据如果是一个json没办法保存，而调用一个函数,{}数据作为实参传递,这样就可以拿到json中的数据复制代码 jsonp前端代码看起来像这样

//我需要后台返回一个callback({数据})这样的一个值，实质就是调用上面的函数

复制代码第二十一章面向对象OOP ECMAscrtipt5 ECMAScript 对象类型在 ECMAScript 中，所有对象并非同等创建的。一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象、自定义对象。

本地对象包括： 1.Object 2.Function 3.Array 4.String 5.Boolean 6.Number 7.Date 8.RegExp 9.Error 10.EvalError 11.RangeError 12.ReferenceError 13.SyntaxError 14.TypeError 15.URIError

内置对象： 1.ECMA-262 只定义了两个内置对象，即 Global（window）和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。

宿主对象: 1.所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。 2.所有 BOM 和 DOM 对象都是宿主对象。复制代码对象中this指向，谁调用指向谁 var obj = { show: function () { console.log(this) }, name: { getName: function () { console.log(this) } } } obj.show(); // 指向obj obj.name.getname(); // 指向name 复制代码 ECMAScript5 对象的属性方法对象属性 constructor 对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。复制代码对象方法

hasOwnProperty(property) obj.hasOwnProperty(name)来判断一个属性是否是自有属性，自身属性还是继承原型属性。必须用字符串指定该属性。返回true 或 false
isPrototypeOf(object) obj.isPrototypeOf( obj.prototype ) 判断该对象的原型是否为xxxxx。返回true 或 false
propertyIsEnumerable() obj.propertyIsEnumerable(‘name’) 判断对象给定的属性是否可枚举，即是否可用 for...in 语句遍历到,返回true 或 false

4)getter,setter: 返回property的值得方法，值：function(){}或 undefined 默认是undefined

5)defineGetter(),defineSetter() 定义setter getter 函数在对象定义后给对象添加getter或setter方法要通过两个特殊的方法__defineGetter__和__defineSetter__。这两个函数要求第一个是getter或setter的名称，以string给出，第二个参数是作为getter或setter的函数。

6)lookupGetter,lookupSetter 返回getter setter所定义的函数语法：obj.lookupGetter(sprop) 复制代码 ECMAScript5 Object的新属性方法 Object.defineProperty(O,Prop,descriptor) / Object.defineProperties(O,descriptors) 定义对象属性 O ——————————–为已有对象 Prop —————————为属性 descriptor —————–为属性描述符 descriptors —————-多个属性描述符？在之前的JavaScript中对象字段是对象属性，是一个键值对，而在ECMAScript5中引入property，property有几个特征 Object.defineProperty 及Object.defineProperties 定义默认为:

value：值，默认是undefined

writable：是否可写，默认是false,

enumerable：是否可以被枚举(for in)，默认false

configurable：是否可以被删除，默认false 复制代码 Object.getOwnPropertyDescriptor(O,property) 获取对象的自有的指定的属性描述符复制代码 Object.keys(O,property) 获取所有的可枚举的属性名，非继承,返回数组复制代码 Object.getOwnPropertyNames(O) 获取所有自有的属性名，非继承复制代码 Object.create(O, descriptors ) Object.create(O,descriptors)这个方法用于创建一个对象，并把其prototype属性赋值为第一个参数，同时可以设置多个descriptors ，第二个参数为可选，复制代码 Object.preventExtensions(O) / Object.isExtensible() Object.preventExtensions(O) 阻止对象拓展，即：不能增加新的属性，但是属性的值仍然可以更改，也可以把属性删除， Object.isExtensible(O)用于判断对象是否可拓展复制代码 Object.seal(O) / Object.isSealed() Object.seal(O)方法用于把对象密封，也就是让对象既不可以拓展也不可以删除属性（把每个属性的configurable设为false）,单数属性值仍然可以修改，Object.isSealed（）由于判断对象是否被密封复制代码 Object.freeze(O) / Object.isFrozen() 终极神器，完全冻结对象，在seal的基础上，属性值也不可以修改（每个属性的wirtable也被设为false）复制代码说实话这章节的内容很多东西我在开发中根本用不到,极少数能用一下的...除非用到了我才会看看笔记

第二十二章面向对象 OOP 继承包装对象原始值类型(值类型): Boolean Number String 原始值.包装 = "包装对象" 包装对象: 字面量定义的原始类型的对象, 临时创建了一个对象, 这个对象就叫做包装对象,包装对象使用完就丢弃了

字面量创建的对象, 原理是js在内部隐式调用对应的构造函数生成的对象, 如果是有js机制隐式调用了构造函数创建的原始类型对象, 那么创建完成后,会把对象丢弃了
如果认为显示的调用构造函数生成原始类型的对象, 那么不会把对象丢弃了(可以进行属性的写入和读取)

var arr = '123' typeof(arr === String) var str = new String('123') typeof(str === Object) console.log(arr == str) 使用对象实际上使用对象的值, 所以相等 console.log(arr === str) 严格模式是不全等的, 不单单判断值相同,还要判断类型相同复制代码继承继承: 子类继承父类 1) 子类可以继承父类的所有 2) 子类扩展不能影响父类类继承的缺点: 不能在子类实例化时传参数私有属性继承: 父类.call(this, 参数)

JavaScript入门指南 两万余字的基础总结

JavaScript入门指南两万余字的基础总结