2017年03月_carriehaohao

原创 JavaScript 代码预解析/变量和函数的声明

1. 代码预解析所谓预解析，指的是在执行之前对代码的分析，检查看是否有错误，然后对变量进行提升。因此在预解析的时候，js 引擎做了两件事，① 检查语法是否有问题；② 提升声明预解析的过程：① 当浏览器打开后，会读取 html 等文件，同时读取 js 的代码，以字符串的形式进行读取；② 在浏览器内部有一个被称为 js 引擎的东西（v8 引擎），它会读取该字符串

2017-03-07 17:01:46 902

原创 JavaScript 自执行函数（闭包）

1. 全局污染在变量声明的时候有一个规则：重复声明无效var num = 123;var num = 'abc';重复声明的代码不会报任何错误，但是其声明特征就没有了，会转换成普通赋值语句故，上述代码与下面代码等价var num = 123;num = 'abc';例： var $ = function(selector

2017-03-07 16:50:04 1541

原创 JavaScript 函数四种调用模式

函数有四种形态-> 函数形态-> 方法形态-> 构造器形态-> 上下文形态（call, apply）函数的四种调用模式所有的 this 都是由当前函数决定，最终都是由函数的四种调用模式决定的。① 函数调用模式，只会执行一段代码，同时函数中的 this 是全局对象 window；返回值由return语句决定，如果没有

2017-03-07 16:13:38 519

原创 JavaScript 词法作用域

1. 词法作用域（1）什么是作用域？作用域就是可以作用的区域，即可以使用的区域。变量的作用域就是可以使用该变量的一个范围。最经典的作用域就是块级作用域，利用块来限定代码的执行范围。在 ES6 中引入了关键字 let，该关键字与 var 一样，用于声明变量。{ console.log(num);//num is not defined le

2017-03-07 15:31:35 484

原创 JavaScript 函数的不常用属性（name/callee/caller）

（1）name凡是定义一个函数，可以使用函数名.name 来获得函数的名字。如果是匿名函数，name就是“”（和浏览器版本有关）（2）callee 和 callerarguments.callee 被调用者，即该函数函数名.caller 主动调用者function foo1(){ // 主动调用者 foo2(); // 被调用者}

2017-03-07 15:17:47 312

原创 JavaScript 原型链/Function/Object/属性搜索原则/instanceof

1. 原型链（1）对象的原型链绘制原型链的结构（三角形）[] -> Array.prototype -> Object.prototype -> nullp -> Person.prototype -> Object.prototype -> null{} -> Object.prototype -> null原型式继承：① 原型

2017-03-07 15:13:36 711

原创 JavaScript 继承

1. 继承（inherit）js本身是没有继承这个特性或语法的，所以js的继承比较特殊。本质：拿来主义，原本不是自己的，但是自己可以直接用，好像就是自己的一样，这个就是继承。因此在js中，凡是符合上述特征的都是继承（js中继承没有特定的语法）。（1）最简单的继承就是原型式继承就是写一个构造函数，在原型中添加成员，那么实例对象就含有了该成员，这就称

2017-03-07 12:58:18 474

原创 JavaScript 原型的概念及使用

1. 原型的概念（1）为什么需要原型？描述一个构造函数的时候，实际上是在描述对象需要什么成员js是解释型语言，凡是需要解释的代码，都会被执行一次，意味着下面代码会创建多个对象var obj;for(var i=0; i<10; i++){ obj = {};}再比如下面代码，永远不可能相等console.log([] == []); // f

2017-03-07 12:39:59 961

原创 JavaScript 递归（栈结构/化归思想）

递归（1）概念：函数自己调用自己（2）问题存在：容易出现死递归，是循环的递归下去，内存不够就报错：栈溢出//1.直接调用自己function foo1(){ foo1();}foo1();//2.间接调用自己function foo2(){ foo3();}function foo3(){ foo4();}func

2017-03-07 12:22:45 465

原创 JavaScript 异常与捕获(抛出异常)

异常（exception）与捕获-> 书面解释：代码在运行过程中得到的中间结果与预期的结果不一致，就是异常。一般运行环境会抛出一个提示对象，中断程序运行，这个就是异常机制。-> 通俗的说法：程序在运行时出错-> 异常是可以捕获的，错误不能被捕获try { // 可能出现异常的代码} catch(e) { // 出现异常以后执行的代码 // e:ex

2017-03-07 12:08:32 21479 2

原创 JavaScript 构造函数

构造函数就是初始化对象的函数，简单的说就是给刚刚创建的对象赋值属性等。1、构造函数的作用-> 直接量（字面量，literal）（123 {} []...）缺点：无法复用-> 工厂函数（factory）function createPerson(name, age, gender){ return {

2017-03-07 11:59:02 296

原创 JavaScript 深浅拷贝

深浅拷贝(deep copy, shallow copy)深浅拷贝的基础知识是关于值类型和引用类型的区分，可参考《JavaScript 数据类型（值类型/引用类型）》一文（1）什么是拷贝？注意：一定在内存中有两个数据副本才是拷贝问题：var num1 = 123;var num2 = num1; // 这里内存中数据123有两个副本，因此是拷贝

2017-03-07 11:45:52 296

原创 JavaScript 使用浏览器开发者工具

浏览器开发者工具① 单步执行（逐语句执行）(F11)② 逐过程执行（如果遇到函数，则执行完函数，并跳到下一句代码）(F10)③ 结合逐过程执行、单步执行、继续运行按钮(F8)进行大段的代码调试④ 学会使用监视器监视变量1、调试中，想要跳过一段函数的内部代码，可以在函数的下一句代码上打个断点，按F8，就会直接跳到函数的下一句代码。（最好逐步演示一下）2

2017-03-06 21:51:44 537

原创 JavaScript 逻辑中断(hack技巧-处理函数的默认参数/早期浏览器兼容处理)

逻辑中断（在开发中使用的小技巧 - hack技巧）在使用逻辑运算符时（&& || !），在逻辑与、逻辑或处理表达式时的一个特殊机制：① 表达式1 && 表达式2表达式1在判断为假的情况下，表达式2就不予判断了② 表达式1 || 表达式2表达式1在判断为真的情况下，表达式2就不予判断了技巧：在 js 中逻辑表达式并不会将数据进行转换var num = 12

2017-03-06 21:37:59 520

原创 JavaScript 正则表达式匹配验证常用案例

匹配验证常用案例① 匹配座机号var regexp = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;var demo = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/;② 匹配中文/^[\u4e00-\u9fa5]{2,4}$/③ 匹配验证表单（注册QQ）验

2017-03-06 21:34:37 665

原创 JavaScript 正则表达式RegExp（text方法/内部类/边界/量词/优先级/replace/trim）

1. 概述英语：Regular Expression本质：用来记录文本规则的代码（为字符串定义规则，为输入内容定义规则！）应用非常广泛，如：表单验证、高级搜索、生化科学（有一定难度，不要求非常熟练，但至少会表单验证） 2. 正则表达式的组成由一些普通字符和元字符组成，普通字符就是字母和数字，元字

2017-03-06 21:31:15 2101 1

原创 JavaScript 特效之匀速动画

匀速动画/** * 功能：匀速动画 * 将传入的元素移动到目标位置 * 此方法已经解决了元素起始位置位于目标位置的左侧和右侧时的处理办法不同的问题，传入目标位置的正负与其无关 * 若以元素起始位置为原点， * 当target>0时，代表目标位置始终位于x轴正半轴 * 当target<0时，代表目标位置始终位于x轴负半轴 * @param ele 元素 * @param targ

2017-03-06 21:22:58 361

原创 JavaScript 特效之四大家族（offset/scroll/client/event）

JS四大家族三大系列：offset、scroll、client事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）三大系列都是以DOM元素节点的属性形式存在的。类比访问关系，也是以属性形式存在。不同点在于，访问关系是为了获取其他节点，而三大系列是为了获取元素节点更多的信息。

2017-03-06 21:17:18 1912

原创 JavaScript 运算对象Math

高级运算对象：Math（平方、立方、三角函数、……）

2017-03-06 21:10:50 362

原创 JavaScript 字符串操作(给索引查字符/给字符查索引/uri 编码和解码/字符串拼接/字符串截取/去掉空白/替换/变为数组/查找字符串中所有匹配项)

JavaScript 字符串操作① 给索引查字符 ( charAt / charCodeAt )charAt，获取相应位置字符（参数：字符位置）注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。charCodeAt，获取相应位置字符编码（参数：字符位置）charA

2017-03-06 21:03:37 5421

原创 JavaScript 日期对象Date(声明/Date对象的方法/返回距离1970/01/01毫秒数)

1. 日期对象声明2. Date对象的方法3. 返回距离1970/01/01毫秒数

2017-03-06 20:51:31 7292

原创 JavaScript BOM概述(open/close/location/navigator/history/定时器)

BOMbrower objects model：浏览器对象模型（BOM包含DOM）1. alert/confirm/变量/函数Window可以省略。全局变量和全局函数都是window下的属性和方法。- window对象是JavaScript中的顶级对象- 所有定义在全局作用域中的变量、函数都会变成window对

2017-03-06 20:44:47 378

原创 JavaScript DOM杂知识(value/innerHTML/innerText/textContent对比、nodeType/nodeName/nodeValue区别、获取任意类型的属性)

1. value/innerHTML/innerText/textContent对比2. nodeType/nodeName/nodeValue区别3. 获取任意类型的CSS样式的属性值

2017-03-06 20:35:58 1277

原创 JavaScript DOM概述(获取节点的方法/节点的访问关系/节点创建添加删除复制/属性获取设置删除)

DOM 概述document object model 文档对象模型：处理网页内容的方法和接口1. 什么是DOM和节点- document是文档对象模型的一部分。- DOM是一个复合的数据类型。- DOM树：由节点（Node）组成- HTML的组成部分为节点（ Node ）- 解析过程：HTML加载完毕，渲染引擎会在内存中把H

2017-03-06 20:20:31 751

原创 JavaScript 事件流（事件要素/普通事件/事件绑定/事件冒泡/阻止冒泡/阻止默认行为）

1. JS是以事件驱动为核心的一门语言。2. 事件三要素事件源、事件、事件处理程序使用事件的基本结构：事件源 + 事件类型 = 执行的指令事件的定义：当什么时候执行什么事编程中的事件包括：事件源（标签）、事件（JS为我们设计好了事件）、事件驱动程序（我们要做哪些逻辑）3. 事件经典三部曲

2017-03-06 17:54:26 455

原创 JavaScript 对象和面向对象概述（自定义对象）

1. JS中的对象（Object）创建空白对象：var obj = new Object();对象里面的变量叫属性，对象外面的变量叫变量对象里面的函数叫方法，对象外面的函数叫函数但前提是要给对象绑定属性和方法2. 构造函数（就是为了创建对象实例）① 可以创建对象实例的函数，为新对象进行初始化（设置对象

2017-03-06 17:35:55 426

原创 JavaScript 对象和面向对象概述

1. JS中的对象（Object）创建空白对象：var obj = new Object();对象里面的变量叫属性，对象外面的变量叫变量对象里面的函数叫方法，对象外面的函数叫函数但前提是要给对象绑定属性和方法2. 构造函数（就是为了创建对象实例）① 可以创建对象实例的函数，为新对象进行初始化（设置对象

2017-03-06 17:10:15 259

原创 JavaScript 对象和面向对象概述

1. JS中的对象（Object）创建空白对象：var obj = new Object();对象里面的变量叫属性，对象外面的变量叫变量对象里面的函数叫方法，对象外面的函数叫函数但前提是要给对象绑定属性和方法2. 构造函数（就是为了创建对象实例）① 可以创建对象实例的函数，为新对象进行初始化（设置对象的属性）。② 区别

2017-03-06 17:07:50 250

原创 JavaScript 函数总体概述(函数声明/参数传递/返回值/加载/变量和作用域/变量声明提升/匿名函数/回调函数)

1. 函数的概念和定义函数就是可以重复执行的代码块。① 函数声明（自定义声明）使用在定义之前或之后均可function 函数名(形参) { }② 函数表达式（匿名函数法）注意：使用必须在定义之后var 变量 = function(形参) { }③ Function对象（构造函数法）注意：使用必须在定义之

2017-03-05 08:43:37 650

原创 JavaScript 冒泡排序

冒泡排序基本思路：双重for循环第一个for控制轮数，轮数为数据个数-1第二个for控制次数，次数为数据个数-1（至少两两比较）法一：（简单版）原理：相邻两元素比较，大的靠后，排列元素个数-1轮，每轮排列元素个数-1次技术点：排列元素个数-1轮，每轮排列元素个数-1次步骤：1.需要两个for循环2.一个控制轮数，元素个

2017-03-05 08:26:53 400

原创 javascript 数组（Array对象/数组API）

1. 概述：数组是一种数据类型（把很多数据装入一个盒子中，用的时候取出来）字面量为[1,2,3]2. 定义：//字面量定义法var arr1 = [1,2,3];//对象定义法var arr2 = new Array(1,2,3);//定义数组长度var arr3 = new Array(10);3. 相

2017-03-05 00:22:57 599

原创 JavaScript 流程控制结构（顺序/选择/循环while for/跳出循环）

1. 顺序结构2. 选择结构if(判断条件){} else if(判断条件){} else{}- 要先写小范围的条件再写大范围的条件- else if、else 可以不写switch（判断变量）{ case 具体的值1: 要执行的代码段1; break; case 具体的值2: 要执行的代码段2; bre

2017-03-04 22:16:04 1060

原创 JavaScript 操作符（算术/逻辑/比较/赋值运算符/优先级/自增自减/三目运算符）

1. 算术运算符+ （加）：相加或连接- （减） * （乘） / （除）% （取余）( ) （提高优先级）高级运算对象：Math（平方、立方、三角函数、……）简写：a += 3; //a = a + 3a -= 3; //a = a - 3a *= 3; //a = a * 3a /= 3; //a = a

2017-03-04 22:11:39 2868 1

原创 JavaScript 数据类型转换（转为String/Number/Boolean）

1. 其他类型 -> String- 变量 + “”- String(变量) （构造函数）- 变量.toString() （undefined 和 null 没有 toString 方法）2. 其他类型 -> Number此转换容易出现 NaN，一旦要转换的变量中含有非数字字符，就会出现 NaN- 变量

2017-03-04 22:06:11 1192

原创 JavaScript 数据类型（值类型/引用类型）

1. 简单数据类型（值类型）String Number Boolean undefined null数据存储在栈中2. 复杂数据类型（引用类型）Object function Array Date RegExp Error ...先在栈空间中开辟一块内存，将数据保存到堆空间中，然后将数据在栈空间中的存储地址放到栈空间中

2017-03-04 22:03:34 707

原创 JavaScript 变量/命名规则/交换两个数值类型的变量

1. 命名规则驼峰命名规则：getElementById遵从规则：- 取值范围：0-9，a-z，A-Z，_，$- 不能以数字开头- 长度不能超过255字符- 不能以关键字和保留字命名- 区分大小写- 不能有空格，首字不能是数字- 可以用汉字，但不建议，太low了 2. 变量是

2017-03-04 21:58:52 371

原创 JavaScript 概述

1. 什么是 JavaScript？JavaScript 是一门编程语言。java 是强类型语言，后台用；JavaScript 是弱类型语言，前台用，脚本语言最初的目的：判断客户端的输入（以前的网速慢）现在的意义：- 页面特效（pc端网页效果）- 移动端（移动web和app）- 异步和服务器交互（ajax）- 服务端开发（no

2017-03-04 20:37:59 228

原创 jquery 懒加载插件jquery.lazyload.js

懒加载插件 jquery.lazyload.js打开一个页面，有很多图片，不可能一次加载完毕，而是滚动到哪个位置再进行加载，这是用来做性能优化的。1.导入JS插件(前提有 jquery.lazyload.js 文件)2. 需要进行懒加载的图片上要添加选择器：lazy然后添加方法：lazyload()$("img.lazy").lazyload()

2017-03-04 17:23:08 1616

原创 jQuery 链式编程/隐式迭代/each方法/多库共存

1.链式编程// 链式编程代码示例$(“li”).parent(“ul”).parent().siblings(“div”).children(“div”).html(“内容”);链式编程原理：return this;通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 thisend(); //结束当前链最近的一次

2017-03-04 16:52:58 1694

原创 jQuery 事件（绑定事件/解绑事件/触发事件/事件对象）

jQuery事件1.事件机制jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。JavaScript：btn.onclick = function() {}; //给这个按钮绑定事件jQuery：$btn.click(function() {}); //给按钮绑

2017-03-04 16:36:00 3691

空空如也

空空如也