├── .gitignore ├── Chrome开发者工具 ├── README.MD ├── 主功能区域 │ ├── Application.MD │ ├── Audits.MD │ ├── NetWork.MD │ ├── ProFiles.MD │ ├── Security.MD │ ├── Sources.MD │ ├── Timeline.MD │ ├── console.MD │ ├── console.html │ └── elements.MD ├── 切换浏览设备 │ └── README.MD └── 审查元素 │ ├── README.MD │ └── 审查元素.html ├── DOM2 ├── DOM2事件 │ ├── 1、事件基础 │ │ ├── 3、冒泡和捕获.html │ │ ├── 4、事件委托.html │ │ ├── 5、事件委托应用-N及菜单.html │ │ ├── README.md │ │ ├── 事件捕获.html │ │ ├── 鼠标放大镜左侧商品.html │ │ ├── 鼠标放大镜左侧商品2.html │ │ ├── 鼠标放大镜左侧商品3.html │ │ ├── 鼠标跟随移动.html │ │ └── 鼠标跟随移动2.html │ ├── 2、基础事件库和拖拽 │ │ ├── 2、DOM二级事件绑定问题.html │ │ ├── 3、事件兼容性问题总结.html │ │ ├── 4、兼容性解决this关键字.html │ │ ├── 5、兼容性解决执行顺序--2封装.html │ │ ├── 5、兼容性解决执行顺序.html │ │ ├── 6、off和run执行时数组塌陷问题.html │ │ ├── 7、解决全部兼容性问题.html │ │ ├── 8、基本的拖拽效果.html │ │ ├── 8、基本的拖拽效果2重构.html │ │ ├── 8、基本的拖拽效果3优化.html │ │ ├── 9、拖拽加动画效果-2过界判断.html │ │ ├── 9、拖拽加动画效果-3自由落体.html │ │ ├── 9、拖拽加动画效果.html │ │ ├── DOM二级事件.html │ │ └── README.md │ ├── 3、事件和观察者模式 │ │ ├── 2、完善事件方案on-run-off.html │ │ ├── 3、模块化开发拖拽效果-2带图片的盒子优化.html │ │ ├── 3、模块化开发拖拽效果.html │ │ ├── 4、模块化开发拖拽效果+设计模式.html │ │ ├── 5、理解设计模式.html │ │ ├── 6、完善tween+drag+tween │ │ │ ├── drag.js │ │ │ ├── event.js │ │ │ ├── index.html │ │ │ ├── tool.js │ │ │ └── tween.js │ │ ├── 8、闭包风格的拖拽 │ │ │ ├── event.js │ │ │ ├── index-2优化.html │ │ │ ├── index-3面向对象的拖拽.html │ │ │ ├── index-4面向对象+设计模式+继承.html │ │ │ └── index.html │ │ ├── event3.js │ │ └── logo.jpg │ ├── 封装的事件库 │ │ ├── 封装的事件库-第三次.js │ │ └── 封装的事件库-第二次.js │ └── 放大镜 │ │ ├── img │ │ ├── peony.jpg │ │ └── smallPeony.jpg │ │ ├── index.html │ │ ├── index2.html │ │ └── index3.html ├── DOM2范围 │ └── readme.md ├── DOM2遍历 │ └── readme.md └── JS操作CSS │ ├── 1、返回顶部的案例 │ ├── README.md │ └── toTop.html │ ├── 2、单张静态图片延迟加载 │ ├── README.md │ └── 静态图片延迟加载.html │ ├── 3、多张图片延迟加载 │ ├── README.md │ ├── img │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ └── ddd.jpg │ ├── js │ │ └── json.js │ └── 多张图片延迟加载.html │ └── readme.md ├── DOM操作和封装DOM库 ├── DOM操作.md ├── DOM面向对象.md ├── tool.js └── 封装DOM库.md ├── JSON ├── JSON语法.md ├── readme.md └── 解析与序列化.md ├── JS算法原理 └── JS中的常见算法.md ├── JS高级技巧 ├── readme.md ├── 防篡改对象.md ├── 高级函数.md └── 高级定时器.md ├── README.md ├── img ├── icon.png ├── path1 │ ├── dataType.png │ ├── javascript.png │ └── typeChange.jpg ├── path2 │ ├── 函数名的原理解析.png │ ├── 函数名的原理解析.psd │ ├── 原型模式的弊端.png │ └── 原型模式的弊端.psd ├── 作用域链查找.jpg ├── 作用域链查找.psd ├── 构造函数的原型.jpg ├── 构造函数的原型.psd ├── 继承-原型继承原理.png ├── 继承-原型继承原理.psd ├── 预解释分析.jpg └── 预解释分析.psd ├── index.js ├── test-file.html ├── test.css ├── 函数初识 ├── 1.函数定义.js ├── 2.toString.js └── README.md ├── 前端开发初识 ├── 1.开发环境介绍.html ├── 10.数据类型.js ├── 11.数据类型判断.js ├── 12.变量的类型可以被随时改变.js ├── 13.console.js ├── 2.HTML标签介绍.html ├── 3.HTML标签的全局属性.html ├── 4.JS由哪些部分组成.html ├── 5.HTML中怎么写JS.html ├── 6.HTML中怎么写CSS.html ├── 6.HTML中怎么写CSS2.html ├── 7.noscript标签引申的2种编程思想.html ├── 8.CSS3中两种方案.html ├── 9.变量的定义和赋值.js ├── README.MD ├── src │ └── btn.js └── wui │ └── color.css ├── 动画与定时器的应用 ├── README.md ├── twenn动画 │ ├── 1、基础思路 │ │ ├── 基础框架思路.html │ │ ├── 基础框架思路去耦合-优化1-透明度.html │ │ ├── 基础框架思路去耦合-优化2-透明度.html │ │ ├── 基础框架思路去耦合-优化3-多方向封装.html │ │ ├── 基础框架思路去耦合-优化4-多方向效果.html │ │ └── 基础框架思路去耦合.html │ ├── README.md │ ├── jquery动画的计算公式.js │ └── 百叶窗 │ │ ├── img │ │ └── zhume.jpg │ │ ├── index.html │ │ ├── index2.html │ │ └── starMove方法-优化3.js ├── 基础动画库以动画原理 │ ├── README.md │ ├── move1.html │ ├── move2.html │ ├── move3.html │ └── move4.html ├── 封装动画库 │ ├── README.md │ ├── starMove方法-优化2.js │ ├── starMove方法-优化3.js │ ├── starMove方法.js │ └── 封装简单动画库.html └── 用封装的动画库做焦点图、自动轮播图 │ ├── tool.js │ ├── 无缝轮播图.html │ ├── 无缝轮播图优化.html │ ├── 最终的无缝轮播图.html │ ├── 焦点图.html │ └── 轮播图.html ├── 变量声明和原理 ├── 1.var.js ├── 2.const和let.js ├── 3.let和var.js ├── README.MD └── 数据储存原理.js ├── 数据类型初识 ├── 0.各种数据类型.js ├── 1.String.js ├── 2.Number.js ├── 3.Boolean.js ├── 4.null和undefined.js ├── 5.Object.js ├── 6.Symbol.js ├── 6.Symbol2.js └── README.MD ├── 数据类型详解 ├── readme.md ├── 模块化开发日历控件 │ ├── Calendar.html │ ├── Calendar2.html │ ├── Calendar3.html │ ├── Calendar4.html │ ├── Calendar5.html │ └── README.md └── 表格排序的写法和排序 │ ├── css │ └── table.css │ ├── js │ ├── jsonPerson.js │ ├── table.js │ └── tools.js │ └── table.html ├── 模块化开发 ├── readme.md └── tabModel │ ├── css │ └── tabModel.css │ ├── js │ ├── index.js │ └── tool.js │ └── tabModel.html ├── 正则表达式 ├── 1.正则基础.md ├── 2.正则的组成.md ├── 3.元字符的应用.md ├── 4.正则的捕获.md ├── 5.分组捕获.md ├── 6.replace和实战.md ├── 7.正则总结.md └── readme.md ├── 研究Array类 └── README.md ├── 研究Boolean类 └── README.md ├── 研究Data类 └── README.md ├── 研究Function类 └── README.md ├── 研究Math类 └── README.md ├── 研究Number类 └── README.md ├── 研究Object类 └── README.md ├── 研究String类 └── README.md ├── 研究全局对象 ├── README.md └── Timers │ ├── Timers.md │ └── index.html ├── 表达式和运算符 ├── 1.%运算符.js ├── 2.算术运算符.js ├── 3.关系运算符.js ├── 4.相等运算符.js ├── 5.逻辑运算符.js ├── 6.位运算符.js ├── 7.三元运算符.js └── README.MD ├── 语句 └── README.md ├── 错误处理与调试 └── README.md ├── 面向对象和继承方式 ├── 函数的三种角色理解.md ├── 创建对象的方式.md ├── 理解对象.md └── 继承的几种方法.md └── 预解释-作用域-this关键字-闭包 ├── 1.预解释的原理.md ├── this关键字.md ├── 作用域和闭包.md ├── 变量和属性不存在时候的区别.md ├── 垃圾回收机制.md ├── 投票的实现原理.md └── 闭包在什么场合下用.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.idea 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 22 | .grunt 23 | 24 | # node-waf configuration 25 | .lock-wscript 26 | 27 | # Compiled binary addons (http://nodejs.org/api/addons.html) 28 | build/Release 29 | 30 | # Dependency directories 31 | node_modules 32 | jspm_packages 33 | 34 | # Optional npm cache directory 35 | .npm 36 | 37 | # Optional REPL history 38 | .node_repl_history 39 | -------------------------------------------------------------------------------- /Chrome开发者工具/README.MD: -------------------------------------------------------------------------------- 1 | ##### chrome 开发者工具 2 | 3 | 我的chrome版本号 55.0.2883.87 m (64-bit)，所有操作都是基于这个版本的； 4 | 5 | ![](http://i.imgur.com/iiuwGxl.png) 6 | 7 | 进入开发者工具的方式：F12 （所有浏览器都可以用F12进入开发者工具），ChromeDev（开发者工具简称）按照类别可以分为下面几种 8 | 9 | ![](http://i.imgur.com/WVGTuvT.jpg) 10 | 11 | 1. 审查元素 ctrl+shift+c 在页面上选择一个HTML元素并审查它 12 | 2. 切换浏览设备 ctrl+shift+m 切换在PC和手机上的样式； 13 | 3. 主功能目录区域 日常工作中常用功能的目录 14 | 4. 异常和错误提醒简介 抛出异常、资源请求错误、程序错误等简介 15 | 5. 个性化和设置ChromeDev 16 | 6. 关闭ChromeDev F12 17 | 7. 主功能面板区域 随着主功能目录的切换而切换，这里是ChromeDev的主要操作区域 18 | 8. 辅助功能区域 快捷键ESC进行开启和隐藏 19 | 20 | Chrome开发者工具提供了提示功能，当鼠标悬停在某些文字图标上的时候，会做一些人性化的提示，经常看一下，会有收获； 21 | 22 | Chrome浏览器还提供用PC，调试真机（手机）； 23 | 24 | # 一、审查元素 25 | 26 | 在没有开启控制台的情况下，可以通过快捷键ctrl+shift+c直接开启控制台，并进入审查选择状态，在页面上选择一个HTML元素并审查它； 27 | 28 | - [审查元素](./审查元素/readme.md) 29 | 30 | # 二、切换浏览设备 31 | 32 | 切换在PC和手机上的样式，切换后需刷新,才能看到正确的适配; 33 | 34 | - [切换浏览设备](./切换浏览设备/readme.md) 35 | - [真机调试](./切换浏览设备/真机调试.md)、Chrome调整真机上的网页； 36 | 37 | # 三、主功能区域 38 | 39 | 工作中常用的功能 40 | 41 | 1. [Elements](./主功能区域/elements.md) 42 | 2. [Console](./主功能区域/console.md) 43 | 3. [NetWork](./主功能区域/NetWork.md) 44 | 4. [Sources](./主功能区域/Sources.md) 45 | 5. [Timeline](./主功能区域/Timeline.md) 46 | 6. [ProFiles](./主功能区域/ProFiles.md) 47 | 7. [Application](./主功能区域/Application.md) 48 | 8. [Security](./主功能区域/Security.md) 49 | 9. [Audits](./主功能区域/Audits.md) 50 | 51 | 上面这些标签的位置可以自由移动，可以根据自己的习惯进行移动； 52 | 53 | # 四、异常和错误提醒简介 54 | 55 | - [异常和错误提醒简介](./异常和错误提醒简介/readme.md) 56 | 57 | # 五、个性化和设置ChromeDev 58 | 59 | - [个性化和设置ChromeDev](./个性化和设置ChromeDev/readme.md) 60 | 61 | # 六、关闭ChromeDev 62 | 63 | 呃、就是关闭ChromeDev，没啥； 64 | 65 | # 八、辅助功能区域 66 | 67 | 1. [Console](./主功能区域/console.md) 68 | 1. 和主区域中console一样的功能，但是可以在任何主功能的面板展示的同时使用console，比如你可以在再开Element的时候，使用辅助区域的console； 69 | 2. 主区域的console和辅助区域console不能同时展开 70 | 2. [History](./辅助功能区域/History.md),历史信息 71 | 3. [Animations](./辅助功能区域/Animations.md),动画 72 | 4. [Network conditions](./辅助功能区域/Network-conditions.md),网络条件 73 | 5. [Rendering](./辅助功能区域/Rendering.md)，渲染 74 | 6. [Remote devices](./辅助功能区域/Remote-devices.md)，远程设备 75 | 7. [Sensors](./辅助功能区域/Sensors.md)，传感器 76 | 8. [Search](./辅助功能区域/Search.md)，全局搜索网页加载内容 77 | 9. [Quick source](./辅助功能区域/Quick-source.md)，资源快捷展示 78 | -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/Application.MD: -------------------------------------------------------------------------------- 1 | # Application 2 | 3 | 使用资源面板检查加载的所有资源,包括IndexedDB 、WebSQL数据库 、本地存储、cookies、应用程序缓存、图片、字体、样式表、JS等 4 | 5 | ![](http://i.imgur.com/x8DT82K.jpg) 6 | 7 | 1. 分类列表区域 8 | 2. 详细信息区域 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/Audits.MD: -------------------------------------------------------------------------------- 1 | # Audits 2 | 3 | 分析页面加载的过程，进而提供减少页面加载时间，提升响应速度的方案； 4 | 5 | ![](http://i.imgur.com/RiUjrDa.jpg) 6 | 7 | 1. 分类列表区域 8 | 2. 详细信息区域 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/NetWork.MD: -------------------------------------------------------------------------------- 1 | # NetWork 2 | 3 | 了解需要哪些资源，资源的请求情况,方便优化页面加载性能（可以查看某个时间段加载了哪些文件，某个文件的加载时间等）；最重要的是可以查看HTTP的请求头、返回内容等，在做AJAX相关开发的时候很常用; 4 | 5 | ![](http://i.imgur.com/VEqsuJd.jpg) 6 | 7 | 1. NetWork操作 8 | 2. 信息筛选 9 | 3. 时间轴 10 | 4. 当前时间段的加载文件信息 11 | 5. 当前文件的加载详情 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/ProFiles.MD: -------------------------------------------------------------------------------- 1 | # ProFiles 2 | 3 | 分析WEB应用或者页面的执行事件以及内存使用情况； 4 | 5 | ![](http://i.imgur.com/EAUwM0p.jpg) 6 | 7 | 1. ProFiles操作区域 8 | 2. 分类列表区域 9 | 3. 详细信息区域 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/Security.MD: -------------------------------------------------------------------------------- 1 | # Security 2 | 3 | 调试混合内容问题，安全证书或者更多安全相关的问题 4 | 5 | ![](http://i.imgur.com/VHU3mfj.jpg) 6 | 7 | 1. 分类列表区域 8 | 2. 详细信息区域 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/Sources.MD: -------------------------------------------------------------------------------- 1 | # Sources 2 | 3 | 使用断点调试JavaScript，或在连接你本地文件的情况下，进行同步编辑，（当然也是可以查看加载了哪些路径下的文件） 4 | 5 | ![](http://i.imgur.com/pN7ePwm.jpg) 6 | 7 | 1. 当前页面加载的文件 8 | 2. 文件的具体内容(可设断点) 9 | 3. 断点的详情 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/Timeline.MD: -------------------------------------------------------------------------------- 1 | # Timeline 2 | 3 | 提供加载页面时花费时间的完整分析，所有事件，从下载资源到处理JS，计算CSS样式等花费的时间都展示在TimeLine中,页面性能的概要； 4 | 5 | ![](http://i.imgur.com/UR55uc5.jpg) 6 | 7 | 1. Timeline操作 8 | 2. 当前目标时间段 9 | 3. 当前时间端的交互 10 | 4. 详细 11 | 5. 详细分析 -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/console.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Console 6 | 7 | 8 |
console.log
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
AAA
bbbaaaccc
111333222
27 | 28 | 141 | 142 | -------------------------------------------------------------------------------- /Chrome开发者工具/主功能区域/elements.MD: -------------------------------------------------------------------------------- 1 | # Elements 2 | 3 | Elements工具像一把手术刀一样“解剖”了当前页面，我们看到的Elements页面一般像这样子，允许查看和编辑浏览器渲染的HTML/CSS,编辑与展现是同步的； 4 | 5 | ![](http://i.imgur.com/Hv12MV2.jpg) 6 | 7 | 1. HTML区域 8 | 2. CSS区域 9 | 10 | 11 | ##### 审查元素的时候，不同颜色分别代表的意思如下； 12 | 13 | ![](http://i.imgur.com/PAzAvki.jpg) -------------------------------------------------------------------------------- /Chrome开发者工具/切换浏览设备/README.MD: -------------------------------------------------------------------------------- 1 | # 二、切换浏览设备 2 | 3 | 切换在PC和手机上的样式，切换后需刷新,才能看到正确的适配; 4 | 5 | ![](http://i.imgur.com/N8yn43z.jpg) 6 | 7 | 如果要增加目标手机设备; 8 | 9 | - 可以在settings-> Devices中选择，或者定制分辨率大小； 10 | - 如果要增加目标手机(或定制分辨率大小)，可以在settings-> Devices中选择；或在手机型号列表下面，选择Edit 11 | 12 | ![](http://i.imgur.com/B2jwDV0.jpg) -------------------------------------------------------------------------------- /Chrome开发者工具/审查元素/README.MD: -------------------------------------------------------------------------------- 1 | # 一、审查元素 2 | 3 | 在没有开启控制台的情况下，可以通过快捷键ctrl+shift+c直接开启控制台，并进入审查选择状态； 4 | 5 | 在页面上选择一个HTML元素并审查它； 6 | 7 | ![](http://i.imgur.com/qTIw3sC.jpg) 8 | 9 | 悬停的时候会用阴影显示所在的HTML，并显示类名和元素大小等信息,在Elements的面板上也会标注选择的HTML； 10 | 11 | 如果单机悬停的HTML，途中[上次选择的HTML]标记会显示为当前选中的HTML； 12 | 13 | 如果点击HTML层级关系中的面包屑导航，会到达对应的HTML节点； 14 | 15 | 16 | ##### 审查元素的时候，不同颜色分别代表的意思如下； 17 | 18 | ![](http://i.imgur.com/PAzAvki.jpg) -------------------------------------------------------------------------------- /Chrome开发者工具/审查元素/审查元素.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 测试审查元素 6 | 12 | 13 | 14 |
one-width: 500px;height: 100px;
15 |
two-width: 500px;height: 100px;
16 |
three-width: 500px;height: 100px;
17 | 18 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/3、冒泡和捕获.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 点击哪个标签就把哪个标签名输出 6 | 7 | 8 |
9 |
10 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/4、事件委托.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/README.md: -------------------------------------------------------------------------------- 1 | #事件基础 2 | 3 | **事件是什么**：就是一件事，包括硬件的一些行为； 4 | 5 | - click 6 | - mouseover 7 | - mouseout 8 | - keydown 9 | - keyup 10 | 11 | **什么是绑定**：事件监听； 12 | 13 | **具体某一个事件和事件整体的区别**：一件事，和一套事件系统 14 | 15 | **什么是事件对象**：实现事件系统，事件的机制，浏览器自己有一套机制；类似人的神经系统，这个内置第机制就是事件对象； 16 | 17 | 18 | 事件演示： 19 | > var oDiv=document.getElementById("div1"); 20 | oDiv.onmousemove=function(event){ 21 | //直接把一个方法赋值给一个事件属性.这个方法运行的时候，浏览器会自动的给这个方法传一个对象；这个对象就是事件对象； 22 | event=event||window.event;//IE下的事件对象，是一个全局的event；这种的是兼容写法； 23 | event.clientX;//鼠标的X轴坐标； 24 | event.clientY;//鼠标的Y轴坐标； 25 | //时间有即时行； 26 | event.type;//事件类型；只和当时发生的类型有关；只能同时处理一个事件； 27 | this.innerHTML="X:"+event.clientX+" Y："+event.clientY; 28 | }; 29 | document.documentElement.onkeydown= function (event) { 30 | event=event||window.event; 31 | oDiv.innerHTML=event.keyCode; 32 | } 33 | 34 | 35 | //pageX;pageY;鼠标距离文档(当前页面的)最上角的距离；不支持IE678; 36 | //clientX;clientY;指的是浏览器； 37 | //onmouseover和onmouseenter区别；over会传播，enter是不传播的； 38 | //onmouseout和onmouselive区别； 39 | 40 | 取消冒泡的方法； 41 | 42 | > //阻止事件传播/冒泡的方法； 43 | this.appendChild(ele); 44 | ele.onmouseover=function(event){ 45 | event=event||window.event; 46 | if(event.stopPropagation){ 47 | event.stopPropagation();//标准留言器中禁止冒泡； 48 | // preventDefault中文意思是阻止默认行为； 49 | }else{ 50 | e.cancelBubble=true;//IE浏览器禁止冒泡；IE678 51 | } 52 | } 53 | 54 | 55 | onmouseenter的优势； 56 | > // onmouseover和onmouseenter很像，但是可以避免；onmouseover的一些问题； 57 | // 如果是从父元素到子元素，不会触发onmouseover; 58 | // 如果是从子元素到父元素，也不会触发onmouseover； 59 | 60 | 事件的冒泡和捕获 61 | 62 | > function fn(){ 63 | console.log(this.nodeName) 64 | } 65 | eles=document.documentElement.getElementsByTagName("*"); 66 | for(var i=0;i document.documentElement.onclick=function(event){ 78 | event=event||window.event; 79 | //事件源委托给documentElement 80 | target=event.target||event.srcElement;//事件源 81 | console.log(target.nodeName) 82 | } 83 | 下面是具体应用 84 | 85 | > document.documentElement.onclick=function(event){ 86 | event=event||window.event; 87 | //事件源委托给documentElement 88 | target=event.target||event.srcElement;//事件源 89 | console.log(target.nodeName) 90 | }; 91 | //下面是动态创建的 92 | var p=document.createElement("p"); 93 | document.body.appendChild(p); 94 | p.innerHTML="222312312312"; 95 | /*事件委托也可以实现动态绑定*/ 96 | /*所有的事件，都可以用事件委托来实现；时间委托是一个高级技巧*/ -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/事件捕获.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/鼠标放大镜左侧商品.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/鼠标放大镜左侧商品2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/鼠标放大镜左侧商品3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/鼠标跟随移动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/1、事件基础/鼠标跟随移动2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/2、DOM二级事件绑定问题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/3、事件兼容性问题总结.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 | **DOM2事件绑定的兼容性总结，IE是指低版本IE**： 10 | 11 | 12 | 1. 方法不同,一个是（addEventListener/removeEventListener），IE是（attachEvent/detachEvent） 13 | 2. IE里被绑定上的方法，this关键字指向window； 14 | 3. IE里执行的顺序是混乱的 15 | 4. IE里的方法是可以被重复绑定的； 16 | 5. 事件对象本身，IE是全局的时间对象window.event；其他的是系统自动传的 17 | 6. 事件源：标准浏览器是e.target；IE是srcElement; 18 | 7. 阻止事件的默认行为：标准浏览器是e.preventDefault(),IE是returnValue=false； 19 | 8. 在所有浏览器中，如果用DOM0的方式来绑定，方法里面用return false也可以阻止默认行为的；这个是可以阻止DOM0的，如果是DOM2级的就不可以了 20 | 8. 阻止事件的传播：标准浏览器是e.stopPropagation();IE是cancelBubble=true; 21 | 9. e.pageX,e.pageY，这两个属性IE不支持； 22 | 10. IE不支持捕获，只能支持冒泡；所以标准浏览器绑定和解绑第三个参数是false，第三个参数不写，也是没问题的； 23 |
24 | 25 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/5、兼容性解决执行顺序.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 执行顺序 6 | 9 | 10 | 11 |
12 | 低版本的IE事件，如果超过9个就会混乱了；9个内是倒序的； 13 | 14 | 15 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/8、基本的拖拽效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 基本的拖拽效果 6 | 10 | 11 | 12 |
拖拽效果
13 |
14 |
15 |
16 |
17 |
18 |
19 | 1、鼠标点击； 20 | 2、鼠标移动； 21 | 3、鼠标松开； 22 |
23 | 盒子是随着鼠标移动而移动的，鼠标移动多远它就移动多远; 24 |
25 | 盒子移动的距离=盒子原来的位置+鼠标移动的距离； 26 |
27 | 鼠标移动的距离=鼠标现在的位置-鼠标按下去时候的距离； 28 |

29 | 1、鼠标点击的清零；
30 | mousedown:记下盒子原来的位置和鼠标原始的位置；也就是鼠标和盒子的清零； 31 |
32 | 记再被拖拽的自定义属性上； 33 |
34 | 盒子的原始位置；
35 | this.x=this.offsetLeft; 36 | this.y=this.offsetTop; 37 |
38 | 鼠标的原始位置
39 | this.mouseX=e.clientX; 40 | this.mouseY=e.clientY; 41 |
42 |
43 | 2、鼠标移动的时候； 44 |
45 | 盒子移动的位置； 46 |
47 | this.style.top=this.y+(e.clientY-this.mouseY)+"px"; 48 |
49 | this.style.left=this.x+(e.clientX-this.this.mouseX)+"px"; 50 |

51 | 3、鼠标松开； 52 |
mouseup结束拖拽； 53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/8、基本的拖拽效果2重构.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 基本的拖拽效果 6 | 10 | 11 | 12 |
拖拽效果
13 |
14 |
15 |
16 |
17 |
18 |
19 | 1、鼠标点击； 20 | 2、鼠标移动； 21 | 3、鼠标松开； 22 |
23 | 盒子是随着鼠标移动而移动的，鼠标移动多远它就移动多远; 24 |
25 | 盒子移动的距离=盒子原来的位置+鼠标移动的距离； 26 |
27 | 鼠标移动的距离=鼠标现在的位置-鼠标按下去时候的距离； 28 |

29 | 1、鼠标点击的清零；
30 | mousedown:记下盒子原来的位置和鼠标原始的位置；也就是鼠标和盒子的清零； 31 |
32 | 记再被拖拽的自定义属性上； 33 |
34 | 盒子的原始位置；
35 | this.x=this.offsetLeft; 36 | this.y=this.offsetTop; 37 |
38 | 鼠标的原始位置
39 | this.mouseX=e.clientX; 40 | this.mouseY=e.clientY; 41 |
42 |
43 | 2、鼠标移动的时候； 44 |
45 | 盒子移动的位置； 46 |
47 | this.style.top=this.y+(e.clientY-this.mouseY)+"px"; 48 |
49 | this.style.left=this.x+(e.clientX-this.this.mouseX)+"px"; 50 |

51 | 3、鼠标松开； 52 |
mouseup结束拖拽； 53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/8、基本的拖拽效果3优化.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 基本的拖拽效果 6 | 10 | 11 | 12 |
拖拽效果
13 |
14 |
15 |
16 |
17 |
18 |
19 | 1、鼠标点击； 20 | 2、鼠标移动； 21 | 3、鼠标松开； 22 |
23 | 盒子是随着鼠标移动而移动的，鼠标移动多远它就移动多远; 24 |
25 | 盒子移动的距离=盒子原来的位置+鼠标移动的距离； 26 |
27 | 鼠标移动的距离=鼠标现在的位置-鼠标按下去时候的距离； 28 |

29 | 1、鼠标点击的清零；
30 | mousedown:记下盒子原来的位置和鼠标原始的位置；也就是鼠标和盒子的清零； 31 |
32 | 记再被拖拽的自定义属性上； 33 |
34 | 盒子的原始位置；
35 | this.x=this.offsetLeft; 36 | this.y=this.offsetTop; 37 |
38 | 鼠标的原始位置
39 | this.mouseX=e.clientX; 40 | this.mouseY=e.clientY; 41 |
42 |
43 | 2、鼠标移动的时候； 44 |
45 | 盒子移动的位置； 46 |
47 | this.style.top=this.y+(e.clientY-this.mouseY)+"px"; 48 |
49 | this.style.left=this.x+(e.clientX-this.this.mouseX)+"px"; 50 |

51 | 3、鼠标松开； 52 |
mouseup结束拖拽； 53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/9、拖拽加动画效果-2过界判断.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Duang！拖拽加效果 6 | 10 | 11 | 12 |
拖拽效果
13 | 14 | 15 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/9、拖拽加动画效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Duang！拖拽加效果 6 | 10 | 11 | 12 |
拖拽效果
13 | 14 | 15 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/DOM二级事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/2、基础事件库和拖拽/README.md: -------------------------------------------------------------------------------- 1 | #基础事件库和拖拽 2 | 标准浏览器监听： 3 | 4 | > oDiv.addEventListener("click",fn3); 5 | > oDiv.addEventListener("click",fn4,false);//和上面一样的，不写和写false一样的； 6 | 7 | 移除的 8 | 9 | > this.removeEventListener("click",fn1,false);//移除 10 | 11 | IE浏览器的监听用的是attachEvent； 12 | 13 | 绑定和移除的方法 14 | 15 | > var oDiv=document.getElementById("div1"); 16 | function bind(ele,type,fn){//绑定 17 | if(ele.addEventListener){ 18 | ele.addEventListener(type,fn,false); 19 | //ele.addEventListener(type,fn);//也可以写成这样的 20 | }else{ 21 | ele.attachEvent("on"+type,fn); 22 | } 23 | } 24 | /* alert(typeof oDiv.addEventListener);//function 25 | 26 | alert(typeof oDiv.attachEvent);//在IE7里面是object*/ 27 | function unbind(ele,type,fn){//移除 28 | if(ele.removeEventListener){ 29 | ele.removeEventListener(type,fn,false); 30 | }else{ 31 | ele.detachEvent("on"+type,fn) 32 | } 33 | } 34 | 35 | IE兼容性问题： 36 | > bind(oDiv,"click",fn1); 37 | bind(oDiv,"click",fn2); 38 | bind(oDiv,"click",fn3); 39 | bind(oDiv,"click",fn4); 40 | bind(oDiv,"click",fn5); 41 | bind(oDiv,"click",fn6); 42 | bind(oDiv,"click",fn7); 43 | bind(oDiv,"click",fn8); 44 | bind(oDiv,"click",fn9); 45 | bind(oDiv,"click",fn10); 46 | /*标准浏览器打印：1,2,3,4,5,6,7,8,9,10 47 | * IE7/8：9,8,7,10,6,5,4,3,2,1 48 | * */ 49 | //IE和标准浏览器的区别： 50 | // 1、this不指向被绑定的DOM元素了； 51 | // 2、顺序是乱了，如果少，会是倒序的； 52 | // 3、可以在一个元素上绑定同一个方法；（正常一个方法是不能重复绑定的） 53 | 54 | **DOM2事件绑定的兼容性总结，IE是指低版本IE**： 55 | 56 | 57 | 1. 方法不同,一个是（addEventListener/removeEventListener），IE是（attachEvent/detachEvent） 58 | 2. IE里被绑定上的方法，this关键字指向window； 59 | 3. IE里执行的顺序是混乱的 60 | 4. IE里的方法是可以被重复绑定的； 61 | 5. 事件对象本身，IE是全局的时间对象window.event；其他的是系统自动传的 62 | 6. 事件源：标准浏览器是e.target；IE是srcElement; 63 | 7. 阻止事件的默认行为：标准浏览器是e.preventDefault(),IE是returnValue=false； 64 | 8. 在所有浏览器中，如果用DOM0的方式来绑定，方法里面用return false也可以阻止默认行为的；这个是可以阻止DOM0的，如果是DOM2级的就不可以了 65 | 8. 阻止事件的传播：标准浏览器是e.stopPropagation();IE是cancelBubble=true; 66 | 9. e.pageX,e.pageY，这两个属性IE不支持； 67 | 10. IE不支持捕获，只能支持冒泡；所以标准浏览器绑定和解绑第三个参数是false，第三个参数不写，也是没问题的； 68 | 69 | 低版本的IE事件，如果超过9个就会混乱了；9个内是倒序的； 70 | 71 | **事件的兼容问题都在run里解决好；**以后直接传个e即可；使用也都用标准浏览器的语法； 72 | > /*事件兼容性问题，都在run上解决好*/ 73 | function run(e){ 74 | e=e||window.event; 75 | if(!e.target){ 76 | e.target= e.srcElement; 77 | e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX; 78 | e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY; 79 | e.stopPropagation=function(){e.cancelBubble=true;}//阻止事件传播; 80 | e.preventDefault=function(){e.returnValue=false;}//阻止事件默认行为; 81 | } 82 | /*上面是IE不支持的*/ 83 | var a=this["aEvent"+e.type]; 84 | for(var i=0;i< a.length;){ 85 | /*下面是防止数组塌陷的*/ 86 | if(typeof a[i]=="function"){ 87 | //a[i].call(this);//this指向当前被绑定元素； 88 | a[i].call(this,e);//this后面加e；就解决了e的兼容性问题；因为想this主体传了e；具体的函数就不需要再解决e的兼容了； 89 | i++; 90 | }else{ 91 | /*如果是空的，删掉；不删也是可以的*/ 92 | a.splice(i,1); 93 | } 94 | } 95 | } -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/2、完善事件方案on-run-off.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 |
12 | 朱安邦的博客 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/3、模块化开发拖拽效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 |
logo
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/5、理解设计模式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/6、完善tween+drag+tween/drag.js: -------------------------------------------------------------------------------- 1 | function down(e){//把down发布为一个事件；让别人能够约定的标识符； 2 | //识别符："selfDragStart" ; 3 | this.x=this.offsetLeft; 4 | this.y=this.offsetTop; 5 | this.mouseX= e.pageX; 6 | this.mouseY= e.pageY; 7 | console.log("offsetLeft;offsetTop+e.pageX+e.pageY"+this.x+"==>"+this.y+"==>"+this.mouseX+"==>"+this.mouseY); 8 | if(this.setCapture){ 9 | this.setCapture(); 10 | on(this,"mousemove",move); 11 | on(this,"mouseup",up); 12 | }else{ 13 | this._move=bindThis(this,move); 14 | this._up=bindThis(this,up); 15 | on(document,"mousemove",this._move); 16 | on(document,"mouseup",this._up); 17 | } 18 | e.preventDefault();//阻止默认行为，解决盒子因为加了图片，站住鼠标的BUG； 19 | fire.call(this,"selfDragStart",e);//这个是接口； 20 | } 21 | function move(e){ 22 | this.style.left=this.x+ (e.pageX-this.mouseX)+"px"; 23 | this.style.top=this.y+ (e.pageY-this.mouseY)+"px"; 24 | fire.call(this,"selfDragMove",e);//这个是接口； 25 | } 26 | function up(e){ 27 | if(this.releaseCapture){ 28 | this.releaseCapture(); 29 | off(this,"mousemove",move); 30 | off(this,"mouseup",up); 31 | }else{ 32 | off(document,"mousemove",this._move); 33 | off(document,"mouseup",this._up); 34 | } 35 | fire.call(this,"selfDragEnd",e);//这个是接口； 36 | } -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/6、完善tween+drag+tween/event.js: -------------------------------------------------------------------------------- 1 | /*on:是负责往数组里安排一个队列的，程序池*/ 2 | function on(ele,type,fn){ 3 | /*约定type如果以self开头的字符串，就是自定义事件，如果不是的，就是系统的事件*/ 4 | if(/^self/.test(type)){//判断是否是自定义事件，这里是自定义事件； 5 | if(!ele[type]){ 6 | ele[type]=[]; 7 | } 8 | var aryEvent=ele[type]; 9 | for(var i=0;i 2 | 3 | 4 | 5 | 闭包的拖拽 6 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/8、闭包风格的拖拽/index-3面向对象的拖拽.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 闭包的拖拽 6 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/8、闭包风格的拖拽/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 闭包的拖拽 6 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /DOM2/DOM2事件/3、事件和观察者模式/event3.js: -------------------------------------------------------------------------------- 1 | /*on:是负责往数组里安排一个队列的，程序池*/ 2 | function on(ele,type,fn){ 3 | if(ele.addEventListener){ 4 | ele.addEventListener(type,fn); 5 | }else{ 6 | if(!ele["aEvent"+type]){ 7 | ele["aEvent"+type]=[]; 8 | //bind3(ele,type,run);//只会执行一次,防止重复绑定；上一次封装的事件库是用bind解决的 9 | ele.attachEvent("on"+type,function(){run.call(ele)})//放在这里，因为是在if里，所以是有条件执行的，而且这里是只执行一次；防止重复绑定； 10 | } 11 | var aryEvent=ele["aEvent"+type]; 12 | for(var i=0;i 24 | 25 | 26 | Example 27 | 28 | 29 |

hello word!

30 | 31 | 32 | 33 | ![](http://i.imgur.com/ad9Z3gH.png) 34 | 图片引自高程三； 35 | 36 | 从 document 开始依序向前，访问的第一个节点是 document ，访问的最后一个节点是包含"world!" 的文本节点。从文档最后的文本节点开始，遍历可以反向移动到 DOM 树的顶端。此时，访问的第一个节点是包含 "Hello" 的文本节点，访问的最后一个节点是 document 节点,** NodeIterator 和 TreeWalker 都以这种方式执行遍历**。 37 | 38 | # NodeIterator 39 | 40 | # TreeWalker 41 | 42 | -------------------------------------------------------------------------------- /DOM2/JS操作CSS/1、返回顶部的案例/README.md: -------------------------------------------------------------------------------- 1 | #返回顶部的案例 2 | 3 | 返回顶部的原理： 4 | 5 | 1、当页面在第一屏的时候，返回顶部的按钮是隐藏的；这个时候直接用display:none就可以了；当鼠标滚动到下一屏的时候，返回顶部的按钮会显示出来，把display设置为block； 6 | 7 | 2、当返回顶部的按钮显示的时候，点击或返回顶部；这个时候，需要把display设置为隐藏；然后让scrollTop不断的减数组； 8 | 9 | 后续再动画的文件夹内，优化成以减速度返回顶部； -------------------------------------------------------------------------------- /DOM2/JS操作CSS/1、返回顶部的案例/toTop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 31 | 32 | 33 |
34 | 61 | 62 | -------------------------------------------------------------------------------- /DOM2/JS操作CSS/2、单张静态图片延迟加载/README.md: -------------------------------------------------------------------------------- 1 | #单张静态图片延迟加载 2 | 图片延迟加载： 3 | 静态资源图片的延迟加载(一般是网站上固定的大图，为了不影响第一次加载页面的速度，我们需要把这张大图延迟加载) 4 | 5 | 开始的时候，我们给当前大图所在的位置的div加一个默认的背景图(要求小，起到占位的作用) 6 | 7 | 等过XX毫秒后，再进行加载；因为这个时候，别的资源都加载的差不多了；而且图片慢慢的显示出来，网页有动起来的感觉 8 | 9 | **相关知识点** 10 | 11 | 1、用setTimeout循环创建定时器产生的累加的问题：在每一次执行方法的时候，第一步首先把之前创建的定时器清除掉; 12 | 13 | 2、在设置定时器的时候，如果一个匿名函数里面又包含了一个小的函数执行，然而小函数执行要用到匿名函数的上级作用域的东西，这样匿名函数作用域不销毁，性能不好; 14 | -------------------------------------------------------------------------------- /DOM2/JS操作CSS/2、单张静态图片延迟加载/静态图片延迟加载.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 静态图片的延迟加载 6 | 37 | 38 | 39 |
40 | 85 | 86 | -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/README.md: -------------------------------------------------------------------------------- 1 | #调用后台数据进行图片延迟加载 2 | 综合应用返回顶部的和静态图片延迟加载的； 3 | 4 | 创建文档碎片，调用后台的JSON文件，动态创建出来的多图片延迟加载； -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/1.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/10.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/2.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/3.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/4.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/5.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/6.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/7.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/8.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/9.jpg -------------------------------------------------------------------------------- /DOM2/JS操作CSS/3、多张图片延迟加载/img/ddd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/DOM2/JS操作CSS/3、多张图片延迟加载/img/ddd.jpg -------------------------------------------------------------------------------- /DOM操作和封装DOM库/DOM操作.md: -------------------------------------------------------------------------------- 1 | # DOM操作 2 | 3 | -------------------------------------------------------------------------------- /JSON/JSON语法.md: -------------------------------------------------------------------------------- 1 | **JSON语法** 2 | 3 | JSON 的语法可以表示以下三种类型的值。 4 | 5 | - 简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null 。但 JSON 不支持 JavaScript 中的特殊值 undefined 。 6 | - 对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。 7 | - 数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。 8 | 9 | ** JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，虽然与 JavaScript 中表示数据的某些语法相同，但它并不局限于JavaScript 的范畴。** 10 | 11 | # 简单值 (JSON 字符串必须使用双引号) 12 | 13 | 最简单的 JSON 数据形式就是简单值。 14 | 15 | 如下： 16 | 17 | "hello word" 18 | 2222222 19 | 20 | 上面两个都是简单的JSON； 21 | 22 | 23 | JavaScript字符串 与 JSON字符串的最大区别在于，JSON 字符串必须使用双引号（单引号会导致语法错误）。 24 | 25 | 布尔值和 null 也是有效的 JSON 形式。 26 | 27 | 但是，在实际应用中，JSON 更多地用来表示更复杂的数据结构，而简单值只是整个数据结构中的一部分。在接口中，用来存储键的值； 28 | 29 | # 对象 (对象的属性名必须加双引号) 30 | 31 | **JavaScript对象** 32 | 33 | var person1 = { 34 | name: "person name", 35 | age: 29 36 | }; 37 | var person2 = { 38 | "name": "person name", 39 | "age": 29 40 | }; 41 | 42 | 上面两种方式都可以的； 43 | 44 | **JSON** 45 | 46 | { 47 | "name": "person name", 48 | "age": 29 49 | } 50 | 51 | 与 JavaScript 的对象字面量相比，JSON 对象有两个地方不一样。 52 | 53 | - 1，没有声明变量（JSON 中没有变量的概念）。 54 | - 2，没有末尾的分号（因为这不是 JavaScript 语句，所以不需要分号）。 55 | 56 | 再说一遍，**对象的属性必须加双引号，这在 JSON 中是必需的**。**属性的值可以是简单值，也可以是复杂类型值**，因此可以像下面这样在对象中嵌入对象 57 | 58 | { 59 | "name": "person name", 60 | "age": 29, 61 | "address": { 62 | "name":"详细地址" 63 | "city": "杭州市", 64 | "location": "文一西路XX号" 65 | } 66 | } 67 | 68 | 这个例子在顶级对象中嵌入了学校（ "address" ）信息。虽然有两个 "name" 属性，但由于它们分别属于不同的对象，因此这样完全没有问题。不过，**同一个对象中绝对不应该出现两个同名属性**。 69 | 70 | 与 JavaScript 不同，**JSON 中对象的属性名任何时候都必须加双引号**。 71 | 72 | **手工编写 JSON 时，忘了给对象属性名加双引号或者把双引号写成单引号都是常见的错误。**,如果需要后台帮忙给数据的时候。假如JSON字符串不能成功转为JSON对象，原因一般都是JSON的数据格式不对； 73 | 74 | # 数组 75 | 76 | **JavaScript 中的数组字面量**： 77 | 78 | var values = [25, "hi", true]; 79 | 80 | **JSON中的数组** 81 | 82 | [25, "hi", true] 83 | 84 | > 注意，JSON 数组也没有变量和分号。 85 | 86 | ##### 把数组和对象结合起来，可以构成更复杂的数据集合 87 | 88 | [ 89 | { 90 | "title": "Professional JavaScript", 91 | "authors": [ 92 | "Nicholas C. Zakas" 93 | ], 94 | edition: 3, 95 | year: 2011 96 | }, 97 | { 98 | "title": "Professional JavaScript", 99 | "authors": [ 100 | "Nicholas C. Zakas" 101 | ], 102 | edition: 2, 103 | year: 2009 104 | }, 105 | { 106 | "title": "Professional Ajax", 107 | "authors": [ 108 | "Nicholas C. Zakas", 109 | "Jeremy McPeak", 110 | "Joe Fawcett" 111 | ], 112 | edition: 2, 113 | year: 2008 114 | }, 115 | { 116 | "title": "Professional Ajax", 117 | "authors": [ 118 | "Nicholas C. Zakas", 119 | "Jeremy McPeak", 120 | "Joe Fawcett" 121 | ], 122 | edition: 1, 123 | year: 2007 124 | }, 125 | { 126 | "title": "Professional JavaScript", 127 | "authors": [ 128 | "Nicholas" 129 | ], 130 | edition: 1, 131 | year: 2006 132 | } 133 | ] 134 | 135 | 这个数组中包含一些表示图书的对象。每个对象都有几个属性，其中一个属性是 "authors" ，这个属性的值又是一个数组。对象和数组通常是 JSON 数据结构的最外层形式（当然，这不是强制规定的），利用它们能够创造出各种各样的数据结构。 -------------------------------------------------------------------------------- /JSON/readme.md: -------------------------------------------------------------------------------- 1 | **JSON** 2 | 3 | JSON(javasctipr object notation)Javascript对象表示法； 4 | 5 | JSON 是 JavaScript 的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据。可以把 JSON 直接传给 eval() ，而且不必创建 DOM 对象。 6 | 7 | 关于 JSON，最重要的是要理解**它是一种数据格式，不是一种编程语言。虽然具有相同的语法形式，但 JSON 并不从属于 JavaScript。而且，并不是只有 JavaScript 才使用 JSON**，毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。 8 | 9 | ** JSON 是一个轻量级的数据格式，可以简化表示复杂数据结构的工作量。JSON 使用 JavaScript 语法的子集表示对象、数组、字符串、数值、布尔值和 null **。 10 | 11 | 即使 XML 也能表示同样复杂的数据结果，但JSON 没有那么烦琐，而且在 JavaScript 中使用更便利。ECMAScript 5 定义了一个原生的 JSON 对象; 12 | 13 | - **JSON.stringify()** 将对象序列化为 JSON 字符串;该方法接收3个参数； 14 | - **JSON.parse()** 将JSON字符串解析为JS对象(JSON对象)；该方法接收2个参数； 15 | 16 | 这两个方法都有一些选项，通过它们可以改变过滤的方式，或者改变序列化的过程。 17 | 18 | 原生的 JSON 对象也得到了很多浏览器的支持，比如 IE8+、Firefox 3.5+、Safari 4+、Opera 10.5 和Chrome -------------------------------------------------------------------------------- /JS高级技巧/readme.md: -------------------------------------------------------------------------------- 1 | JS高级技巧 2 | 3 | JS是一种极其灵活的语言，具有多种使用风格。一般来说，编写 JavaScript 要么使用过程方式，要么使用面向对象方式。然而，由于它天生的动态属性，这种语言还能使用更为复杂和有趣的模式。这些技巧要利用 ECMAScript 的语言特点、BOM扩展和 DOM 功能来获得强大的效果。 -------------------------------------------------------------------------------- /img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/icon.png -------------------------------------------------------------------------------- /img/path1/dataType.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path1/dataType.png -------------------------------------------------------------------------------- /img/path1/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path1/javascript.png -------------------------------------------------------------------------------- /img/path1/typeChange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path1/typeChange.jpg -------------------------------------------------------------------------------- /img/path2/函数名的原理解析.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path2/函数名的原理解析.png -------------------------------------------------------------------------------- /img/path2/函数名的原理解析.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path2/函数名的原理解析.psd -------------------------------------------------------------------------------- /img/path2/原型模式的弊端.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path2/原型模式的弊端.png -------------------------------------------------------------------------------- /img/path2/原型模式的弊端.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/path2/原型模式的弊端.psd -------------------------------------------------------------------------------- /img/作用域链查找.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/作用域链查找.jpg -------------------------------------------------------------------------------- /img/作用域链查找.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/作用域链查找.psd -------------------------------------------------------------------------------- /img/构造函数的原型.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/构造函数的原型.jpg -------------------------------------------------------------------------------- /img/构造函数的原型.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/构造函数的原型.psd -------------------------------------------------------------------------------- /img/继承-原型继承原理.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/继承-原型继承原理.png -------------------------------------------------------------------------------- /img/继承-原型继承原理.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/继承-原型继承原理.psd -------------------------------------------------------------------------------- /img/预解释分析.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/预解释分析.jpg -------------------------------------------------------------------------------- /img/预解释分析.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/img/预解释分析.psd -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/index.js -------------------------------------------------------------------------------- /test-file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 10 | 11 |
this is die one
12 | 13 | 14 | 27 | 28 | -------------------------------------------------------------------------------- /test.css: -------------------------------------------------------------------------------- 1 | { display: none; /* 不占据空间，无法点击 */ } 2 | { visibility: hidden; /* 占据空间，无法点击 */ } 3 | { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } 4 | { position: relative; top: -999em; /* 占据空间，无法点击 */ } 5 | { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 6 | { height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 7 | { opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 8 | { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ } 9 | { 10 | zoom: 0.001; 11 | -moz-transform: scale(0); 12 | -webkit-transform: scale(0); 13 | -o-transform: scale(0); 14 | transform: scale(0); 15 | /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 16 | } 17 | /********************************************************************************/ 18 | { 19 | position: absolute; 20 | zoom: 0.001; 21 | -moz-transform: scale(0); 22 | -webkit-transform: scale(0); 23 | -o-transform: scale(0); 24 | transform: scale(0); 25 | /* 不占据空间，无法点击 */ 26 | } -------------------------------------------------------------------------------- /函数初识/1.函数定义.js: -------------------------------------------------------------------------------- 1 | //function语句的定义方法 2 | function test1(arg1,arg2){ 3 | console.log("function语句的定义方法:",arg1+arg2); 4 | } 5 | 6 | //函数直接量的定义方法 7 | var test2 = function(arg1,arg2){ 8 | console.log("函数直接量的定义方法:",arg1+arg2); 9 | }; 10 | var utility={ 11 | init:function () { 12 | console.log("执行") 13 | } 14 | }; 15 | 16 | //构造函数的定义方法 17 | var test3 = new Function("arg1","arg2","console.log('构造函数的定义方法:',arg1+arg2)"); -------------------------------------------------------------------------------- /函数初识/2.toString.js: -------------------------------------------------------------------------------- 1 | console.log(test1.toString()); 2 | 3 | function test1(){ 4 | console.log("最开始的调用方法"); 5 | } -------------------------------------------------------------------------------- /前端开发初识/1.开发环境介绍.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 |

编辑器：webstorm/vscode

10 |

浏览器：chrome

11 |
12 | 15 | 16 | -------------------------------------------------------------------------------- /前端开发初识/10.数据类型.js: -------------------------------------------------------------------------------- 1 | console.log("22");//string 字符串 2 | console.log(22);//number 数字类型 3 | console.log(true);//boolean 布尔 英文考试了 T / F 4 | 5 | console.log(undefined); 6 | console.log(null); 7 | console.log({}); 8 | console.log(function () {}); -------------------------------------------------------------------------------- /前端开发初识/11.数据类型判断.js: -------------------------------------------------------------------------------- 1 | // 数据类型的判断 2 | console.log("-------下面是typeof判断"); 3 | console.log(typeof "22");//string 字符串 4 | console.log(typeof 22);//number 数字类型 5 | console.log(typeof true);//boolean 布尔 英文考试了 T / F 6 | 7 | console.log(typeof undefined);//undefined 8 | console.log(typeof null);//Object 9 | console.log(typeof {});//Object 10 | console.log(typeof function () {});//function 11 | 12 | // 区别 13 | console.log("-------下面是区别"); 14 | console.log(typeof "undefined");//string 字符串 15 | console.log(typeof "true"); //string 字符串 16 | console.log(typeof "null"); //string 字符串 17 | console.log(typeof "{}"); //string 字符串 18 | console.log(typeof "function () {}");//string 字符串 19 | -------------------------------------------------------------------------------- /前端开发初识/12.变量的类型可以被随时改变.js: -------------------------------------------------------------------------------- 1 | //变量的类型改变 2 | var china="中国";//string类型里的一个份子， 3 | console.log(china,typeof china); 4 | 5 | china=22; 6 | console.log(china,typeof china); 7 | 8 | china=true; 9 | console.log(china,typeof china); 10 | 11 | china=22; 12 | console.log(china,typeof china); 13 | 14 | console.log(china,typeof china); 15 | 16 | console.log(china,typeof china); 17 | 18 | console.log(china,typeof china); 19 | 20 | console.log(china,typeof china); 21 | 22 | 23 | //不推荐一个变量，用于多种用途； 24 | var total=0; //用来储存金额统计; 25 | var timer=null; //用来储存定时器 -------------------------------------------------------------------------------- /前端开发初识/13.console.js: -------------------------------------------------------------------------------- 1 | console.time("hahaha"); 2 | // alert("22222"); 3 | console.log("info","haha"); 4 | console.log("info2"+"haha2"); 5 | 6 | console.warn("这是一段警告信息"); 7 | console.error("出错啦，你的配置信息有误"); 8 | 9 | // alert(typeof "22"); 10 | 11 | // 断言 12 | 13 | var a=1; 14 | var b=2; 15 | //= == 16 | //= 这是用来赋值的; 17 | //== 这个是用来判断的 18 | console.assert(a===1,"这时候条件是a==1,实际a是1"); 19 | console.assert(b===1,"这时候条件是b==1，实际b是2"); 20 | 21 | //性能分析； 22 | console.timeEnd("hahaha");//6.50390625ms 23 | 24 | // console.dir(window); -------------------------------------------------------------------------------- /前端开发初识/2.HTML标签介绍.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 浏览器的标题头11 9 | 10 | 11 |
这是DIV标签
12 |

这是p标签1

13 |
14 |
15 |
16 |

这是p标签2

17 | 百度一下，你就知道 18 |
19 |
20 | 百度一下，你就知道2 21 |
22 |

ddasdasdasdasdasdasd

23 |

ddasdasdasdasdasdasd

24 |
25 |

ddasdasdasdasdasdasd

26 |
    27 |
  • 1
    • 28 |
  • 2
    • 29 |
  • 3
    • 30 |
  • 4
    • 31 |
  • 5
    • 32 |
33 |

222

34 |
    35 |
  1. 1
    2. 36 |
  2. 222
    3. 37 |
  3. 333
    4. 38 |
  4. 444
    5. 39 |
40 | 这是百度的图片 41 | 42 |

这是h1

43 |

这是h2

44 |

这是h3

45 |

这是h4

46 |
这是h5
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
123
123
59 | 60 | 61 | -------------------------------------------------------------------------------- /前端开发初识/3.HTML标签的全局属性.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 20 | 21 | 22 |
1
23 |
3
24 |
4
25 |
5
26 |
5
27 | 28 |

22222

29 |

22222

30 |
这是DIV1的内容
31 |
222
32 | 这是span 33 | 34 | 百度一下 35 | 36 |

dads

37 |
    38 |
  • 39 | ddd 40 |
    • 41 |
42 | 53 | 54 | -------------------------------------------------------------------------------- /前端开发初识/4.JS由哪些部分组成.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Title 10 | 11 | 12 |
这是DIV的内容
13 | 14 | 15 | 48 | 49 | -------------------------------------------------------------------------------- /前端开发初识/5.HTML中怎么写JS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Document 9 | 19 | 20 | 21 | 22 |
这是一段信息;这是百度的连接
23 | 24 |
25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /前端开发初识/6.HTML中怎么写CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
this is div span
41 |
2
42 |
3
43 |
4
44 |
5
45 |
5
46 | 47 | 48 | 49 |

这是高亮的

50 |
    51 |
  • 001
    • 52 |
  • 002
    • 53 |
  • 003
    • 54 |
  • 004
    • 55 |
  • 004
    • 56 |
  • 004
    • 57 |
  • 004
    • 58 |
  • 004
    • 59 |
  • 004
    • 60 |
  • 004
    • 61 |
  • 004
    • 62 |
  • 004
    • 63 |
64 |
    65 |
  1. 111
    2. 66 |
  2. 222
    3. 67 |
  3. 333
    4. 68 |
  4. 444
    5. 69 |
70 |

你确定提交修改的信息吗？

71 | 72 | -------------------------------------------------------------------------------- /前端开发初识/6.HTML中怎么写CSS2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 | 14 | 15 |

这是高亮的

16 |

这是警告信息

17 | 18 | -------------------------------------------------------------------------------- /前端开发初识/7.noscript标签引申的2种编程思想.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |

这是一段文字

9 | 10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /前端开发初识/8.CSS3中两种方案.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 28 | 29 | 30 |
这是DIV1
31 |
32 |
33 |
34 |
这是DIV2
35 | 36 | -------------------------------------------------------------------------------- /前端开发初识/9.变量的定义和赋值.js: -------------------------------------------------------------------------------- 1 | // tb='淘宝'; 2 | 3 | var jd="京东商城"; 4 | // var z="亚马逊';// 双引号" 和单引号' 不能混合使用 5 | var xx; 6 | /* 7 | * var variable 变量 let const 声明变量的关键字； 8 | * tb 这是变量名 9 | * = 这是操作符 10 | * "京东商城" 这个是数据 11 | * 12 | * 把"京东商城"，这段数据，通过=来赋值给jd这个变量名； 13 | * */ 14 | console.log(jd); 15 | console.log(xx);//undefined 16 | // console.log(tb); 17 | 18 | //"京东商城" 字符串"" 和 '' 包裹的内容 属于字符串类型 -------------------------------------------------------------------------------- /前端开发初识/src/btn.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var oDiv2=document.getElementById("btn2"); 4 | oDiv2.onclick=function () { 5 | alert("这是外联时的写法；") 6 | }; -------------------------------------------------------------------------------- /前端开发初识/wui/color.css: -------------------------------------------------------------------------------- 1 | /* 这是一行中文的注视信息 */ 2 | .warning{ 3 | color: orange; 4 | } -------------------------------------------------------------------------------- /动画与定时器的应用/README.md: -------------------------------------------------------------------------------- 1 | #动画部分 2 | 3 | 最动画要做绝对定位,写left，写top；定好位置； 4 | 5 | 动画主要是从5个方向改变： 6 | 7 | 8 | - 宽度 （width） 9 | - 高度 （height） 10 | - 水平 （left） 11 | - 垂直 （top） 12 | - 透明度 （opacity） 13 | 14 | JS写动画，主要是学逻辑关系，深入研究闭包作用域；并不是完全用JS写动画。CSS3做这个会更好； 15 | 16 | #同步和异步编程 17 | 18 | js是单线程的编程方法； 19 | 20 | - 同步：上面事情等待，在此期间我要一直等,只有这件事做完才能做下件事情 21 | - 异步：模拟多线程，上面的事情正在等待中，我们不需要等它，继续做下面的事情，当下面的事情做完了，然后我们发现上面的事情也等待完成了，在执行上面的事情 22 | 23 | 同步编程的例子： 24 | > 25 | function fn() { 26 | for (var i = 0; i < 1000; i++) { 27 | } 28 | console.log(i);//只有循环完成才能输出i 29 | return i; 30 | } 31 | var c = fn(); 32 | console.log(c);//只有fn执行完成后才会输出c 33 | 34 | 异步编程例子： 35 | > 1、所有的事件绑定都是异步编程 36 | oDiv.onclick=function(){} 37 | window.onload=function(){} 38 | console.log(100); 39 | > 40 | 2、定时器都是异步编程 41 | 定时器的等待时间是有最小值的 每个浏览器都有一个最小值，即使你写的是0，也不是立即执行；定时器和别的代码是两个频道的。异步执行；作用域和预解释的时候有总结过； 42 | var num = 12; 43 | window.setTimeout(function () { 44 | num++; 45 | console.log(num); 46 | }, 5); 47 | for (var i = 0; i < 10000; i++) {//这个循环时间肯定大于5ms，但是也是先从上倒下执行，只有下面的代码都执行完成，才会返回头看定时器是否到时间，到了在执行定时器里面的 48 | } 49 | console.log(num); 50 | //先输出12然后在输出13;说明是先执行完for循环和后面的打印；然后才切到定时器的执行的； 51 | 52 | 动画中的几部分: 53 | 54 | 1. 开始位置、结束位置、总距离；（总距离=结束位置-开始位置） 55 | 1. 总运动时间、定时器间隔时间 、步长 ；（步长=(总距离/总运动时间)*定时器间隔时间） 56 | 1. 运动的方式:匀速、减速、加速、变速 57 | -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/1、基础思路/基础框架思路.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tween动画的基础支持 6 | 22 | 23 | 24 |
朱安邦
25 | 26 | 27 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/1、基础思路/基础框架思路去耦合-优化1-透明度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tween动画的基础支持 6 | 24 | 25 | 26 |
朱安邦
27 | 28 | 29 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/1、基础思路/基础框架思路去耦合.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tween动画的基础支持 6 | 22 | 23 | 24 |
JavaScript
25 | 26 | 27 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/README.md: -------------------------------------------------------------------------------- 1 | #tween动画 2 | 3 | 动画中的几部分: 4 | 5 | 1. 开始位置、结束位置、总距离；（总距离=结束位置-开始位置） 6 | 1. 总运动时间、定时器间隔时间 、步长 ；（步长=(总距离/总运动时间)*定时器间隔时间） 7 | 1. 运动的方式:匀速、减速、加速、变速 8 | 9 | 10 | 动画需要的参数 11 | 12 | - 起始位置：begin； 13 | - 终点位置：target； 14 | - 一共需要移动的距离：change 15 | - 当前走的时间：times 16 | - 所需的总时间：duration 17 | - 单步间隔时间：interval 18 | 19 | 直线的公式 20 | - 21 | - 当前的位置=起始位置+总距离*（当前走的步数/所需要走的步数） 22 | - 当前的位置=起始位置+总距离*（当前走的时间/所需要走的时间） 23 | - 当前的位置=begin+change*(times/duration) 24 | 25 | interval:运动是一步一步走的，也就是单步时间，可以通过控制单步的时间，来控制运动的效果；时间要求的短，步子就要迈大点，时间要求的长，就走小碎步 26 | 27 | 28 | > /*动画的初始条件*/ 29 | var begin=oDiv.offsetLeft;//起点 30 | var target=600; 31 | var change=target-begin;//总的移动距离=目的地-其实的位置; 32 | var times=0; 33 | var duration=1000;//总的时间； 34 | var nInterval=13;//一步走多少；步长； -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/百叶窗/img/zhume.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anbang/javascript-notes/8912f7efb4456064456079caa5fdfc573e0109bd/动画与定时器的应用/twenn动画/百叶窗/img/zhume.jpg -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/百叶窗/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 百叶窗效果的布局 6 | 19 | 20 | 21 | 图片 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /动画与定时器的应用/twenn动画/百叶窗/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 百叶窗效果 6 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /动画与定时器的应用/基础动画库以动画原理/README.md: -------------------------------------------------------------------------------- 1 | #基础动画库以动画原理 2 | 3 | 最动画要做绝对定位,写left，写top；定好位置； 4 | 5 | 动画主要是从5个方向改变： 6 | 7 | 8 | - 宽度 （width） 9 | - 高度 （height） 10 | - 水平 （left） 11 | - 垂直 （top） 12 | - 透明度 （opacity） 13 | 14 | JS写动画，主要是学逻辑关系，深入研究闭包作用域；并不是完全用JS写动画。CSS3做这个会更好； 15 | 16 | this关键字： 17 | 18 | this是谁，和在哪儿定义没有关系，只和在哪儿执行有关系，看它的执行主体是谁；自执行函数是在window，所以this是window； 19 | 20 | （只有执行的时候才能知道this是谁；） 21 | 22 | 动画要考虑临界值的问题；每走一步之前先做判断，判断当前的位置+步长，是否大于等于目标值；如果大于等于目标值；则停在目标值上； 23 | 24 | 定时器的清理；定时器开启之前要记得清理，这样可以避免作用域累计；示例代码如下 25 | 26 | 27 | > clearTimeout(timer);//timer里储存的是定时器的序列号，1,2,3,4,5,6,7,8,9之类的；代表某个定时器；清除的就是定时器的序列号； 28 | > //没开一次定时器，就会产生一个定时器的序列号； 29 | > 30 | var cur=getCss(ele,"left"); 31 | if(cur=target){//临界值的判断； 33 | ele.style.left=target+"px"; 34 | }else{ 35 | ele.style.left=getCss(ele,"left")+11+"px"; 36 | } 37 | timer=window.setTimeout(function(){move(ele,target)},30) 38 | 39 | 40 | 41 | - 如果当前起始的位置小于我们的目标值的话，我们需要往右走，如果当前起始的位置大于我们的目标值的话，往左走，相等的话不走 42 | - 不管方向，都需要做临界判断,为了保障临界点的准确性，需要在判断的时候加上我们的步长 43 | 44 | 45 | 动画中的几部分: 46 | 47 | 1. 开始位置、结束位置、总距离；（总距离=结束位置-开始位置） 48 | 1. 总运动时间、定时器间隔时间 、步长 ；（步长=(总距离/总运动时间)*定时器间隔时间） 49 | 1. 运动的方式:匀速、减速、加速、变速 -------------------------------------------------------------------------------- /动画与定时器的应用/基础动画库以动画原理/move1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 从左向右运动 6 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /动画与定时器的应用/基础动画库以动画原理/move2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 从右向左运动 6 | 16 | 17 | 18 |
19 |
    20 |
  • 左
    • 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /动画与定时器的应用/基础动画库以动画原理/move3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 从右向左运动 6 | 16 | 17 | 18 |
19 |
    20 |
  • 左
    • 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /动画与定时器的应用/基础动画库以动画原理/move4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 从右向左运动 6 | 16 | 17 | 18 |
19 |
    20 |
  • 左
    • 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /动画与定时器的应用/封装动画库/README.md: -------------------------------------------------------------------------------- 1 | #封装动画库 2 | 其实这不应该叫库，因为只有一个方法； 3 | 借用了以前封装[DOM库](https://github.com/Broszhu/My-JavaScript-is-a-clover/tree/master/DOM/%E5%B0%81%E8%A3%85DOM%E5%BA%93)中的setCss方法来设置的； 4 | 5 | - 因为经常设置的，是 6 | - 宽度 7 | - 高度 8 | - 距离左边位置 9 | - 透明度 10 | - 背景颜色 11 | 12 | 等这些的项；封装一个starMove的方法来处理这些； 13 | 14 | startMove(ele, json, fnEnd){}; 15 | 16 | 的其中ele，代表的是执行主体；json代表需要改变的样式，是一个json格式的对象；后面的fnEnd代表是回调函数；在事件发生的时候，同时回调一个函数； 17 | 18 | 动画库里面moveType 中是数学运算是网上搜的，并不是自己写的； 19 | -------------------------------------------------------------------------------- /动画与定时器的应用/封装动画库/starMove方法-优化2.js: -------------------------------------------------------------------------------- 1 | function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串,也可以是对象格式； 2 | var MAX=18;//如果是匀速运动，可以通过这个数控制匀速；如果是变速运动，则不需要这一行； 3 | clearInterval(ele.timer); 4 | ele.timer=setInterval(function (){ 5 | var booleanTarget=true; 6 | for(var name in json) {//枚举JSON里面的属性和目标值； 7 | var iTarget=json[name];//目标值； 8 | if(name=='opacity') {//透明度因为要写兼容性处理,2种写法，所以opacity需要X100； 9 | var cur=Math.round(parseFloat(setCss(ele, name))*100); 10 | } else if(name=='background'){ 11 | var cur=json[name]; 12 | } else { 13 | var cur=parseInt(setCss(ele, name));//对象的初始值； 14 | } 15 | var speed=(iTarget-cur)/5;//速度=(目标值-初始值)/一个数，属于减速运动； 16 | speed=speed>0?Math.ceil(speed):Math.floor(speed);//减速运动的，速度的取整； 17 | if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速，可以通过这个来控制速度；和上面的speed只能取一个计算； 18 | 19 | if(name=='opacity') {//如果输入透明度，需要为80这种的，不能是0.8 20 | ele.style.filter='alpha(opacity:'+(cur+speed)+')'; 21 | ele.style.opacity=(cur+speed)/100; 22 | }else if(name=='background'){ 23 | ele.style[name]=cur; 24 | } else { 25 | ele.style[name]=cur+speed+'px'; 26 | } 27 | if(cur!=iTarget) { 28 | booleanTarget=false; 29 | } 30 | } 31 | if(booleanTarget) { 32 | clearInterval(ele.timer); 33 | if(typeof fnEnd==="function") { 34 | fnEnd(); 35 | } 36 | } 37 | }, 20); 38 | }; 39 | 40 | function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 41 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 42 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 43 | var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 44 | return !reg.test(attr) ? parseFloat(value) : value; 45 | } else{ 46 | switch (attr) { 47 | case "opacity": 48 | curEle["style"][attr] = value; 49 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 50 | break; 51 | case "float": 52 | curEle["style"].cssFloat = value; 53 | curEle["style"].styleFloat = value; 54 | break; 55 | case "backgroundColor": 56 | curEle["style"][attr] = value; 57 | break; 58 | case "zIndex": 59 | curEle["style"][attr] = value; 60 | break; 61 | default: 62 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /动画与定时器的应用/封装动画库/starMove方法.js: -------------------------------------------------------------------------------- 1 | function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串,也可以是对象格式； 2 | var MAX=18;//如果是匀速运动，可以通过这个数控制匀速；如果是变速运动，则不需要这一行； 3 | clearInterval(ele.timer); 4 | ele.timer=setInterval(function (){ 5 | var booleanTarget=true; 6 | for(var name in json) {//枚举JSON里面的属性和目标值； 7 | var iTarget=json[name];//目标值； 8 | if(name=='opacity') {//透明度因为要写兼容性处理,2种写法，所以opacity需要X100； 9 | var cur=Math.round(parseFloat(setCss(ele, name))*100); 10 | } else if(name=='background'){ 11 | var cur=json[name]; 12 | } else { 13 | var cur=parseInt(setCss(ele, name));//对象的初始值； 14 | } 15 | var speed=(iTarget-cur)/5;//速度=(目标值-初始值)/一个数，属于减速运动； 16 | speed=speed>0?Math.ceil(speed):Math.floor(speed);//减速运动的，速度的取整； 17 | if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速，可以通过这个来控制速度；和上面的speed只能取一个计算； 18 | 19 | if(name=='opacity') {//如果输入透明度，需要为80这种的，不能是0.8 20 | ele.style.filter='alpha(opacity:'+(cur+speed)+')'; 21 | ele.style.opacity=(cur+speed)/100; 22 | }else if(name=='background'){ 23 | ele.style[name]=cur; 24 | } else { 25 | ele.style[name]=cur+speed+'px'; 26 | } 27 | if(cur!=iTarget) { 28 | booleanTarget=false; 29 | } 30 | } 31 | if(booleanTarget) { 32 | clearInterval(ele.timer); 33 | if(typeof fnEnd==="function") { 34 | fnEnd(); 35 | } 36 | } 37 | }, 20); 38 | }; 39 | 40 | function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写； 41 | if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css； 42 | var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/; 43 | var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]; 44 | return !reg.test(attr) ? parseFloat(value) : value; 45 | } else{ 46 | switch (attr) { 47 | case "opacity": 48 | curEle["style"][attr] = value; 49 | curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")"; 50 | break; 51 | case "float": 52 | curEle["style"].cssFloat = value; 53 | curEle["style"].styleFloat = value; 54 | break; 55 | case "backgroundColor": 56 | curEle["style"][attr] = value; 57 | break; 58 | case "zIndex": 59 | curEle["style"][attr] = value; 60 | break; 61 | default: 62 | curEle["style"][attr] = !isNaN(value) ? value += "px" : value; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /动画与定时器的应用/封装动画库/封装简单动画库.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 动画移动 6 | 18 | 19 | 20 |
ClickMe ComeOn
21 | 22 | 23 | -------------------------------------------------------------------------------- /变量声明和原理/1.var.js: -------------------------------------------------------------------------------- 1 | var name="朱安邦", 2 | gender; 3 | console.log(name,typeof name); //朱安邦 string 4 | console.log(gender,typeof gender); //undefined "undefined" -------------------------------------------------------------------------------- /变量声明和原理/2.const和let.js: -------------------------------------------------------------------------------- 1 | const myName="zhu"; 2 | let age=2; 3 | age =22; 4 | // myName=4;//Error 5 | console.log(age); -------------------------------------------------------------------------------- /变量声明和原理/3.let和var.js: -------------------------------------------------------------------------------- 1 | if(true){ 2 | var a=2; 3 | } 4 | if(true){ 5 | let b=3; 6 | } 7 | console.log(a); 8 | console.log(b);//b is not defined -------------------------------------------------------------------------------- /变量声明和原理/数据储存原理.js: -------------------------------------------------------------------------------- 1 | //基本类型 2 | var a=2; 3 | var b=a; 4 | a.aaa="adjklasjdk"; 5 | console.log(a.aaa); 6 | console.log(a,b);//2 2 7 | b=4; 8 | console.log(a,b);//2 4 9 | 10 | 11 | //引用数据类型； 12 | var oDemo1={ 13 | name:"zhu", 14 | say:"hello" 15 | }; 16 | var oDemo2=oDemo1; 17 | console.log(oDemo1);//{name: "zhu", say: "hello"} 18 | console.log(oDemo2);//{name: "zhu", say: "hello"} 19 | 20 | oDemo2.name="changeName";//这个时候修改，其实已经把oDemo1的数据给修改了 21 | console.log(oDemo1);//{name: "changeName", say: "hello"} 22 | console.log(oDemo2);//{name: "changeName", say: "hello"} 23 | 24 | oDemo1.hahahahahah="ddddddd"; 25 | console.log(oDemo1);//{name: "changeName", say: "hello", hahahahahah: "ddddddd"} 26 | console.log(oDemo2);//{name: "changeName", say: "hello", hahahahahah: "ddddddd"} 27 | 28 | 29 | var sy=Symbol();//sy是Symbol的一个实例； 30 | console.log(sy.__proto__); 31 | sy.aaa="hahah"; 32 | console.log(sy.aaa); 33 | 34 | 35 | // 36 | var oDemo3={ 37 | name:"zhu", 38 | say:"hello" 39 | }; 40 | var oDemo4=oDemo3;//AAA 41 | console.log("---------------------"); 42 | console.log(oDemo3); 43 | console.log(oDemo4); 44 | oDemo4={name:"changeName"};//把{name:"changeName"} 对应的堆内存地址赋值给oDemo4 BBB 45 | console.log(oDemo3);//{name: "zhu", say: "hello"} 46 | console.log(oDemo4);//{name: "changeName"} 47 | 48 | var sourcesDate={ 49 | date:[ 50 | { 51 | pro:"浙江省", 52 | city:"杭州市", 53 | cityCode:"330001", 54 | total:"13.05" 55 | }, 56 | { 57 | pro:"浙江省", 58 | city:"宁波市", 59 | cityCode:"330002", 60 | total:"78.05" 61 | }, 62 | { 63 | pro:"浙江省", 64 | city:"温州市", 65 | cityCode:"330003", 66 | total:"66.05" 67 | } 68 | ] 69 | }; 70 | var beauDate=sourcesDate; 71 | //$.exetend({},sourcesDate); -------------------------------------------------------------------------------- /数据类型初识/0.各种数据类型.js: -------------------------------------------------------------------------------- 1 | console.log(typeof "hello");//console.log()控制台输出内容 2 | console.log(typeof 222);//"number" 3 | console.log(typeof '222');//"string" 4 | console.log(typeof false); 5 | console.log(typeof "false");//这个上面的都是基本数据类型/ 6 | console.log(typeof null);//object//object function 是引用数据类型； 7 | console.log(typeof {}); 8 | console.log(typeof function () {});//function 9 | 10 | //变量是数据的代言人； 11 | var demoStr="hello"; 12 | console.log("-----------------------"); 13 | console.log(typeof demoStr);//string 14 | demoStr=22;//不推荐这么做 ； 15 | console.log(typeof demoStr);//number 16 | 17 | //typeof 总是返回string类型的； typeof() 18 | console.time("123"); 19 | console.log("+++++++++++++++++++++"); 20 | console.log(typeof (typeof "hello")); 21 | console.log(typeof (typeof 222)); 22 | console.log(typeof typeof '222'); 23 | console.log(typeof typeof false); 24 | console.log(typeof typeof "false"); 25 | console.log(typeof typeof null); 26 | console.log(typeof typeof {}); 27 | console.log(typeof typeof function () {}); 28 | console.timeEnd("123"); 29 | 30 | console.assert(1==1,"打脸了"); 31 | 32 | var aloneVal=Symbol(); 33 | console.log(typeof aloneVal);//symbol 存在的意义，避免多人开发时，变量覆盖； -------------------------------------------------------------------------------- /数据类型初识/1.String.js: -------------------------------------------------------------------------------- 1 | //string 单引号'' / 双引号""包裹的内容 2 | /*alert(typeof "22"); 3 | alert(typeof '22'); 4 | alert(typeof ""); 5 | alert(typeof '');*/ 6 | console.log(typeof "22"); 7 | console.log(typeof '2'); 8 | console.log(typeof ''); 9 | console.log(typeof ""); 10 | console.log(typeof "false"); 11 | 12 | console.log(typeof "null"); 13 | 14 | //length,一般作为用户输入店名/用户名的长度限制；需要注意双字符精准度的问题； 15 | var str="123123123123123123123123123123"; 16 | var chinaStr="哈喽";//双字节，不精确 4字节； 17 | console.log(str.length); 18 | console.log(chinaStr.length);//2 19 | 20 | //字符串创建的原理； 21 | var str1="12345";//把"12345"这个字符串赋值给str1这个变量； 22 | str1="1234";//把"1234"这个字符串赋值给str1这个变量； 23 | /* 24 | * 并不是把"12345"修改为"1234"然后赋值给str1 25 | * 26 | * */ 27 | console.log(str1);//"1234" 28 | console.log('1"23\'4\n56\'78'); 29 | // alert("1213123\naaaaaa") 30 | 31 | //toString方法； 32 | //22 - > "22" 33 | console.log(typeof 22); 34 | console.log(typeof (22).toString()); 35 | var testStr=22+"";//隐式调用toString方法 36 | console.log(typeof 22+"");//+ - * / 2*2+10 37 | console.log(typeof testStr);//2*(2+10) 38 | 39 | //eval() 40 | console.log("00000000000000000"); 41 | console.log(eval("22+12"));//"22+12" -> 22+12 ->34 42 | 43 | 44 | // 45 | console.log("**********************"); 46 | console.log(typeof (22+""));//string 22 -> "22" 47 | console.log(typeof (+"22"));//"22" -> 22 单目运算符+ 48 | console.log([1,2,3,4]+"");//1,2,3,4 49 | 50 | console.log("**********************"); 51 | console.log("1.1" + 1.1); 52 | console.log(+"1.1" + 1.1); 53 | console.log((+"1.1") + (+1.1)); -------------------------------------------------------------------------------- /数据类型初识/2.Number.js: -------------------------------------------------------------------------------- 1 | //正数，负数，零，NaN都是属于Number 2 | // ***NaN -> Not a Number不是一个数，但是属于数字类型；** 3 | console.log(typeof 222); 4 | console.log(typeof 222.22); 5 | console.log(typeof -10); 6 | console.log(typeof -10.34); 7 | console.log(typeof 0); 8 | console.log(typeof -0); 9 | 10 | //NaN 11 | console.log((22*"aa"));//NaN number 12 | console.log(typeof (22*"aa"));//number 13 | console.log(22==22);//true 单个等于号是赋值的意思； Invalid left-hand side in assignment 14 | //== 两个等于号才是判断； 15 | console.log((22*"aa")==(22*"bb"));//false 16 | console.log((22*"aa")==22);//false 17 | 18 | //inNaN 19 | console.log(isNaN(22*"aa"));//true (22*"aa")计算出的值不是一个数，对吗？ 对； 20 | console.log(isNaN(22));// 22这个值不是一个数，对吗？ 不对； false (NaN -> Not a Number不是一个数，) 21 | 22 | //number的转换方法； 别的数据类型转为数字类型；(不一定是字符串) 23 | /* 五种 转为数字的； 24 | * +"22" 字符串转为数字； 25 | * "22"-0 26 | * Number() 27 | * parseInt() 28 | * parseFloat() 29 | * */ 30 | console.log("+++++++++++++++++++++++++");//隐式 31 | console.log(+"22");//隐式 32 | console.log(Number("22"));//显式 22 33 | console.log(Number(false));//显式 ->0 34 | console.log(Number(true));//显式 ->1 35 | console.log(Number(null));//显式 -> 0 36 | console.log(Number(undefined));//显式 NaN 37 | console.log(Number({}));//显式 38 | console.log(Number("22.22")); 39 | console.log(Number("22.22a"));//失败了 NaN 40 | 41 | 42 | console.log(parseInt("22.22a"));//22 43 | console.log(parseFloat("22.22a222"));//22.22 44 | console.log(parseFloat("22.22.22"));//22.22 45 | 46 | // + - * / 47 | 48 | console.log(("++++++++")); 49 | console.log(13%10); //13/10 3 多余的3 会被输出 50 | console.log(5%3);//2 51 | 52 | var time=623648364569346563463;//time单位是秒；转为X分X秒； 53 | var minis=parseInt(time/60);//保存是分钟 54 | var second=time%60;//3 55 | var targetVal=minis+"分"+second+"秒"; 56 | 57 | console.log(" minis:"+minis+" second:"+second); 58 | console.log(targetVal); 59 | //小练习： 60 | /* 61 | * var time=623648364569346563463;//time是怎么得到的》当前的服务器时间 - 双11 这个阶段多少秒； 62 | * 是多少天，多少小时，多少分钟，多少秒； 63 | * */ 64 | 65 | 66 | console.log("***********************"); 67 | console.log("22"-1);//"22" -> 22 -> (22-1) -> 21 68 | console.log("22"-0); -------------------------------------------------------------------------------- /数据类型初识/3.Boolean.js: -------------------------------------------------------------------------------- 1 | var a=52; 2 | var b=30; 3 | 4 | function demoBoolean(a, b) { 5 | if (a>b){//2>30 -> false 6 | console.log(a+" 大于 " +b) 7 | }else if(a==b){//2==30 -> false 8 | console.log(a+" 等于 " +b) 9 | }else{ 10 | console.log(a+" 小于 " +b) 11 | } 12 | console.log(a>b); 13 | console.log(a==b); 14 | 15 | 16 | if(null){ 17 | console.warn("条件为真的时候才输出") 18 | }else{ 19 | console.warn("if条件为假的时候才输出") 20 | } 21 | } 22 | 23 | demoBoolean(a,b); 24 | /* 25 | * 如果a>B； ->"a的值"大于"b的值" 26 | * 如果a==B；->"a的值"等于"b的值" 27 | * 如果a"a的值"小于"b的值" 28 | * 29 | * */ 30 | 31 | 32 | /* ................................非常重要。。。。。。。。。。 33 | * 哪些值是false（false本身） 34 | * 数字：0、-0 、NaN、 35 | * 字符串：''（空字符串） 36 | * null 、 37 | * undefined、 38 | * */ 39 | 40 | console.log("---------------------------------"); 41 | console.log(Boolean(0)); //false 42 | console.log(Boolean(-0)); //false 43 | console.log(Boolean(1)); //true 44 | console.log(Boolean(-5)); //true 45 | console.log(Boolean("222"));//true 46 | console.log(Boolean('')); //false 空的字符串 47 | console.log(Boolean(" ")); //true 包含空格的字符串 48 | console.log("---------------------------------"); 49 | console.log(Boolean("0"));//true 50 | console.log(Boolean(null));//false 51 | console.log(Boolean(undefined));//false 52 | console.log(Boolean({}));//true 53 | console.log(Boolean(function () {}));//true 54 | console.log(Boolean(false));//false 55 | console.log("---------------------------------"); 56 | console.log(Boolean(55*"asd"));// NaN false 57 | 58 | 59 | // ! !! 60 | console.log("************************"); 61 | console.log(Boolean(0));//false 62 | console.log(Boolean(!0));//true 63 | console.log(!0);//true 原理: 0 隐式的调用Boolean方法Boolean(0) -> false -> !false ->true 64 | console.log(!!0);// !(!false)->!true ->false 65 | -------------------------------------------------------------------------------- /数据类型初识/4.null和undefined.js: -------------------------------------------------------------------------------- 1 | // var NULL=2; 2 | console.log(typeof null);//object 这是一个空的指针； 3 | console.log(typeof NULL);// NULL- >undefined 4 | 5 | //结果是undefined 除了用在typeof外，会报错； 6 | console.log(undefined*15);//NaN 7 | // console.log(undefined*aa);//aa is not defined 8 | // console.log(NULL+15);//NULL is not defined 相当于NULL 这个变量没有找到； 9 | 10 | // 11 | var js; 12 | console.log(js);//undefined 13 | console.log(typeof undefined);//undefined 14 | console.log(typeof typeof undefined);//string 15 | 16 | 17 | //null和undefined比较 18 | /* 19 | * === 相同比较，首先判断是否是同一个类型；不是的话，直接false； 20 | * == 比较是否相等；(如果是不一样的类型，会转为相同的类型，然后再进比较) 21 | * */ 22 | console.log(null == null);//true 23 | console.log(null == undefined);//true 24 | console.log(undefined == undefined);//true 25 | console.log(undefined === undefined);//true 26 | console.log(null === undefined);//false null->Null undefined -> Undefined 27 | console.log(false == 0);//true false->0 0==0? true 28 | console.log(Number("22") == 22);//true "22"隐士的调用Number->22 -> 22== 22 -> true 29 | 30 | 31 | console.log("---------------------------"); 32 | console.log(null == 1);//false 33 | console.log(null == "2312312");//false 34 | console.log(null == false);//false 35 | console.log(null == 0);//false 36 | console.log(null == "");//false 37 | console.log(null == NaN);//false 38 | 39 | console.log("++++++++++++++++++++++++++"); 40 | console.log(undefined == 1);//false 41 | console.log(undefined == "2312312");//false 42 | console.log(undefined == false);//false 43 | console.log(undefined == 0);//false 44 | console.log(undefined == "");//false 45 | console.log(undefined == NaN);//false 46 | 47 | 48 | //应用场景经常出现在 做定时器的时候； 49 | var timer=null; 50 | 51 | 52 | 53 | // 对象的属性 54 | var oDemo={ 55 | // aaa:"这是oDemo的aaa值" 56 | }; 57 | oDemo.bbb="Hello"; 58 | 59 | console.log(oDemo.aaa);//undefined 60 | console.log(oDemo.bbb);//Hello 61 | 62 | 63 | //ByIn 64 | var oDiv1=document.getElementById("div1"), 65 | oDiv2=document.getElementById("div2"); 66 | console.log(oDiv1); 67 | console.log(oDiv2);//null 68 | 69 | //function 返回值 默认是undefined； 70 | 71 | function demo() { 72 | return; 73 | } 74 | var aDemo=demo(); 75 | console.log(aDemo);//undefined -------------------------------------------------------------------------------- /数据类型初识/5.Object.js: -------------------------------------------------------------------------------- 1 | var num=2; 2 | console.dir(num);//number 实例 3 | console.dir(num.__proto__);//Number 类 4 | /* 5 | * 6 | * constructor :Object 7 | * 8 | * 9 | * */ 10 | 11 | var str="haha"; 12 | console.dir(str);//string 实例 13 | console.dir(str.__proto__);//String 类 14 | 15 | 16 | /*判断是否一致*/ 17 | console.log(num.__proto__.__proto__=== str.__proto__.__proto__);//true 18 | 19 | 20 | //万物皆对象,并不等于只有一个对象类型的； 21 | // Number / String / Object / Boolean 22 | 23 | 24 | //key:value 25 | //1、字面量的创建方式；推荐的方式 26 | var o={ 27 | name:"zhu", 28 | say:"hello" 29 | }; 30 | console.log(o);//{name: "zhu", say: "hello"} 31 | 32 | var oDemo={}; 33 | // oDemo.name1= 34 | if(!oDemo.flagVal){ 35 | oDemo.flagVal="Test" 36 | } 37 | oDemo.name="bang"; 38 | oDemo.say="hahahahahahahha"; 39 | console.log(oDemo.flagVal);//Test 40 | console.log(oDemo);//{flagVal: "Test", name: "bang", say: "hahahahahahahha"} 41 | 42 | //new 43 | var demo1=new Object();//不推荐的使用方法； 44 | demo1.haha="hahahahahahah"; 45 | console.log(demo1);//{haha: "hahahahahahah"} 46 | 47 | //jQuery的AJAX； 48 | /*var options={ 49 | url:"babababab", 50 | type:"", 51 | date:{} 52 | }; 53 | $.ajax(options);*/ 54 | 55 | 56 | function Test(opt) { 57 | //bala bala 58 | } 59 | var testVal=Test({a:"",b:""}); 60 | 61 | //Array; 62 | var a=[1,2,3,4,5,6,7];//var a=[1,2,3,4,5,6,7,] 低版本浏览器，length的; 63 | console.log(a);//编程语言里，index是以0为开始的； 64 | console.log("第一位,a[0]",a[0]); 65 | console.log(a[1]); 66 | console.log(a.length);//7 67 | 68 | // -> // 69 | -------------------------------------------------------------------------------- /数据类型初识/6.Symbol.js: -------------------------------------------------------------------------------- 1 | //创建 2 | let aloneVal = Symbol();//注意不要用new来生成new；即时在ES5中，除了使用自己定义构造函数外，也不推荐加new； 3 | console.log(typeof aloneVal);//symbol 4 | 5 | //Symbol里面的参数，是描述使用的；仅仅是为了控制输出时候方便识别，没有别的用了； 6 | const s1 = Symbol('foo'); 7 | const s2 = Symbol('bar'); 8 | console.log(s1,s2);//Symbol(foo) Symbol(bar) 9 | 10 | //和NaN一样，连自己都不等于自己：因为里面的参数只是一个描述; 11 | console.log(Symbol("foo") == Symbol("foo"));//false 12 | console.log(Symbol("") == Symbol(""));//false 13 | console.log(Symbol() == Symbol());//false 连自己都不等于自己： 14 | const foo = Symbol(); 15 | const bar = Symbol(); 16 | const symbolVal = Symbol("11"); 17 | console.log(typeof foo , typeof bar);//symbol symbol 18 | console.log(typeof foo === "symbol");//true 19 | console.log(typeof bar === "symbol");//true 20 | console.log(bar === bar);//true 当然如果用变量储存，俩个变量是相等的，但这并不说明2个相同Symbol值是相同的 21 | console.log(bar === foo);//false 22 | console.log(symbolVal);//Symbol(11) 23 | 24 | //Symbol不可以进行运算，但是可以转换为字符串和布尔值，但是不能转为数值； 25 | const sym=Symbol("flag"); 26 | //console.log(sym+"hello baby");// Cannot convert a Symbol value to a string 27 | console.log(String(sym)+"hello one");//Symbol(flag)hello one 28 | console.log(sym.toString()+"hello two");//Symbol(flag)hello two 29 | console.log(Boolean(sym),typeof Boolean(sym));//true "boolean" 30 | console.log(Number(sym));//Cannot convert a Symbol value to a number 31 | 32 | let obj = {}; 33 | obj[foo] = "foo"; 34 | obj[bar] = "bar"; 35 | JSON.stringify(obj); // {} 36 | Object.keys(obj); // [] 37 | Object.getOwnPropertyNames(obj); // [] 38 | Object.getOwnPropertySymbols(obj); // [ foo, bar ] -------------------------------------------------------------------------------- /数据类型初识/6.Symbol2.js: -------------------------------------------------------------------------------- 1 | var validateId={};//用来验证身份证的； 2 | validateId.age=1900; 3 | console.log(validateId.age);//1900 4 | 5 | validateId.age=1940; 6 | console.log(validateId.age);//1900 7 | 8 | //模块内部的 9 | validateId.demo1=Symbol();// AAXX111 demo1 10 | console.log(validateId.demo1);//Symbol() 11 | 12 | // 外部的 13 | validateId.demo1=1900; //demo1 14 | console.log(validateId.demo1);//1900 15 | 16 | var aaa=Symbol("a");// //AAXX222 17 | var bbb=Symbol("a");// //AAXX333 生成的实例是唯一的，和其他任何实例都不相等，包括其他相同生成的实例 18 | console.log(aaa); 19 | console.log(bbb); 20 | console.log(aaa==bbb);//相当于NaN 21 | console.log(Symbol()==Symbol());// 22 | 23 | 24 | var age1=2; 25 | var age2=2; 26 | console.log(age1,age2); 27 | console.log(age1==age2);//true 28 | 29 | //模块/插件里面的 30 | var age=Symbol("age");//AAXX666 31 | validateId[age]=222; 32 | /* 33 | * 34 | * 35 | * 36 | * 37 | * 38 | * */ 39 | 40 | //other 41 | // var age=Symbol("age");//AAXX777 42 | validateId[Symbol("age")]=333; 43 | 44 | 45 | validateId.aaa=222; 46 | validateId.bbb=222; 47 | -------------------------------------------------------------------------------- /数据类型详解/readme.md: -------------------------------------------------------------------------------- 1 | # JavaScript数据类型详解； 2 | 3 | > 数据类型是所有编程语言的基础，一定要好好的总结和学习 4 | 5 | - [编程语言是什么](./1.编程语言是什么.md) 6 | - [变量，注释，严格模式](./2.变量，注释，严格模式.md) 7 | - [数据类型](./3.数据类型.md) 8 | - [运算符](./4.运算符.md) 9 | - [流程语句](./5.流程语句.md) 10 | - [函数初识](./6.函数初识.md) -------------------------------------------------------------------------------- /数据类型详解/模块化开发日历控件/Calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 日历控件 6 | 16 | 17 | 18 |
19 |
上2015年9月下
20 |
    21 |
  • 日
    • 22 |
  • 一
    • 23 |
  • 二
    • 24 |
  • 三
    • 25 |
  • 四
    • 26 |
  • 五
    • 27 |
  • 六
    • 28 |
29 |
    30 |
  • 12
    • 31 |
  • 12
    • 32 |
  • 12
    • 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /数据类型详解/模块化开发日历控件/Calendar2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 日历控件 6 | 16 | 17 | 18 |
19 |
上2015年9月下
20 |
    21 |
  • 日
    • 22 |
  • 一
    • 23 |
  • 二
    • 24 |
  • 三
    • 25 |
  • 四
    • 26 |
  • 五
    • 27 |
  • 六
    • 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /数据类型详解/模块化开发日历控件/Calendar3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 日历控件 6 | 16 | 17 | 18 |
19 |
20 | 上 21 |
XXXX年XX月
22 | 下 23 |
24 |
    25 |
  • 日
    • 26 |
  • 一
    • 27 |
  • 二
    • 28 |
  • 三
    • 29 |
  • 四
    • 30 |
  • 五
    • 31 |
  • 六
    • 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /数据类型详解/模块化开发日历控件/README.md: -------------------------------------------------------------------------------- 1 | # 日历选择的说明 2 | 3 | 封在一个方法里，可以根据项目的不同，再次重构； 4 | 5 | 没有做点击面板以外的地方，自动关闭选择面板；这个功能在研究事件源的时候；再做（事件委托模式），因为这个比较重要，需要单独的去写； -------------------------------------------------------------------------------- /数据类型详解/表格排序的写法和排序/css/table.css: -------------------------------------------------------------------------------- 1 | html, body, div, input, table, tr, td, th{ 2 | margin:0; 3 | padding: 0; 4 | font-size: 12px; 5 | font-family: "微软雅黑", "宋体"; 6 | } 7 | ul,li,td,th{ 8 | list-style: none;} 9 | #div1{ 10 | width: 700px; 11 | margin: 50px auto 0; 12 | padding: 5px; 13 | border: 1px solid #008CD7; 14 | border-radius: 5px; 15 | } 16 | thead tr,tbody tr{ 17 | height: 30px; 18 | line-height: 30px; 19 | text-align: center; 20 | -webkit-user-select: none; 21 | } 22 | thead{ 23 | height: 30px; 24 | background: #008CD7; 25 | cursor: pointer; 26 | } 27 | .w30 { width: 30px;} 28 | .w70{width: 70px;} 29 | .w100{ width: 100px;} 30 | .w200{ width: 200px;} 31 | .c{background: #cccccc} 32 | .cy{background: #CDE074} -------------------------------------------------------------------------------- /数据类型详解/表格排序的写法和排序/js/jsonPerson.js: -------------------------------------------------------------------------------- 1 | var jsonData = [ 2 | { 3 | name: "朱安邦", 4 | age: 25, 5 | email: "1234567890@qq.com", 6 | phone: "13245637823", 7 | score: 1340 8 | }, 9 | { 10 | name: "刘安邦", 11 | age: 23, 12 | email: "4123456780@qq.com", 13 | phone: "18723456423", 14 | score: 1200 15 | }, 16 | { 17 | name: "李安邦", 18 | age: 32, 19 | email: "4123456890@qq.com", 20 | phone: "13800026574", 21 | score: 1800 22 | }, 23 | { 24 | name: "王安邦", 25 | age: 41, 26 | email: "5234567890@qq.com", 27 | phone: "13800993302", 28 | score: 1034 29 | }, 30 | { 31 | name: "甄安邦", 32 | age: 40, 33 | email: "2234567890@qq.com", 34 | phone: "15802193302", 35 | score: 1456 36 | }, 37 | { 38 | name: "爱安邦", 39 | age: 34, 40 | email: "2234567890@qq.com", 41 | phone: "13411293302", 42 | score: 2568 43 | }, 44 | { 45 | name: "殷安邦", 46 | age: 23, 47 | email: "1323467890@qq.com", 48 | phone: "17723493302", 49 | score: 1445 50 | }, 51 | { 52 | name: "康安邦", 53 | age: 34, 54 | email: "4723467890@qq.com", 55 | phone: "13833493302", 56 | score: 1740 57 | }, 58 | { 59 | name: "邓安邦", 60 | age: 43, 61 | email: "9123456890@qq.com", 62 | phone: "15922493302", 63 | score: 1890 64 | }, 65 | { 66 | name: "朱一名", 67 | age: 25, 68 | email: "9123456890@qq.com", 69 | phone: "13846379824", 70 | score: 1190 71 | }, 72 | { 73 | name: "朱二名", 74 | age: 28, 75 | email: "9123456890@qq.com", 76 | phone: "15934493302", 77 | score: 1290 78 | }, 79 | { 80 | name: "朱三名", 81 | age: 28, 82 | email: "9123456890@qq.com", 83 | phone: "15956783302", 84 | score: 1490 85 | }, 86 | { 87 | name: "朱四名", 88 | age: 38, 89 | email: "9123456890@qq.com", 90 | phone: "15922496538", 91 | score: 1990 92 | }, 93 | { 94 | name: "朱五名", 95 | age: 48, 96 | email: "9123456890@qq.com", 97 | phone: "15922497890", 98 | score: 1290 99 | }, 100 | { 101 | name: "朱六名", 102 | age: 37, 103 | email: "9123456890@qq.com", 104 | phone: "15922434562", 105 | score: 2890 106 | }, 107 | { 108 | name: "朱七名", 109 | age: 25, 110 | email: "9123456890@qq.com", 111 | phone: "15922474529", 112 | score: 3790 113 | }, 114 | { 115 | name: "朱八名", 116 | age: 26, 117 | email: "9123456890@qq.com", 118 | phone: "15922499457", 119 | score: 2390 120 | }, 121 | { 122 | name: "朱九名", 123 | age: 34, 124 | email: "9123456890@qq.com", 125 | phone: "15922492536", 126 | score: 1290 127 | }, 128 | { 129 | name: "朱十名", 130 | age: 23, 131 | email: "9123456890@qq.com", 132 | phone: "15922492648", 133 | score: 2890 134 | }, 135 | ]; -------------------------------------------------------------------------------- /数据类型详解/表格排序的写法和排序/js/tools.js: -------------------------------------------------------------------------------- 1 | var tools = { 2 | formatJSON: function (jsonStr) { 3 | var jsonObj = null; 4 | try { 5 | jsonObj = JSON.parse(jsonStr); 6 | } catch (e) { 7 | jsonObj = eval("(" + jsonStr + ")"); 8 | } 9 | return jsonObj; 10 | }, 11 | isType: function (val, type) { 12 | return Object.prototype.toString.call(val) === "[object " + type + "]"; 13 | }, 14 | likeToArray: function (likeAry) { 15 | var ary = []; 16 | try { 17 | ary = [].slice.call(likeAry, 0); 18 | } catch (e) { 19 | for (var i = 0; i < likeAry.length; i++) { 20 | ary.push(likeAry[i]); 21 | } 22 | } 23 | return ary; 24 | } 25 | }; -------------------------------------------------------------------------------- /数据类型详解/表格排序的写法和排序/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 表格排序　-　Powered By Broszhu 6 | 7 | 11 | 12 | 13 |

表格排序　-　Powered By broszhu　　博客网址：taobao.fm

14 | 15 |

学习JavaScript是一件很有趣的事，可以做出很多自豪的小玩意！--broszhu （这个页面是实现原理：点此查看）

16 |
17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
21 | 22 | 姓名年龄邮箱手机工资
33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /模块化开发/readme.md: -------------------------------------------------------------------------------- 1 | #用封装好的DOM库，模块化开发选项卡 2 | 3 | 用[封装好的DOM库](https://github.com/Broszhu/zhuanbang-javascript-notes/blob/master/DOM%E6%93%8D%E4%BD%9C%E5%92%8C%E5%B0%81%E8%A3%85DOM%E5%BA%93/tool.js)来实现[模块化开发选项卡](#)； 4 | 5 | [第一次封的模块化现象卡，借助封装的DOM库](http://taobao.fm/works/tabModel/tabModel.html) 6 | 7 | 后面还在在这两次的基础上，再次进行模块化开发； 8 | 9 | 封装思路是，先获取指定的li集合； 10 | 11 | 然后鼠标操作li，通过DOM关系来间接操作下面的DIV部分； 12 | 13 | 这次的模块化开发中，class="select"与方法耦合了；下次封装的时候；需要分离开来； 14 | 15 | 后面会再次重新封装； -------------------------------------------------------------------------------- /模块化开发/tabModel/css/tabModel.css: -------------------------------------------------------------------------------- 1 | div,ul,li{ 2 | padding: 0; 3 | margin: 0; 4 | font-size: 16px; 5 | font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; 6 | } 7 | ul,li{ 8 | list-style: none; 9 | } 10 | .tabModel{ 11 | width: 600px; 12 | height: 500px; 13 | border:1px solid #ccc ; 14 | border-radius: 5px; 15 | margin: 10px auto; 16 | padding: 5px; 17 | } 18 | .tabHeads{position: relative;top: 1px} 19 | .tabHead1{ 20 | width: 60px; 21 | height: 30px; 22 | line-height: 30px; 23 | text-align: center; 24 | border: 1px solid red ; 25 | background: orange; 26 | float: left; 27 | margin-right:10px ; 28 | cursor: pointer; 29 | } 30 | .tabHead2{ 31 | width: 60px; 32 | height: 30px; 33 | line-height: 30px; 34 | text-align: center; 35 | border: 1px solid red ; 36 | background: #37C7D4; 37 | float: left; 38 | margin-right:10px ; 39 | cursor: pointer; 40 | } 41 | .tabHead3{ 42 | width: 60px; 43 | height: 30px; 44 | line-height: 30px; 45 | text-align: center; 46 | border: 1px solid red ; 47 | background: #E44072; 48 | float: left; 49 | margin-right:10px ; 50 | cursor: pointer; 51 | } 52 | .tabHead4{ 53 | width: 60px; 54 | height: 30px; 55 | line-height: 30px; 56 | text-align: center; 57 | border: 1px solid red ; 58 | background: #cccccc; 59 | float: left; 60 | margin-right:10px ; 61 | cursor: pointer; 62 | } 63 | .tabHead5{ 64 | width: 60px; 65 | height: 30px; 66 | line-height: 30px; 67 | text-align: center; 68 | border: 1px solid red ; 69 | background: #00FF00; 70 | float: left; 71 | margin-right:10px ; 72 | cursor: pointer; 73 | } 74 | 75 | 76 | 77 | .tabContent1{ 78 | width: 100%; 79 | height: 465px; 80 | line-height: 465px; 81 | text-align: center; 82 | border: 1px solid red ; 83 | background: orange; 84 | clear: both; 85 | display: none; 86 | } 87 | .tabContent2{ 88 | width: 100%; 89 | height: 465px; 90 | line-height: 465px; 91 | text-align: center; 92 | border: 1px solid red ; 93 | background: #37C7D4; 94 | clear: both; 95 | display: none; 96 | } 97 | .tabContent3{ 98 | width: 100%; 99 | height: 465px; 100 | line-height: 465px; 101 | text-align: center; 102 | border: 1px solid red ; 103 | background: #E44072; 104 | clear: both; 105 | display: none; 106 | } 107 | .tabContent4{ 108 | width: 100%; 109 | height: 465px; 110 | line-height: 465px; 111 | text-align: center; 112 | border: 1px solid red ; 113 | background: #37C7D4; 114 | clear: both; 115 | display: none; 116 | } 117 | .tabContent5{ 118 | width: 100%; 119 | height: 465px; 120 | line-height: 465px; 121 | text-align: center; 122 | border: 1px solid red ; 123 | background: #00FF00; 124 | clear: both; 125 | display: none; 126 | } 127 | 128 | /*第二模块*/ 129 | .tabHead{ 130 | width: 60px; 131 | height: 30px; 132 | line-height: 30px; 133 | text-align: center; 134 | border: 1px solid red ; 135 | background: brown; 136 | float: left; 137 | margin-right:10px ; 138 | cursor: pointer; 139 | } 140 | .tabContent{ 141 | width: 100%; 142 | height: 465px; 143 | line-height: 465px; 144 | text-align: center; 145 | border: 1px solid red ; 146 | background: blanchedalmond; 147 | clear: both; 148 | display: none; 149 | } 150 | 151 | .highlight{color: #00FF00 } 152 | .selectTabHead{background: #000000;color: #FFFFFF;} 153 | .selectTabContent{display: block} 154 | -------------------------------------------------------------------------------- /模块化开发/tabModel/js/index.js: -------------------------------------------------------------------------------- 1 | var t=new Tool(); 2 | var tabHeads=document.getElementById("tabHeads"), 3 | oLis= tabHeads.getElementsByTagName("li"); 4 | for(var i= 0,len=oLis.length;i 2 | 3 | 4 | 5 | JavaScript模块化开发选项卡 6 | 7 | 8 | 9 |
10 |
    11 |
  • 选项1
    • 12 |
  • 选项2
    • 13 |
  • 选项3
    • 14 |
  • 选项4
    • 15 |
  • 选项5
    • 16 |
17 |
18 |

模块化开发，把一个效果分为不同的DOM库模块；以后可以加快开发力度；

19 |
朱安邦002
20 |
朱安邦003
21 |
朱安邦004
22 |
朱安邦005
23 |
24 |
25 | 26 |
27 |
    28 |
  • 选项1
    • 29 |
  • 选项2
    • 30 |
  • 选项3
    • 31 |
  • 选项4
    • 32 |
  • 选项5
    • 33 |
34 |
35 |

模块化开发，把一个效果分为不同的DOM库模块；以后可以加快开发力度；

36 |
朱安邦002
37 |
朱安邦003
38 |
朱安邦004
39 |
朱安邦005
40 |
41 |
42 | 43 |
44 |
    45 |
  • 选项1
    • 46 |
  • 选项2
    • 47 |
  • 选项3
    • 48 |
  • 选项4
    • 49 |
  • 选项5
    • 50 |
51 |
52 |

模块化开发，把一个效果分为不同的DOM库模块；以后可以加快开发力度；

53 |
朱安邦002
54 |
朱安邦003
55 |
朱安邦004
56 |
朱安邦005
57 |
58 |
59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /正则表达式/1.正则基础.md: -------------------------------------------------------------------------------- 1 | # 正则表达式的基础 2 | 3 | - 正则是什么 4 | - 如何创建一个正则 5 | - 如何学习正则 6 | - 正则的转义 7 | 8 | # 1、正则是什么？ 9 | 10 | - 正则：它就是一个规则,用来处理字符串的一个规则(正则就是用来处理字符串的) 11 | - 原理: 12 | 13 | - 1)匹配 判断一个字符串是否符合我们制定的规则->test:reg.test(str) 14 | 15 | var reg=/\d+/; 16 | console.log(reg.test("朱"));//false 17 | console.log(reg.test("1"));//true 18 | console.log(reg.test(1));//true 19 | console.log(reg.test("朱朱朱111"));//true 20 | 21 | - 2)捕获 把字符串中符合我们正则规则的内容捕获到->exec:reg.exec(str) 22 | 23 | var reg=/\d+/; 24 | console.log(reg.exec("朱"));//null 25 | console.log(reg.exec("1"));//["1", index: 0, input: "1"] 26 | console.log(reg.exec("朱朱朱111"));//["111", index: 3, input: "朱朱朱111"] 27 | 28 | 正则捕获，如果比配，返回捕获匹配到了数据；如果不匹配，返回null； 29 | 30 | # 2、如何创建一个正则? 31 | 32 | - 字面量方式: 33 | 34 | var reg = /\d/; 35 | 36 | - 实例创建方式: 37 | 38 | var reg = new RegExp(""); 39 | 40 | **正则的两种创建方式是有区别的** 41 | 42 | 43 | 　　在字面量方式中,我们//之间包起来的所有的内容都是元字符,有的具有特殊的意义,大部分都是代表本身含义的普通的元字符 44 | 45 | var name = "zhuan"; 46 | var reg = /^\d+"+name+"\d+$/g; 47 | console.log(reg.test("2015zhuan2016"));//->false 48 | console.log(reg.test('"2015"""zhuan2016""'));//->false 49 | console.log(reg.test('2015"""nameeeee"2016'));//->true 50 | 51 | **对于这样的需求,我们只能使用实例创建的方式了** 52 | 53 | var name = "zhuan"; 54 | // var reg = /^\d+"+name+"\d+$/g; 55 | var reg = new RegExp("^\\d+" + name + "\\d+$", "g"); 56 | console.log(reg.test("2015zhuan2016"));//->true 57 | console.log(reg.test('2015"""nameeeee"2016'));//->false 58 | 59 | **字面量方式和实例创建的方式在正则中的区别?** 60 | 61 | - 1)字面量方式中出现的一切都是元字符,所以不能进行变量值的拼接,而实例创建的正则表达式可以使用变量； 62 | - 2)字面量方式中直接写\d就可以,而在实例中需要把它转译 \\d 63 | 64 | > 要注意的是，传递给 RegExp 构造函数的两个参数都是字符串（不能把正则表达式字面量传递给 RegExp 构造函数）。由于 RegExp 构造 65 | 函数的模式参数是字符串，所以在某些情况下要对字符进行双重转义。所有元字符都必须双重转义，那些已经转义过的字符也是如此，例如 \n （字符\在字符串中通常被转义为\\，而在正则表达式字符串中就 66 | 会变成\\\\）。 67 | 68 | # 3、如何学习正则? 69 | 70 | var name = "zhuan"; 71 | // var reg = /^\d+"+name+"\d+$/g; 72 | var reg = new RegExp("^\\d+" + name + "\\d+$", "g"); 73 | 74 | console.log(reg); 75 | console.dir(reg);//顺着原型链查找有哪些方法 76 | console.dir(RegExp.prototype);//正则类的原型 77 | 78 | # 4、正则转义 79 | 80 | 与其他语言中的正则表达式类似，模式中使用的所有元字符都必须转义。正则表达式中的元字符包括： 81 | 82 | ( [ { \ ^ $ | ) ? * + .]} 83 | 84 | 这些元字符在正则表达式中都有一或多种特殊用途，因此如果想要匹配字符串中包含的这些字符，就必须对它们进行转义； 85 | 86 | //匹配第一个"bat"或"cat"，不区分大小写 87 | var pattern1 = /[bc]at/i; 88 | console.log(pattern1.test("bat")); //true 89 | console.log(pattern1.test("cat")); //true 90 | console.log(pattern1.test("[bc]at")); //false 91 | 92 | //匹配第一个" [bc]at"，不区分大小写 93 | var pattern2 = /\[bc\]at/i; 94 | console.log(pattern2.test("bat")); //false 95 | console.log(pattern2.test("cat")); //false 96 | console.log(pattern2.test("[bc]at")); //true 97 | 98 | //匹配所有以"at"结尾的 3 个字符的组合，不区分大小写 99 | var pattern3 = /.at/gi;//注意index的变化 100 | console.log(pattern3.exec("[bc]at")); //["]at", index: 3, input: "[bc]at"] 101 | console.log(pattern3.exec("bat")); //null 102 | console.log(pattern3.exec("cat")); //["cat", index: 0, input: "cat"] 103 | 104 | //匹配所有".at"，不区分大小写 105 | var pattern4 = /\.at/gi; -------------------------------------------------------------------------------- /正则表达式/2.正则的组成.md: -------------------------------------------------------------------------------- 1 | # 正则的组成 2 | 3 | var reg = /\d/;//->包含一个0-9之间的数字 4 | console.log(reg.test("zhu"));//->false 5 | console.log(reg.test("zhu1"));//->true 6 | 7 | var reg2 = /^\d$/;//->只能是一个0-9之间的数字 8 | console.log(reg2.test("9"));//->true 9 | console.log(reg2.test("012"));//->false 10 | 11 | # 正则是由元字符组成的: 12 | 13 | > 每一个正则表达式都是由元字符和修饰符组成的 14 | 15 | 什么是[元字符]：在//之间具有意义的一些字符 16 | 17 | - 1、具有特殊意义的元字符 18 | 19 | - \:转义字符,转译后面字符所代表的含义 20 | - ^:以某一个元字符开始 21 | - $:以某一个元字符结尾 22 | - \n:匹配一个换行符 23 | - .:除了\n以外的任意字符 24 | 25 | var reg = /^0.2$/;//->以0开头,以2结尾,中间可以是除了\n的任意字符 26 | console.log(reg.test("0.2"));//->true 27 | console.log(reg.test("0和2"));//->true 28 | console.log(reg.test("0-2"));//->true 29 | console.log(reg.test("0sdhfohsdf-2"));//->false 30 | 31 | reg = /^0\.2$/;//->以0开头,以2结尾,中间是.的字符串； 32 | console.log(reg.test("0.2"));//->true 33 | console.log(reg.test("0-2"));//->false 34 | 35 | - ():功能一:分组 ->把一个大正则本身划分成几个小的正则 36 | 37 | var reg1 = /^\d+zhu\d+$/; 38 | var reg2 = /^(\d+)zhu(\d+)$/; 39 | 40 | //匹配 41 | console.log(reg1.test("2zhu3"));//true 42 | console.log(reg2.test("2zhu4"));//true 43 | //捕获 44 | console.log(reg1.exec("2zhu3"));//["2zhu3", index: 0, input: "2zhu3"] 45 | console.log(reg2.exec("2zhu4"));//["2zhu4", "2", "4", index: 0, input: "2zhu4"] 46 | 47 | 48 | - 功能二:改变|的优先级；功能：替换，"或"操作字符具有高于替换运算符的优先级，使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m|f)ood"。 49 | 50 | - x|y:x或者y中的一个 51 | - ^x|yz$:**x开头、yz结尾、x开头并且yz结尾、三种都可以** 52 | - [xyz]:x或者y或者z中的一个 53 | - [^xyz]:除了三个以外的任何一个字符 54 | - [a-z]:a-z之间的任何一个字符 55 | - [^a-z]:除了a-z之间的任何一个字符 56 | - \d:一个0-9之间的数字 \D:除了0-9之间的数字以外的任何字符 57 | - \b:匹配一个边界符 58 | - \w:数字、字母、下划线中的任意一个字符 [0-9a-zA-Z_] 59 | - \s:匹配一个空白字符 空格、一个制表符、换页符... 60 | 61 | - 2、代表出现次数的量词元字符 62 | 63 | - *:出现零到多次 64 | - +:出现一到多次 65 | - ?:出现零次或者一次 66 | - {n}:出现n次 67 | - {n,}:出现n到多次 68 | - {n,m}:出现n到m次 69 | 70 | var reg = /^\d+$/; 71 | console.log(reg.test("2015"));//->true 72 | 73 | 74 | 一个简单的验证手机号的正则：11位数字,第一位是1 75 | 76 | var reg = /^1[3|4|5|7|8]\d{9}$/;//第一位以1开始，第二位可以是34578中的任意一位，后面再加9个数字； 77 | console.log(reg.test("12345678901"));//false 78 | console.log(reg.test("13856487589"));//true 79 | console.log(reg.test("12114567895"));//false 80 | 81 | -------------------------------------------------------------------------------- /正则表达式/5.分组捕获.md: -------------------------------------------------------------------------------- 1 | # 分组捕获 2 | 3 | # 正则分组： 4 | - 1、改变优先级 5 | - 2、分组引用 6 | 7 | > \2代表和第二个分组出现一模一样的内容；\1和第一个分组出现一模一样的内容； 8 | 9 | 一模一样:和对应的分组中的内容的值都要一样 10 | 11 | var reg = /^(\w)\1(\w)\2$/; 12 | console.log(reg.test("zzhh"));//->true,zz相同，hh相同 13 | console.log(reg.test("zzh_"));//->false,zz相同，h_不相同 14 | console.log(reg.exec("zzhh"));//->["zzhh", "z", "h", index: 0, input: "zzhh"] 15 | console.log(reg.exec("0011"));//->["0011", "0", "1", index: 0, input: "0011"] 16 | 17 | - 3、分组捕获 ->正则在捕获的时候,不仅仅把大正则匹配的内容捕获到,而且还可以把小分组匹配的内容捕获到 18 | - (?:) 在分组中?:的意思是只匹配不捕获 19 | 20 | var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X|x)$/; 21 | var str = "34222419900428123x"; 22 | var ary=reg.exec(str);//["34222419900428123X", "34", "2224", "1990", "04", "28", "3", index: 0, input: "34222419900428123X"] 23 | console.log(ary); 24 | //ary[0] -> 大正则匹配的内容 25 | //ary[1] ->第一个分组捕获的内容 26 | //ary[2] ->第二个分组捕获的内容 27 | //... 28 | console.log(str.match(reg));//->和exec获取的结果是一样的 29 | 30 | var reg = /zhu(\d+)/g; 31 | var str = "zhu1234zhu3456zhu5678"; 32 | //我们用exec执行三次,每一次不仅仅把大正则匹配的获取到,而且还可以获取第一个分组匹配的内容 33 | console.log(reg.exec(str));//->["zhu1234", "1234"...] 34 | console.log(reg.exec(str));//->["zhu3456", "3456"...] 35 | console.log(reg.exec(str));//->["zhu5678", "5678"...] 36 | //而match只能捕获大正则匹配的内容 37 | console.log(str.match(reg));//->["zhu1234", "zhu3456", "zhu5678"] -------------------------------------------------------------------------------- /正则表达式/7.正则总结.md: -------------------------------------------------------------------------------- 1 | # 正则总结 2 | 3 | - **exec** 4 | 5 | 6 | var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;//是否为有效数字的正则,多位数，第一位不能为0； 7 | var str1 = "1255552.3", 8 | str2="2345", 9 | str3="0"; 10 | var ary = []; 11 | var res = reg.exec(str1); 12 | console.log(reg.test(str1),reg.test(str2),reg.test(str3)); 13 | console.log("exec str1",reg.exec(str1));//["1255552.3", "1255552", "1255552", ".3", index: 0, input: "1255552.3"] 14 | console.log("exec str2",reg.exec(str2));//["2345", "2345", "2345", undefined, index: 0, input: "2345"] 15 | console.log("exec str3",reg.exec(str3));//["0", "0", undefined, undefined, index: 0, input: "0"] 16 | 17 | 18 | - ** match ** 19 | 20 | var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;//是否为有效数字的正则,多位数，第一位不能为0； 21 | var str1 = "1255552.3", 22 | str2="2345", 23 | str3="0"; 24 | ary = str1.match(reg); 25 | console.log(ary);//["1255552.3", "1255552", "1255552", ".3", index: 0, input: "1255552.3"] 26 | 27 | - ** replace * 28 | 29 | replace:字符串替换 30 | 31 | 第一个参数是一个正则:把正则所匹配的内容都替换掉 32 | 33 | - 先把大正则匹配的内容捕获到(捕获到的结果个我们用exec捕获到的结果基本一致) 34 | - 把我们捕获的内容进行替换 35 | 36 | var str = "20151215"; 37 | var reg = /\d/g; 38 | var ary = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; 39 | //一共要捕获8次,我们的第二个参数[function]要执行8次 40 | //每一执行都把当前正则捕获的内容传递给我们的[function] 41 | //每一次执行的返回值(写在return后面的)都相当于把当前大正则捕获的内容替换成我们返回的内容 42 | str = str.replace(reg, function () { 43 | //第一次捕获2 ->"贰" ary[2] 44 | //第二次捕获0 ->"零" ary[0] 45 | //arguments[0]->每一次执行函数我们正则捕获到的内容 46 | console.log(arguments); 47 | //第一次:arguments->["2", 0, "20151215"] arguments[0]->"2" 48 | return ary[arguments[0]];//->return ary["2"] ->return "贰"; 49 | }); 50 | console.log(str);//贰零壹伍壹贰壹伍 51 | 52 | 53 | - 模板引擎实现的原理 54 | 55 | var str = "my name is {0},my age is {1},i can write {2},so ~~"; 56 | var ary = ["zhu", "18", "JavaScript"]; 57 | //->"my name is zhu,my age is 18,i can write JavaScript,so~~"; 58 | str = str.replace(/{(\d)}/g, function () { 59 | //每一次执行function 60 | //arguments[0] ->当前大正则捕获的内容 {0} 61 | //arguments[1] ->当前第一个小分组捕获的内容 0 62 | //return value; ->用value把大正则捕获的内容替换 {0}被value替换了 63 | console.log(arguments); 64 | return ary[arguments[1]]; 65 | }); 66 | console.log(str); 67 | 68 | - 1、获取一个字符串中出现次数最多的字符? 69 | 70 | var str = "zhuanbangzhuzhu"; 71 | 72 | - 2、千分符 73 | 74 | var str = "5634780";//->"5 634 780" 75 | 76 | - 3、获取地址栏中的问号传递进来的参数 77 | 78 | URL：https://passport.baidu.com/v2/?reg=200&tt=300&gid=100 79 | 目标数据：{reg:200,tt:300,gid:100} 80 | 81 | - 4、格式化时间 82 | 83 | var str="2015-12-14 13:8:5"; ->"2015年12月14日 13时08分05秒" 84 | 85 | -------------------------------------------------------------------------------- /研究Boolean类/README.md: -------------------------------------------------------------------------------- 1 | # Boolean类型 2 | 3 | 可以先输出Boolean来观察下 4 | 5 | console.dir(new Boolean()) 6 | 7 | ![](http://i.imgur.com/ufcUHAP.png) 8 | 9 | 这个类型只有2个方法，并且都是重写Object的方法； 10 | 11 | - toString() 12 | - valueOf() 13 | 14 | 15 | Boolean对象在实际使用中，用处并不大， 16 | 17 | 因为boolean数据就是用来判断真假的，而Boolean对象是做为对象来用的，任何非空对象转换的时候，都是true、； 18 | 19 | new Boolean(false) //这种创建的Boolean是true的； 20 | 21 | 例子如下: 22 | 23 | var falseObject = new Boolean(false); 24 | var result = falseObject && true; 25 | console.log(falseObject,result); //true,因为falseObject会被转为true；因为是当作对象来解析的； 26 | var falseValue = false; 27 | result = falseValue && true; 28 | console.log(falseValue,result); //false 29 | 30 | console.log(typeof falseObject); //object 31 | console.log(typeof falseValue); //boolean 32 | console.log(falseObject instanceof Boolean); //true 33 | console.log(falseValue instanceof Boolean); //false 34 | 35 | 理解基本类型的布尔值与 Boolean 对象之间的区别非常重要——当然，我们的建议是永远不要使用 Boolean 对象。 36 | -------------------------------------------------------------------------------- /研究Math类/README.md: -------------------------------------------------------------------------------- 1 | # Math对象 2 | 3 | ECMAScript 还为保存数学公式和信息提供了一个公共位置，即 Math 对象。与我们在 JavaScript 直接编写的计算功能相比， Math 对象提供的计算功能执行起来要快得多。 Math 对象中还提供了辅助完成这些计算的属性和方法。 4 | 5 | - min() 和 max() 方法 6 | - 舍入方法 7 | - random() 方法 8 | - 其它方法 9 | 10 | 使用 Math 的属性和方法的语法： 11 | var testMin=Math.min(1,2,3,4,5,6,7); 12 | 13 | 注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。 14 | 15 | ### min() 和 max() 方法 16 | 17 | > Math.max();获取一堆数中的最大值； 18 | > Math.min();获取一堆数中的最小值； 19 | 20 | var testMin=Math.min(1,2,3,4,5,6,7), 21 | testMax=Math.max(1,2,3,4,5,6,7); 22 | 23 | console.log(testMin,testMax);//1,7 24 | 25 | > 求下面数组中的最大值，最小值 26 | 27 | var testAry=[1,2,3,4,5,2,43,5,6,7,8,9,34]; 28 | var testMin=Math.min.apply(null,testAry), 29 | testMax=Math.max.apply(null,testAry); 30 | 31 | console.log(testMin,testMax);//1,43 32 | 33 | 用的是allly的方法； 34 | 35 | ### 舍入方法 36 | 37 | - Math.round() 四舍五入 38 | - Math.ceil() 向上取整 39 | - Math.floor() 向下取整 40 | - Math.abs() 取绝对值 41 | 42 | console.log(Math.ceil(25.9)); //26 43 | console.log(Math.ceil(25.5)); //26 44 | console.log(Math.ceil(25.1)); //26 45 | console.log(Math.round(25.9)); //26 46 | console.log(Math.round(25.5)); //26 47 | console.log(Math.round(25.1)); //25 48 | console.log(Math.floor(25.9)); //25 49 | console.log(Math.floor(25.5)); //25 50 | console.log(Math.floor(25.1)); //25 51 | 52 | 对于所有介于 25 和 26（不包括 26）之间的数值， Math.ceil() 始终返回 26，因为它执行的是向上舍入。 Math.round() 方法只在数值大于等于 25.5 时返回 26；否则返回 25。最后， Math.floor()对所有介于 25 和 26（不包括 26）之间的数值都返回 25。 53 | 54 | ### random 55 | 56 | 获取0-1之间的随机小数 57 | 58 | > 获取minNum到maxNum之间的随机整数 59 | Math.round(Math.random()*(maxNum-minNum)+minNum) 60 | 61 | > 随机显示一些名人名言和新闻事件。套用下面的公式，就可以利用 Math.random()从某个整数范围内随机选择一个值。 62 | 63 | 值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值) 64 | 65 | ### 其它方法 66 | 67 | Math.abs(num) 返回 num 的绝对值 68 | Math.asin(x) 返回 x 的反正弦值 69 | Math.exp(num) 返回 Math.E 的 num 次幂 70 | Math.atan(x) 返回 x 的反正切值 71 | Math.log(num) 返回 num 的自然对数 72 | Math.atan2(y,x) 返回 y/x 的反正切值 73 | Math.pow(num,power) 返回 num 的 power 次幂 74 | Math.cos(x) 返回 x 的余弦值 75 | Math.sqrt(num) 返回 num 的平方根 76 | Math.sin(x) 返回 x 的正弦值 77 | Math.acos(x) 返回 x 的反余弦值 78 | Math.tan(x) 返回 x 的正切值 -------------------------------------------------------------------------------- /研究Number类/README.md: -------------------------------------------------------------------------------- 1 | # Number 类型 2 | 3 | 首先输出看有哪些方法； 4 | 5 | console.log(new Number()) 6 | 7 | 方法如下： 8 | 9 | toExponential 10 | toFixed 11 | toLocaleString 12 | toPrecision 13 | toString 14 | valueOf 15 | 16 | 17 | ![](http://i.imgur.com/PCHvpCF.png) 18 | 19 | Number 类型也重写了 valueOf() 、 toLocaleString() 和 toString()方法。重写后的 valueOf() 方法返回对象表示的基本类型的数值，另外两个方法则返回字符串形式的数值； 20 | 21 | > 为 toString() 方法传递一个表示基数的参数，告诉它返回几进制数值的字符串形式， 22 | 23 | var num = 10; 24 | console.log(num.toString()); //"10" 25 | console.log(num.toString(2)); //"1010" 26 | console.log(num.toString(8)); //"12" 27 | console.log(num.toString(10)); //"10" 28 | console.log(num.toString(16)); //"a" 29 | 30 | ### toFixed 保留几位小数 31 | 32 | > 按照指定的小数位返回数值的字符串表示 33 | 34 | var num1 = 10, 35 | num2=20.1231231231232; 36 | console.log(num1.toFixed(2)); //"10.00" 37 | console.log(num2.toFixed(2)); //"20.12" 38 | 39 | 能够自动舍入的特性，使得 toFixed() 方法很适合处理货币值。但需要注意的是，不同浏览器给这个方法设定的舍入规则可能会有所不同。在给 toFixed() 传入 0 的情况下，IE8 及之前版本不能正确舍入范围在{(0.94,0.5],[0.5,0.94)}之间的值。对于这个范围内的值，IE 会返回 0，而不是1 或 1；其他浏览器都能返回正确的值。IE9 修复了这个问题。 40 | 41 | > toFixed() 方法可以表示带有 0 到 20 个小数位的数值。但这只是标准实现的范围，有些浏览器也可能支持更多位数。 42 | 43 | 44 | ### 不建议直接实例化 Number 类型 45 | 46 | var numberObject = new Number(10); 47 | var numberValue = 10; 48 | console.log(typeof numberObject); //"object" 49 | console.log(typeof numberValue); //"number" 50 | console.log(numberObject instanceof Number); //true 51 | console.log(numberValue instanceof Number); //false 52 | 53 | 在使用 typeof 操作符测试基本类型数值时，始终会返回 "number" ，而在测试 Number 对象时，则会返回 "object" 。类似地， Number 对象是 Number 类型的实例，而基本类型的数值则不是。 -------------------------------------------------------------------------------- /研究Object类/README.md: -------------------------------------------------------------------------------- 1 | 2 | 对象类型是JavaScript语言的基础，JS中万物皆对象；我们看到的大多数引用类型值都是Object类型的实例；而且Object也是JS中最多的一个数据类型；Object类型的数据是储存和传输数据的最佳选择； 3 | 4 | # Object类型的知识点 5 | 6 | - 创建的方式 7 | - 使用方式 8 | - 常用的方法 9 | 10 | 11 | 12 | ### 一、创建的方式 13 | 14 | - 构造函数模式 15 | 16 | var person1 = new Object(); 17 | person.name = "broszhu"; 18 | person.age = "26"; 19 | 20 | - 字面量方式 21 | 22 | 对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程 23 | 24 | var person2 = { 25 | name : "broszhu", 26 | age : "26" 27 | }; 28 | 29 | > 以key:value的方式定义，中间用","来隔开；因为 age 是这个对象的最后一个属性。在最后一个属性后面添加逗号，会在 IE7 及更早版本 中导致错误，在使用webStorm之类的语法检测IDE中也会提示报错； 30 | 31 | var person3 = {}; //与 与 new Object() 相同 32 | person.name = "broszhu"; 33 | person.age = "26"; 34 | 35 | 36 | **对象字面量语法，因为这种语法要求的代码量少，而且能够给人封装数据的感觉。实际上，对象字面量也是向函数传递大量可选参数的首选方式** 37 | 38 | 就像上面的person2，传参的时候，直接传person2进去；阅读的时候，一眼就看清楚穿进去的是什么; 39 | 40 | 41 | ### 二、函数的调用 42 | 43 | - 点表示法(这也是很多面向对象语言中通用的语法) 44 | - 方括号表示法(使用方括号表示法来访问对象的属性。在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中) 45 | 46 | console.log(person2["name"]); //"broszhu" 47 | console.log(person2.name); //"broszhu" 48 | 49 | > 从功能上看，这两种访问对象属性的方法没有任何区别。**方括号语法的主要优点是可以通过变量来访问属性**; 50 | 51 | var propertyName = "name"; 52 | console.log(person2[propertyName]); //"broszhu" 53 | 54 | > 除非必须使用变量来访问属性，否则我们建议使用点表示法。 55 | 56 | **[↑ 返回目录](#zero)** 57 | 58 | 59 | ### 三、常用的方法 60 | 61 | - toString 62 | - 返回所有实例所属类的信息，通常用这个检测数据类型； 63 | 64 | Object.prototype.toString.call() 65 | 66 | - hasOwnProperty 67 | - 检测某个属性是否是这个对象的私有属性； 68 | - in 69 | - 检测摸个属性是否是这个对象的属性 70 | - properyIsEnumerable 71 | - 对象的某个属性是否是可以枚举类型的； 72 | 73 | 74 | **[↑ 返回目录](#zero)** -------------------------------------------------------------------------------- /研究全局对象/README.md: -------------------------------------------------------------------------------- 1 | # 全局对象(也有叫global对象的,意思是这个对象里面的函数，都是全局可以直接使用的函数) 2 | 3 | - isNaN() 4 | - isFinite() 5 | - parseInt() 与 parseFloat() 6 | - encodeURI() 和 encodeURIComponent() 7 | - decodeURI() 和 decodeURIComponent() 8 | - eval() 9 | 10 | 11 | # encodeURI() 和 encodeURIComponent() 12 | 13 | var uri1 = "http://www.wrox.com/illegal value.htm#start"; 14 | var uri2 = "https://www.google.com.hk/webhp?tab=Tw"; 15 | 16 | console.log(encodeURI(uri1));//http://www.wrox.com/illegal%20value.htm#start 17 | console.log(encodeURI(uri2));//https://www.google.com.hk/webhp?tab=Tw 18 | console.log(encodeURIComponent(uri1));//http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start 19 | console.log(encodeURIComponent(uri2));//https%3A%2F%2Fwww.google.com.hk%2Fwebhp%3Ftab%3DTw 20 | 21 | **encodeURI() 不会对本身属于 URI 的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而 encodeURIComponent() 则会对它发现的任何非标准字符进行编码。** 22 | 23 | 使用 encodeURI() 编码后的结果是除了空格之外的其他字符都原封不动，只有空格被替换成了%20 。而 encodeURIComponent() 方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个 URI使用 encodeURI() ，而只能对附加在现有 URI后面的字符串使用 encodeURIComponent()的原因所在。 24 | 25 | Global 对象的 encodeURI() 和 encodeURIComponent() 方法可以对 URI（Uniform ResourceIdentifiers，通用资源标识符）进行编码，以便发送给浏览器。有效的 URI 中不能包含某些字符，例如空格。而这两个 URI 编码方法就可以对 URI 进行编码，它们用特殊的 UTF-8 编码替换所有无效的字符，从而让浏览器能够接受和理解。 26 | 27 | >使用 encodeURIComponent() 方法的时候要比使用encodeURI()更多，因为在实践中更常见的是对查询字符串参数而不是对基础URI进行编码。 28 | 29 | # decodeURI() 和 decodeURIComponent() 30 | 31 | 其中， decodeURI() 只能对使用 encodeURI() 替换的字符进行解码,decodeURIComponent可以解析encodeURI的。 32 | 33 | var uri1 = "https%3A%2F%2Fwww.google.com.hk%2Fwebhp%3Ftab%3DTw"; 34 | var uri2 = "http://www.wrox.com/illegal%20value.htm#start"; 35 | console.log(decodeURI(uri1));//https%3A%2F%2Fwww.google.com.hk%2Fwebhp%3Ftab%3DTw 36 | console.log(decodeURIComponent(uri1));//https://www.google.com.hk/webhp?tab=Tw 37 | 38 | console.log(decodeURI(uri2));//http://www.wrox.com/illegal value.htm#start 39 | console.log(decodeURIComponent(uri2));//http://www.wrox.com/illegal value.htm#start 40 | 41 | # eval() 方法 42 | 43 | eval()方法就像是一个完整的 ECMAScript 解析器,它只接受一个参数，即要执行的 ECMAScript （或 JavaScript）字符串。 44 | 45 | eval("console.log('test name')"); //"test name" 46 | 47 | var msg = "hello world"; 48 | eval("console.log(msg)"); //"hello world" 49 | 50 | 51 | > 在 eval() 中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中；它们只在 eval() 执行的时候创建。 52 | 53 | var testVar; 54 | console.log(testVar);//undefined 55 | console.log(msg);//Uncaught ReferenceError: msg is not defined 56 | eval('var msg = "hello world eval"'); 57 | eval("console.log(msg)"); //"hello world" 58 | 59 | > 严格模式下，在外部访问不到 eval() 中创建的任何变量或函数，因此前面两个例子都会导致错误。同样，在严格模式下，为 eval 赋值也会导致错误 60 | 61 | #### json字符串，转为json对象； 62 | 63 | var myJSONText = '{"bindings": [{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}]}'; 64 | 65 | console.log(typeof myJSONText);//string 66 | 67 | var testJSONObject=eval("("+myJSONText+")"); 68 | console.log(typeof testJSONObject);//Object 69 | console.log(testJSONObject.bindings); 70 | 71 | -------------------------------------------------------------------------------- /研究全局对象/Timers/Timers.md: -------------------------------------------------------------------------------- 1 | ### 定时器 2 | window上的方法；共四个 3 | - window.setTimeout 单次定时器 4 | - window.setInterval 间隔定时器 5 | - window.clearTimeout 清除单次定时器 6 | - window.clearInterval 清除间隔定时器 7 | 8 | 因为浏览器上最大的就是window；所以window不写的，直接写 setTimeout即可； 9 | 10 | ##### setTimeout 11 | 12 | setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式（间隔的单位上毫秒，1s=1000ms）。 13 | 14 | var oBtn=document.getElementById("btn1"); 15 | oBtn.onclick=function () { 16 | testClick("2222") 17 | }; 18 | function testClick(arg) { 19 | setTimeout(function () { 20 | console.log("hello:"+arg) 21 | },2000); 22 | } 23 | 24 | 注意：setTimeout() 只执行 function 内的代码 一次。如果要多次调用，请使用 setInterval() 或者 在function内 自身再次调用 setTimeout()。 25 | 26 | -------------------------------------------------------------------------------- /研究全局对象/Timers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Window 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 | 22 |
23 | 24 |
25 |
26 |
27 | 28 | 41 | 42 | -------------------------------------------------------------------------------- /表达式和运算符/1.%运算符.js: -------------------------------------------------------------------------------- 1 | var times=123453;//求多少分，多少秒； 2 | var targetTime=parseInt(times/60)+"分"+times%60+"秒"; 3 | console.log(targetTime); 4 | //思考：等于多少天，多少小时，多少分，多少秒 -------------------------------------------------------------------------------- /表达式和运算符/2.算术运算符.js: -------------------------------------------------------------------------------- 1 | //连接字符串，把数值转换为字符串 2 | var strOne="abc", 3 | strTwo="xyz"; 4 | console.log(strOne+strTwo);//abcxyz 5 | console.log(strOne+123);//abc123 6 | 7 | //多次运算 8 | var testOne="字符串"; 9 | console.log(testOne+2+5);//字符串25 10 | console.log(testOne+(2+5));//字符串7 11 | 12 | var strEmpty=""; 13 | var testNum=222; 14 | var targetData=strEmpty+testNum; 15 | console.log(typeof testNum);//number 16 | console.log(typeof targetData);//string 17 | 18 | var num=0; 19 | num=num+2; 20 | num=num*3; 21 | num=num/2; 22 | num++; 23 | num--; 24 | num+=1; 25 | num-=2; 26 | num*=3; 27 | num/=2; 28 | num%3; 29 | console.log(num); 30 | 31 | //操作数类型和结果类型 32 | console.log("5"+"3");//53 33 | console.log("5"-"3");//2 34 | console.log("5"*"3");//15 35 | console.log("15"/"3");//5 -------------------------------------------------------------------------------- /表达式和运算符/3.关系运算符.js: -------------------------------------------------------------------------------- 1 | console.log("20">"100000");//true 2 | console.log(null>2);//false 3 | console.log(NaN>2);//false 4 | 5 | //关系操作符 6 | var testNum=3; 7 | console.log("下面是关系操作符"); 8 | console.log(testNum==1); 9 | console.log(testNum===1); 10 | console.log(testNum!=1); 11 | console.log(testNum>1); 12 | console.log(testNum>=1); 13 | console.log(testNum<1); 14 | console.log(testNum<=1); -------------------------------------------------------------------------------- /表达式和运算符/4.相等运算符.js: -------------------------------------------------------------------------------- 1 | console.log(null==0);//false 2 | console.log(false==0);//true 3 | console.log({}=="");//true 4 | 5 | //转换分析1 6 | console.log("zhuanbang"?true:false);//true,因为非空的字符串是一个真值； 7 | 8 | //转换分析2 9 | console.log("zhuanbang"==true);//这个时候输出什么呢？在分析一里非空字符串是一个true，那么非空字符串==true吗？ 10 | 11 | //转换分析3 12 | console.log("zhuanbang"==false);//如果上面的的返回不是true，那么这个会返回true吗？ 13 | 14 | /*转换分析2-解析 15 | * 1、右边的布尔值会转为数字,true->1;"zhuanbang"==1 16 | * 2、左边的字符串会转为数字，"zhuanbang"因为里面有字母，所以转换为NaN;NaN==1 17 | * 3、NaN和任何数据都不想等，包括自己，所以结果是false，并不是true； 18 | * */ 19 | 20 | /* 21 | * 1、右边的布尔值会转为数字,false->0;"zhuanbang"==0 22 | * 2、左边的字符串会转为数字，"zhuanbang"因为里面有字母，所以转换为NaN;NaN==0 23 | * 3、NaN和任何数据都不想等，包括自己，所以结果是false，结果也不是true 24 | * */ 25 | 26 | 27 | //相同的小分析 28 | console.log("zhuanbang"===true); 29 | console.log("1"===1); 30 | console.log("zhuanbang"==="zhuanbang"); 31 | var person1={name:"zhuanbang"}; 32 | var person2={name:"zhuanbang"}; 33 | console.log(person1===person2);//false, 是不同的引用地址；在堆内存中储存是不一样的； -------------------------------------------------------------------------------- /表达式和运算符/5.逻辑运算符.js: -------------------------------------------------------------------------------- 1 | console.log(!true);//false 2 | console.log(true && false);//false 3 | console.log(true || false);//true 4 | 5 | var a="", 6 | b="B有值"; 7 | var result=a||"A的值是假的", 8 | result2=b||"B的值是假的"; 9 | console.log(result); 10 | console.log(result2); -------------------------------------------------------------------------------- /表达式和运算符/6.位运算符.js: -------------------------------------------------------------------------------- 1 | console.log('5 & 1:', (5 & 1)); 2 | console.log('5 | 1:', (5 | 1)); 3 | console.log('~ 5:', (~5)); 4 | console.log('5 ^ 1:', (5 ^ 1)); 5 | console.log('5 << 1:', (5 << 1)); 6 | console.log('5 >> 1:', (5 >> 1)); -------------------------------------------------------------------------------- /表达式和运算符/7.三元运算符.js: -------------------------------------------------------------------------------- 1 | function trueOrFalse(val) { 2 | return val?console.log(val+" is true"):console.log(val+" is false") 3 | } 4 | trueOrFalse(null); 5 | trueOrFalse(undefined); 6 | trueOrFalse(0); 7 | trueOrFalse(NaN); 8 | trueOrFalse(-0);//0===-0 9 | trueOrFalse(false); 10 | trueOrFalse(""); 11 | trueOrFalse(" "); 12 | trueOrFalse({}); 13 | trueOrFalse([]); 14 | trueOrFalse(1); -------------------------------------------------------------------------------- /面向对象和继承方式/函数的三种角色理解.md: -------------------------------------------------------------------------------- 1 | # 函数的三种角色 2 | 3 | var num = 0; 4 | function Fn(num) { 5 | 　　arguments[0] = 100; 6 | 　　this.num = 200; 7 | 　　console.log(num); 8 | 　　console.log(this.num); 9 | 　　return num; 10 | } 11 | 12 | Fn.num = 400; 13 | Fn.prototype.num = 300; 14 | Fn.prototype.getNum = function () { 15 | console.log(this.num); 16 | }; 17 | 18 | var f = new Fn(num); 19 | console.log(f.num); 20 | f.getNum(); 21 | Fn.prototype.getNum(); 22 | console.log(num); 23 | 24 | var n = Fn(num); 25 | console.log(n); 26 | console.log(num); 27 | 28 | 解析思路如下： 29 | 30 | var num = 0; 31 | function Fn(num) { 32 | 　　arguments[0] = 100; 33 | 　　this.num = 200; 34 | 　　console.log(num);//100 35 | 　　console.log(this.num);//200 36 | 　　return num; 37 | } 38 | 39 | Fn.num = 400; 40 | Fn.prototype.num = 300; 41 | Fn.prototype.getNum = function () { 42 | console.log(this.num); 43 | }; 44 | 45 | var f = new Fn(num); 46 | console.log(f.num);//200 47 | f.getNum();//200, 48 | Fn.prototype.getNum();//300 49 | console.log(num);//0 50 | 51 | var n = Fn(num); 52 | console.log(n);//100,200,100 53 | console.log(num);//200 -------------------------------------------------------------------------------- /预解释-作用域-this关键字-闭包/this关键字.md: -------------------------------------------------------------------------------- 1 | # this关键字 2 | 3 | - this和content的区别 4 | - 如何区分this呢 5 | 6 | 7 | 研究的this都是指[函数执行中的this] 8 | 9 | ### this和content的区别 10 | 11 | JS中this是执行的主体(谁来执行的this就是谁),context是执行所在的范围(在哪执行的上下文就是谁) -> "this和context没有必然的关系" 12 | 13 | > 例如：张三在沙县吃饭,this->张三 context->沙县小吃；张三和沙县小吃没有必然关系； 14 | 15 | function 吃饭(){ 16 | this->张三 17 | } 18 | 张三.吃饭(); 19 | ~function(){ 20 | 张三.吃饭(); 21 | }(); 22 | 23 | ### 如何的区分this呢 24 | 25 | this:当前函数执行的主体,它和函数在哪定义的或者在哪执行的都没有任何关系；如何的区分this呢? 26 | 1、函数执行,首先看函数名前面是否有".",有的话,"."前面是谁this就是谁;没有的话this就是window 27 | 2、自执行函数中的this永远是window，（window去执行的，很多时候window可以省略） 28 | 3、给元素的某一个事件绑定方法,当事件触发的时候,执行对应的方法,方法中的this是当前的元素；比如选项卡的代码中； 29 | 30 | function fn() { 31 | console.log(this); 32 | } 33 | var obj = {fn: fn}; 34 | fn();//this->window 35 | obj.fn();//this->obj 36 | 37 | > 事件执行，不同的写法，this指向是不同的 38 | 39 | document.getElementById("div1").onclick = fn;//fn中的this是#div1 40 | document.getElementById("div1").onclick = function () { 41 | fn();//this->window 42 | }; 43 | function fn() { 44 | console.log(this); 45 | } 46 | 47 | 48 | > 不同作用域的 49 | 50 | function sum() { 51 | console.log("sum",this);//this->window 52 | fn();//this->window 53 | } 54 | sum(); 55 | var oo = { 56 | sum: function () { 57 | console.log("oo.sum",this);//this->oo 58 | fn();//this->window 59 | } 60 | }; 61 | oo.sum(); 62 | function fn() { 63 | console.log(this); 64 | } 65 | 66 | 67 | 你以为 你以为的 就是你以为的 68 | 69 | -------------------------------------------------------------------------------- /预解释-作用域-this关键字-闭包/变量和属性不存在时候的区别.md: -------------------------------------------------------------------------------- 1 | # 变量和属性不存在时候的区别 2 | 3 | 4 | 在JS中，一个变量没有定义，不可以去做读的操作，但是可以用typeof 去运算 5 | 6 | typeof a//去运算这个a，会得到"undefined"字符串结果 7 | undefined 8 | "undefined"; 9 | 10 | - 如果变量不存在，不能直接去做读的操作; 11 | - 如果属性没有定义，可以去做读的操作； 12 | 13 | 如下：我们从来没有定义过一个变量叫aabb 14 | 15 | console.log(window.aabb);//这样的方式去读aabb不会报错 16 | console.log(aabb);//这样就会报错 -------------------------------------------------------------------------------- /预解释-作用域-this关键字-闭包/投票的实现原理.md: -------------------------------------------------------------------------------- 1 | # 投票的实现原理 2 | 3 | 要求：实现点击一下，加一个数字； 4 | 5 | 扩展:支持和反对的都有,支持就是累加1,反对就是减1；不小于0； 6 | 7 |
8 |

问题: 同意否？

9 |
10 | 我非常赞同以上的观点 11 | 0 12 |
13 |
14 | 15 | var oBtn = document.getElementById("btn"); 16 | var spanNum = document.getElementById("spanNum"); 17 | oBtn.onclick = function () { 18 | var count = 0; 19 | count++; 20 | spanNum.innerHTML = count; 21 | }; 22 | 23 | > 不行,每一次点击div的时候都会重新的执行我们的function,重新的形成一个私有的作用域,从新的开始预解释,代码执行,并且执行完成后当前的作用域还销毁了->每一次count都是从0开始的 24 | 25 | ##### 1、利用全局作用域不销毁的原理,我们把需要累加的变量count定义为全局变量实现数字的一直累加 26 | 27 | var count = 0; 28 | oBtn.onclick = function () { 29 | count++; 30 | spanNum.innerHTML = count; 31 | }; 32 | 33 | > 弊端：我们在真实的项目中为了避免全局变量相互之间的冲突,我们一般是减少(禁用)全局变量的使用的 34 | 35 | ##### 2、我们自己创造一个不销毁的私有的作用域来存储count 36 | 37 | 自执行函数执行,形成一个私有的作用域A,A中返回了一个堆内存的地址,被A外面的onclick接收了,那么A这个私有的作用域就不在销毁了,也就是里面的私有变量count也不再销毁了,这样的话count就可以一直累加下去了... 38 | 39 | oBtn.onclick = (function () { 40 | var count = 0; 41 | return function () { 42 | count++; 43 | spanNum.innerHTML = count; 44 | } 45 | })(); 46 | 47 | //或者写成下面的也可以 48 | (function () { 49 | var count = 0; 50 | oBtn.onclick = function () { 51 | count++; 52 | spanNum.innerHTML = count; 53 | } 54 | })(); 55 | 56 | > 弊端:有一个不销毁的私有的作用域还是浪费性能的 57 | 58 | ##### 3、使用自定义属性(推荐使用) 59 | 60 | 把需要累加的count存放在当前元素的自定义属性上,并且每一次点击的时候实现累加 61 | 62 | var oBtn = document.getElementById("btn"); 63 | var spanNum = document.getElementById("spanNum"); 64 | oBtn.count = 0; 65 | oBtn.onclick = function () { 66 | 　　spanNum.innerHTML = ++this.count; 67 | }; 68 | 69 | ##### 4、使用innerHTML的方式 70 | 71 | innerHTML:是元素的一个属性,用来存储或者设置元素里面内容的(获取的内容都是一个字符串) 72 | 73 | oBtn.onclick = function () { 74 | var oldNum = spanNum.innerHTML; 75 | //下面两个都可以 76 | // spanNum.innerHTML = Number(oldNum) + 1; 77 | spanNum.innerHTML++; 78 | } 79 | --------------------------------------------------------------------------------