├── .gitignore ├── CSS3 ├── 1-课程 │ ├── 1-属性选择器.html │ ├── 2-属性选择器.html │ ├── 3-属性选择器.html │ ├── 4-属性选择器.html │ ├── 5-属性选择器.html │ ├── 6-属性选择器.html │ └── 7-属性选择器-p[miaov=b].html ├── 1、stick footer.html ├── 2-课程 │ ├── 2.1-弹性盒模型.html │ ├── 2.10-响应式 .html │ ├── 2.11-响应式.html │ ├── 2.12-倒影.html │ ├── 2.13-倒影.html │ ├── 2.14-倒影.html │ ├── 2.15-渐变.html │ ├── 2.16-resize.html │ ├── 2.17-怪异盒模型.html │ ├── 2.2-弹性盒模型.html │ ├── 2.3-弹性盒模型.html │ ├── 2.4-弹性盒模型.html │ ├── 2.5-弹性盒模型.html │ ├── 2.6-弹性盒模型.html │ ├── 2.7-弹性盒模型.html │ ├── 2.8-CSS3分栏布局.html │ └── 2.9-响应式.html ├── 3-css3课件 │ ├── 10_边框背景.html │ ├── 11_边框颜色.html │ ├── 12_线性渐变.html │ ├── 13_线性渐变.html │ ├── 14_线性渐变.html │ ├── 15_线性渐变.html │ ├── 16_进度条.html │ ├── 17_多背景.html │ ├── 18_百度光斑.html │ ├── 19_线性渐变.html │ ├── 1_圆角.html │ ├── 20_径向渐变.html │ ├── 21_径向渐变.html │ ├── 22_径向渐变.html │ ├── 23_径向渐变.html │ ├── 24_径向渐变的关键字.html │ ├── 26_背景尺寸.html │ ├── 2_圆角.html │ ├── 3_圆角.html │ ├── 4_圆角.html │ ├── 5_圆角.html │ ├── 6_圆角.html │ ├── 7_圆角.html │ ├── 8_风车.html │ ├── 9_边框背景.html │ ├── CSS3第三课 新的UI方案 .pptx │ ├── border.png │ ├── bt_blue.png │ ├── mask.png │ ├── miaov.jpg │ ├── miaov2.jpg │ ├── new_bg.png │ └── 幻灯片效果 │ │ └── img │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── arrow_on.png │ │ ├── next.png │ │ ├── prev.png │ │ ├── scroll_bg.png │ │ ├── smail_1.gif │ │ ├── smail_2.gif │ │ ├── smail_3.gif │ │ ├── smail_4.gif │ │ └── smail_5.gif └── css-demo │ ├── 01_font-size.html │ ├── 02_font-family.html │ ├── 03_font-weight.html │ ├── 04_font-style.html │ ├── 05_line-height.html │ ├── 06_font.html │ ├── 07_color.html │ ├── 08_text-decoration.html │ ├── 09_text-align.html │ ├── 10_vertical-align.html │ ├── 11_text-indent.html │ ├── 12_white-space.html │ ├── 13_word-wrap.html │ ├── 14_word-break.html │ ├── 15_text-shadow.html │ ├── 16_text-overflow.html │ ├── 17_cursor.html │ ├── 18_inherit.html │ ├── cur.cur │ ├── demo.css │ └── icon.png ├── ES6 ├── 1-let-对象的扩展 │ ├── 10-对象的扩展.html │ ├── 11-对象的扩展.html │ ├── 1_ES6-let关键字.html │ ├── 1_ES6-let关键字_2选项卡.html │ ├── 2-const.html │ ├── 3-解构赋值.html │ ├── 4-字符串扩展.html │ ├── 5-数值扩展.html │ ├── 6-数组的扩展.html │ ├── 7-for-of.html │ ├── 8-数组的扩展.html │ └── 9-对象的扩展.html ├── 2-set │ ├── 1-对象的扩展.html │ ├── 10-promise.html │ ├── 11-async.html │ ├── 12-class.html │ ├── 12.2-class.html │ ├── 13-module.html │ ├── 2-Proxy.html │ ├── 3-observe.html │ ├── 4-函数的扩展.html │ ├── 5-set.html │ ├── 6-map.html │ ├── 7-遍历接口.html │ ├── 8-Generator.html │ ├── 8.2-Generator.html │ └── 9-promise.html └── 3-promise │ └── 1、promise迷你书.html ├── JS相关 ├── BOM │ ├── 1.2、for in window.html │ ├── 1、for in window,document,event.html │ └── 2、prompt.html ├── DOM │ ├── 1、insertBefore.html │ └── 2、Element.getBoundingClientRect().html ├── JS-win10日历效果.html ├── JavaScript专题-冴羽 │ └── 1、跟着underscore学防抖 │ │ ├── 1、防抖.html │ │ └── debounce.js ├── JavaScript设计模式与开发实践-源代码 │ ├── 1 │ │ ├── 1.1.html │ │ ├── 1.2.1.html │ │ ├── 1.2.2.html │ │ ├── 1.2.6.html │ │ ├── 1.3.1.html │ │ ├── 1.4.1.html │ │ └── 1.4.2.html │ ├── 2 │ │ ├── 2.1.1.html │ │ ├── 2.1.2.html │ │ ├── 2.2.1.html │ │ └── 2.2.2.html │ ├── 3 │ │ ├── 3.1.html │ │ └── 3.2.html │ ├── 4 │ │ └── 4.html │ ├── 5 │ │ └── 5.html │ ├── 6 │ │ └── 6.html │ ├── 7 │ │ └── 7.html │ ├── 8 │ │ └── 8.html │ ├── 9 │ │ └── 9.html │ ├── 10 │ │ └── 10.html │ ├── 11 │ │ └── 11.html │ ├── 12 │ │ └── 12.html │ ├── 13 │ │ └── 13.html │ ├── 14 │ │ └── 14.html │ ├── 15 │ │ └── 15.html │ ├── 16 │ │ └── 16.html │ ├── 17 │ │ └── 17.html │ ├── 18 │ │ └── 18.html │ ├── 19 │ │ └── 19.html │ ├── 20 │ │ └── 20.html │ ├── 21 │ │ └── 21.html │ └── 22 │ │ └── 22.html ├── cross-domain-demo │ ├── README.md │ ├── XDR-XMLHttpRequestjQueryJsonp.html │ ├── XDR-serverjson2.php │ ├── XMLHttpRequest.html │ ├── XMLHttpRequestJson.html │ ├── XMLHttpRequestjQuery.html │ ├── XMLHttpRequestjQueryJsonp.html │ ├── document-domain-iframe │ │ └── index.html │ ├── js │ │ ├── jQuery.XDomainRequest.js │ │ └── jquery.xdomainrequest.min.js │ ├── post-message │ │ ├── data.html │ │ └── index.html │ ├── server.php │ ├── serverjson.php │ ├── serverjson2.php │ ├── serverjsonp.php │ └── window-name-iframe │ │ ├── data.html │ │ ├── null.html │ │ ├── window.name-iframe.html │ │ └── window.name-server.php ├── css权重，优先级.html ├── http │ └── 1、http请求签名.html ├── jqueryaddClass.html ├── jquery动画.html ├── jsonp │ ├── jsonp-sina数据.html │ ├── jsonp-百度下拉提示.html │ └── su ├── lazyload.html ├── new date.html ├── oop │ ├── 10、面向对象-改写选项卡-3,多个复用.html │ ├── 11、面向对象2-JS是基于原型的程序.html │ ├── 12、面向对象2-什么是包装对象.html │ ├── 13、面向对象2-面向对象中的原型链.html │ ├── 14、面向对象2-常用属性和方法.html │ ├── 15、面向对象2-常用属性和方法for in-instanceof.html │ ├── 16.1、面向对象2-常用属性和方法（3）-tostring.html │ ├── 16.2、面向对象2-常用属性和方法（3）-toString-2-特殊情况，constructor，instanceof失效.html │ ├── 17、面向对象的继承.html │ ├── 18、面向对象之拷贝继承.html │ ├── 19、面向对象之类式继承.html │ ├── 1、面对对象-基本写法.html │ ├── 20、面向对象之原型继承.html │ ├── 21、面向对象之原型继承.html │ ├── 2、面对对象-工厂模式(封装成函数).html │ ├── 3、面向对象-构造函数(new关键字).html │ ├── 4、面向对象-对象引用.html │ ├── 5、对象引用.html │ ├── 6、面向对象-原型.html │ ├── 7、面向对象-工厂方式之原型.html │ ├── 8、面向对象-改写选项卡.html │ ├── 9、面向对象-改写选项卡-2.html │ ├── es6 Class │ │ ├── Class.js │ │ ├── new-1.html │ │ ├── new-2.html │ │ ├── new-3.html │ │ ├── new-4.html │ │ ├── new-5.html │ │ ├── new-6.html │ │ ├── new-7-Object.create().html │ │ ├── new-8.html │ │ └── new.html │ ├── inherit │ │ ├── 1.原型链继承.html │ │ ├── 2.借用构造函数.html │ │ ├── 3.组合继承——原型链和借用构造函数组合而成.html │ │ ├── 4.原型式继承.html │ │ ├── 5.寄生式继承.html │ │ ├── 6.寄生式组合继承.html │ │ ├── 7.es6-extends.html │ │ ├── ES6继承(extends)关系图By@若川.png │ │ ├── ES6继承(extends)关系图By@若川.xmind │ │ ├── README.md │ │ ├── es5-extends.js │ │ ├── es6-extends-babel-es5.js │ │ ├── es6-extends.js │ │ ├── 构造函数-原型对象-实例关系图By@若川.png │ │ └── 构造函数-原型对象-实例关系图By@若川.xmind │ └── 极客学院高级函数 │ │ ├── 1.2.1、关于包装对象原型的一道面试题.html │ │ ├── 1.2、高级函数-惰性函数.html │ │ ├── 1.3、高级函数-函数柯里化.html │ │ └── 1.4、高级函数-级联函数.html ├── table,nth隔行换色.html ├── 事件 │ ├── 1.1、js的事件委托.html │ ├── 1.2、js的事件委托.html │ ├── 2、事件绑定的两种方式.html │ ├── 3、client.html │ ├── 4、移动终端默认不支持on事件.html │ └── 5、微博发布框.html ├── 函数 │ ├── 10、isEmpty.html │ ├── 1、变量和函数提升.html │ ├── 2、局部、全局变量、作用域.html │ ├── 3、argument-tofix.html │ ├── 4、匿名函数的自执行函数.html │ ├── 5、sum-笔试题.html │ ├── 6.1、变换数字.html │ ├── 6.2、变换数字.html │ ├── 7、打点计时器.html │ ├── 8、语言精粹里的Function.prototype.method.html │ ├── 9、经典的闭包获取当前点击的index值.html │ ├── bind模拟实现 │ │ ├── README.md │ │ ├── bind-0.html │ │ ├── bind-1.html │ │ ├── bind-2.html │ │ ├── bind-3.html │ │ ├── bind-4.html │ │ ├── bind-5.html │ │ ├── bind-6.html │ │ ├── bind-7.html │ │ └── bind-8.html │ ├── call-apply-模拟实现 │ │ ├── README.md │ │ ├── README1.md │ │ ├── apply-1.html │ │ ├── apply-2.html │ │ ├── apply-3.html │ │ ├── apply-4.1-fn、eval.html │ │ ├── apply-4.2.html │ │ ├── apply-4.html │ │ ├── apply-5.html │ │ ├── apply-6.html │ │ ├── call-apply-1.html │ │ ├── call-apply-2.1.html │ │ ├── call-apply-2.2.html │ │ ├── call-apply-2.3.html │ │ ├── call-apply-2.4.html │ │ ├── call-apply-2.html │ │ ├── call-apply-3.html │ │ ├── call-apply-4.html │ │ ├── lodash.js │ │ └── underscore.js │ └── this-指向 │ │ ├── README.md │ │ ├── this-2.html │ │ ├── this-3.html │ │ └── this.html ├── 原生js上下无缝滚动 │ ├── img │ │ ├── 1.jpeg │ │ ├── 2.jpeg │ │ ├── 3.jpeg │ │ ├── 4.jpeg │ │ ├── 5.jpeg │ │ └── arrow.jpg │ └── index.html ├── 原生js淡入淡出 │ ├── img │ │ ├── test1.jpg │ │ ├── test2.jpg │ │ ├── test3.jpg │ │ ├── test4.jpg │ │ └── test5.jpg │ └── 原生js淡入淡出.html ├── 字符串 │ ├── 1、字符串重复.html │ ├── 2、字符串去除空格等.html │ ├── 3、camelCase转驼峰.html │ ├── 4.1、字符串加空格返回-两种方法-split-charAt.html │ ├── 4.2、this指向-字符串加空格函数.html │ └── 5、fromCharCode.html ├── 学习JavaScript数据结构与算法 │ ├── 4.1-4章-ES5 实现队列.html │ ├── 4.2-4章-ES6 实现队列.html │ ├── 4.3-4章-优先队列.html │ ├── 4.4-4章-循环队列-击鼓传花.html │ └── 5.1-链表.html ├── 对象Object │ └── 1、hasOwnProperty.html ├── 控制元素简单的淡入淡出效果类似fadein和fadeout │ ├── index.html │ ├── script.js │ └── style.css ├── 数组 │ ├── 1.1、splice_对象.html │ ├── 1.2、splice数组方法可以像这样实现.html │ ├── 1.3、splice删除被添加数据.html │ ├── 1.4、去重数组中第三个及以上的相同元素.html │ ├── 1、splice、与数组去重.html │ ├── 2、sku组合.html │ ├── 3、map.html │ └── 4、some-every-filter.html ├── 无缝滚动-scrollTop.html ├── 正则表达式 │ ├── 1、match找出数组中的并以数组形式输出.html │ ├── 2、字符串的replace.html │ ├── 3、检测是否全是数字0-9.html │ ├── 4.1、匹配子项.html │ ├── 4.2、匹配子项.html │ ├── 5.1、正则的前项声明和反前项声明.html │ ├── 5.2、添加千分位.html │ ├── 6、查找字符串中出现次数最多的，并计算出次数.html │ ├── 6、蘑菇街-T1-验证.html │ ├── 7、邮箱验证-Reg_console.log.html │ ├── 8、网址的匹配.html │ └── 9、转换驼峰命名.html ├── 算法排序 │ ├── 1、蘑菇街-选择排序-2.html │ └── 2、快速排序.html ├── 网上下载-图片轮播.html ├── 自动生成100li.html ├── 色块翻转.html ├── 计算json数据的长度.html ├── 设计模式 │ ├── 1、8章-观察者模式.html │ ├── 2、7章-迭代器模式.html │ ├── 3、4章-单例模式.html │ ├── 4、5章-策略模式.html │ ├── 5、9章-命令模式.html │ ├── 6.1、15章-装饰者模式.html │ ├── 6.2、15章-装饰者模式.html │ ├── 7.1、16章-状态模式-电灯程序.html │ ├── 7.2、16章-状态模式-电灯程序.html │ ├── 7.3、16章-状态模式-JS版非oop-电灯程序.html │ └── 7.4、16章-状态模式-JS版非oop-电灯程序.html └── 请用最简化CSS代码实现如下描述样式.html ├── README.md ├── angularjs ├── 10-工具方法-filter.html ├── 11-ng-href等.html ├── 12-表格排序.html ├── 2_toDoList │ ├── css │ │ └── bootstrap.min.css │ ├── index.html │ └── js │ │ └── angular.min.js ├── 2、购物计算价格.html ├── 3、工具方法.html ├── 4、工具方法_$scope.$apply.html ├── 5_工具方法_run.html ├── 6_工具方法过滤器.html ├── 7_datalist.html ├── 8_工具方法_filter.html ├── 9_工具方法_angular.bootstrap.html ├── a_servise.html ├── angularjs核心 │ ├── 1、angular原理之双向绑定.html │ └── 2、angular原理之依赖注入.html ├── b_Services 与指令的使用.html ├── c_js 获取 url 后的参数值.html ├── d_angularjs依赖注入.html ├── e_angularjs路由应用.html ├── index.html └── js │ ├── angular.js │ ├── angular.min-1.3.0.js │ └── angular.min.js ├── ast ├── README.md ├── package-lock.json ├── package.json └── src │ └── parse.js ├── chrome前端书签 └── 前端书签-bookmarks_2016_7_26.md ├── html5 ├── 4-lesson │ ├── 1简易祖玛.html │ ├── 2简易祖玛.html │ ├── 3简易祖玛.html │ └── 4简易祖玛.html ├── 5-lesson-HTML5 │ ├── a │ │ ├── 1.iframe.html │ │ ├── 1.window.html │ │ ├── 10.upload.html │ │ ├── 2.iframe.html │ │ ├── 3.window.open.html │ │ ├── 4.window.open.html │ │ ├── 5.iframe.html │ │ ├── 6.postMessage.html │ │ ├── 7.ajax.html │ │ ├── 8.ajax.html │ │ ├── 9.upload.html │ │ ├── ajax.php │ │ ├── post_file.php │ │ └── test.txt │ ├── b │ │ ├── 2.iframe.html │ │ ├── 3.postMessage.html │ │ ├── ajax.php │ │ └── test.txt │ ├── lesson-2 │ │ ├── 1cache.html │ │ ├── 2worker.html │ │ ├── 3canvas.html │ │ ├── 4内容编辑.html │ │ ├── 5语音输入.html │ │ ├── 6桌面提醒.html │ │ ├── cache.manifest │ │ ├── canvas.html │ │ ├── canvas.js │ │ ├── randomArr.js │ │ └── test.js │ └── websocket │ │ ├── server.js │ │ ├── server2.js │ │ ├── server3.js │ │ └── www │ │ ├── client.socket.js │ │ └── index.html ├── 6-lesson │ ├── 1geo.html │ ├── 2geo.html │ ├── 3地图应用.html │ ├── 4storage.html │ ├── 5storage.html │ ├── 6storage.html │ ├── 7storage.html │ ├── miaov.png │ ├── move.js │ └── 行走日记.html ├── 7-lesson │ ├── 1demo.html │ ├── 2.png │ ├── 2demo.html │ ├── 3demo.html │ ├── 4demo.html │ ├── 5demo.html │ ├── 6到声音的导航.html │ ├── 6视频与canvas结合.html │ ├── 7自制播放器.html │ ├── 8自制播放器.html │ ├── HTML5音频与视频.pptx │ ├── Intermission-Walk-in.ogv │ ├── Intermission-Walk-in_512kb.mp4 │ ├── johann_sebastian_bach_air.mp3 │ ├── johann_sebastian_bach_air.ogg │ └── 新建文本文档.txt ├── Storage-数据存储 │ ├── localStorage.html │ └── sessionStorage.html ├── canvas │ ├── 1-canvas.html │ ├── 2-canvas.html │ ├── 3-canvas-圆.html │ └── countdown │ │ ├── countdown.js │ │ ├── digit.js │ │ └── index.html ├── 布局方案 │ ├── IE6居中.html │ └── thead固定-tbody滚动table-fixed.html └── 第二课 │ ├── 1新的选择器.html │ ├── 2新的选择器.html │ ├── 3新的选择器.html │ ├── 4获取class列表属性.html │ ├── HTML5拖放.html │ ├── h5新选择器.html │ ├── js判断是否为微信内置浏览器.html │ └── 用JavaScript将数字转换为大写金额.html ├── jQuery ├── 1-jquery选项卡 │ ├── index.html │ └── jqueryTab.html ├── 2-jquery基础扩展 │ ├── 1-get.html │ ├── 10-insertBefore.html │ ├── 12-编写弹窗.html │ ├── 16-编写拖拽.html │ ├── 17-jquery的插件使用.html │ ├── 18、下拉列表选择.html │ ├── 19、iframe.html │ ├── 2-outerWidth()与offsetWidth的区别.html │ ├── 3-text（）.html │ ├── 4-remove()-detach().html │ ├── 5-$()-onload.html │ ├── 6.1-DOM操作.html │ ├── 6.2-clone().html │ ├── 6.3-wrap().html │ ├── 6.7工具方法.html │ ├── 6.8add.html │ ├── 8-js选项卡改写成jQuery选项卡-2.html │ ├── 8-js选项卡改写成jQuery选项卡.html │ ├── jQuery-返回顶部-2.html │ ├── jQuery-返回顶部.html │ ├── jquery-1.11.1.js │ └── 函数传参.html ├── 3-jQuery.cookie │ ├── index.html │ ├── jquery.cookie.js │ ├── main.js │ └── sub-index.html ├── 4-Google水波按钮 │ └── index.html ├── 5-彩虹列表 │ └── index.html ├── 6-Jquery Ajax+json级联下拉框 │ ├── Jquery Ajax+JSON级联下拉框.html │ ├── js │ │ └── jquery-1.8.3.min.js │ └── json │ │ └── data.json ├── 6、jQuery深拷贝 │ └── index.html ├── jqueryVesion │ ├── jquery-1.11.1.js │ ├── jquery-1.11.1.min.js │ ├── jquery-1.12.2.js │ ├── jquery-1.12.2.min.js │ ├── jquery-2.0.3.js │ ├── jquery-2.0.3.min.js │ ├── jquery-2.2.4.js │ ├── jquery-2.2.4.min.js │ ├── jquery-3.1.0.js │ ├── jquery-3.1.0.min.js │ ├── jquery-3.1.0.slim.js │ └── jquery-3.1.0.slim.min.js └── plugins │ ├── jQuery.placeholder.js │ ├── json2.js │ └── normalize.css ├── less ├── css │ ├── body-bg.css │ └── index.css ├── index.html └── less │ └── index.less ├── mobile ├── 1.1-rem适配方案.html ├── 1.2-rem适配方案.html ├── 1.3-rem适配方案.html └── 1.4-rem适配方案.html ├── mpvue-demo ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .postcssrc.js ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── dist │ └── wx │ │ ├── app.js │ │ ├── app.json │ │ ├── app.wxss │ │ ├── common │ │ ├── manifest.js │ │ ├── vendor.js │ │ └── vendor.wxss │ │ ├── components │ │ ├── card.vue.wxml │ │ └── slots.wxml │ │ ├── pages │ │ ├── counter │ │ │ ├── index.vue.wxml │ │ │ ├── main.js │ │ │ ├── main.json │ │ │ ├── main.wxml │ │ │ └── main.wxss │ │ ├── index │ │ │ ├── index.vue.wxml │ │ │ ├── main.js │ │ │ ├── main.json │ │ │ ├── main.wxml │ │ │ └── main.wxss │ │ └── logs │ │ │ ├── index.vue.wxml │ │ │ ├── main.js │ │ │ ├── main.json │ │ │ ├── main.wxml │ │ │ └── main.wxss │ │ ├── project.config.json │ │ └── static │ │ ├── images │ │ └── user.png │ │ └── tabs │ │ ├── home-active.png │ │ ├── home.png │ │ ├── orders-active.png │ │ └── orders.png ├── index.html ├── package-lock.json ├── package.json ├── package.swan.json ├── project.config.json ├── project.swan.json ├── src │ ├── App.vue │ ├── app.json │ ├── components │ │ └── card.vue │ ├── main.js │ ├── pages │ │ ├── counter │ │ │ ├── index.vue │ │ │ ├── main.js │ │ │ └── store.js │ │ ├── index │ │ │ ├── index.vue │ │ │ └── main.js │ │ └── logs │ │ │ ├── index.vue │ │ │ ├── main.js │ │ │ └── main.json │ └── utils │ │ └── index.js └── static │ ├── .gitkeep │ ├── images │ └── user.png │ └── tabs │ ├── home-active.png │ ├── home.png │ ├── orders-active.png │ └── orders.png ├── myJquery ├── index.html ├── js │ ├── main.js │ └── myJquery.js └── readme.md ├── other-effects ├── HTML5 canvas烟花-元宵 │ ├── back.png │ ├── city.png │ ├── index.html │ ├── small.gif │ └── 欧阳修.jpg ├── 婚纱礼服网站 │ ├── image │ │ ├── flower2.png │ │ ├── foot_bg.png │ │ ├── icon.png │ │ ├── logo.png │ │ ├── logo_gray.jpg │ │ ├── logo_white.png │ │ ├── nav1_01.png │ │ └── new_01.jpg │ ├── index.html │ ├── wedding.css │ ├── wedding.css.bak │ └── wedding.html.bak └── 祝猴年大吉-抖动加运动 │ ├── GIF.gif │ ├── img1.png │ ├── img2.png │ ├── img3.png │ ├── img4.png │ ├── img5.png │ ├── shake-2.html │ ├── shake.html │ └── 祝猴年大吉.pptx ├── react ├── .gitignore ├── app.jsx ├── index.html ├── package.json └── react-demo3 │ ├── React -refs-findDOMNode.html │ ├── React 表单与事件-2.html │ ├── React 表单与事件-3.html │ ├── React 表单与事件-4.html │ ├── board.html │ ├── board2.html │ ├── board3.html │ ├── createClass.html │ ├── createClass2.html │ ├── css │ ├── bootstrap.css │ └── docs.min.css │ ├── disableinput.html │ ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 │ ├── getDefaultProps.html │ ├── image │ └── 1.png │ ├── list.html │ ├── list2.html │ ├── list3.html │ ├── props验证-更多验证规则.html │ ├── props验证.html │ ├── react-学员信息筛选实例.html │ ├── react-生命周期.html │ ├── react-表单.html │ ├── react.this.props.children.html │ ├── react复合组件-state-props.html │ ├── react复合组件.html │ ├── react组件API.html │ ├── react组件嵌套.html │ ├── react购物车数量输入.html │ ├── render.html │ ├── src │ ├── browser.min.js │ ├── pubsub.js │ ├── react-dom.js │ ├── react-with-addons.js │ └── react.js │ ├── state.html │ ├── statusDemo.html │ ├── two-way.html │ └── two-way2.html ├── requirejs ├── index.html └── js │ ├── a.js │ ├── b.js │ ├── build.js │ ├── c.js │ ├── dist │ ├── build.js │ ├── build.txt │ ├── libs │ │ └── jquery-3.1.0.min.js │ ├── main.js │ ├── r.js │ ├── require-2.1.11.js │ └── require-2.1.11.min.js │ ├── libs │ └── jquery-3.1.0.min.js │ ├── main.js │ ├── r.js │ ├── require-2.1.11.js │ └── require-2.1.11.min.js ├── rollup ├── bundle.js ├── package.json ├── rollup.config.example.js ├── rollup.config.js └── src │ ├── foo.js │ └── main.js ├── sass ├── css │ └── color.css ├── gulpfile.js ├── index.html └── scss │ └── color.scss ├── seajs-demo ├── index.html └── js │ ├── module1.js │ ├── module2.js │ ├── module3.js │ └── sea.js ├── svg ├── 10svg.html ├── 11svg.html ├── 12svg.html ├── 13svg.html ├── 14svg.html ├── 15svg.html ├── 16svg.html ├── 17svg.html ├── 1svg-引入方式，circle、rect、line等.html ├── 1svg.svg ├── 2svg-分组g标签.html ├── 3-svg添加文字，添加图片.html ├── 5svg.html ├── 6svg.html ├── 7svg.html ├── 8svg.html ├── 9svg.html └── qrcode.html ├── vuejs ├── 9-vuejs简单多图上传图片 │ ├── 9-vue.js 简单多图上传图片.html │ └── upload.php ├── IFE2017-vue │ └── 1、vue源码分析.html ├── elementUI │ ├── 1、checkbox.html │ ├── 2.1、选择搜索.html │ ├── 2.2、select- 基础多选.html │ ├── 3、tree.html │ ├── 4、组件显示弹窗dialogTable-单向数据流.html │ ├── 5.1、循环出来的，异常时备注不能为空rules.html │ └── 5、循环出来的，异常时备注不能为空rules.html ├── js │ ├── vue.js │ ├── vue.min.js │ └── vue2.js ├── vue-todomvc │ ├── index.html │ ├── js │ │ ├── app.js │ │ ├── routes.js │ │ └── store.js │ ├── node_modules │ │ ├── director │ │ │ └── build │ │ │ │ └── director.js │ │ ├── todomvc-app-css │ │ │ └── index.css │ │ ├── todomvc-common │ │ │ ├── base.css │ │ │ └── base.js │ │ └── vue │ │ │ └── dist │ │ │ └── vue.js │ ├── package.json │ └── readme.md ├── vue1.0 │ ├── 10、表单.html │ ├── 11、显示隐藏.html │ ├── 12、展开全部-收缩全部.html │ ├── 13、组件自定义事件.html │ ├── 14、生命周期.html │ ├── 1、起步综合.html │ ├── 2、计算属性.html │ ├── 3、$watch.html │ ├── 4、计算属性setter.html │ ├── 5、组件.html │ ├── 6、组件-通信.html │ ├── 7、列表渲染-变异数组.html │ ├── 8、列表渲染-track-by.html │ └── 9、class.html ├── vue2.0 │ ├── 10、render函数-v-model.html │ ├── 11、vue-Object.defineProperty源码解析.html │ ├── 12、组件动态传递函数.html │ ├── 13、单选全选SF答题.html │ ├── 1、vue1.0和2.0的区别.html │ ├── 2.1、组件-自定义事件$on,$emit.html │ ├── 2.2、组件-自定义事件$on,$emit.html │ ├── 3、动态组件keep-alive.html │ ├── 4、router.html │ ├── 5.1、父子组件传递数据.html │ ├── 5、父子组件传递数据.html │ ├── 6、所谓的分页.html │ ├── 7、input输入框-只能输入数字.html │ ├── 8.1、单向数据流-直接修改报警告.html │ ├── 8.2、单向数据流-data形式修改.html │ ├── 8.3、单向数据流-computed形式修改.html │ └── 9、selection下拉选择组件.html └── vuex │ ├── 1.1、vuex简单的计数demo.html │ └── 1.2、vuex简单的计数demo.html ├── webpack ├── .gitignore ├── app │ ├── Greeter.js │ ├── config.json │ └── main.js ├── package.json ├── public │ ├── bundle.js │ └── index.html └── webpack.config.js └── zepto.js ├── 1-根据不同浏览器加载不同js.html ├── js ├── jquery-1.11.1.js ├── zepto-v1.0.1-源码注释.js ├── zepto-v1.2.0.js └── zepto.min-v1.2.0.js └── node_modules └── zepto ├── MIT-LICENSE ├── README.md ├── dist ├── zepto.js └── zepto.min.js ├── package.json └── src ├── ajax.js ├── assets.js ├── callbacks.js ├── data.js ├── deferred.js ├── detect.js ├── event.js ├── form.js ├── fx.js ├── fx_methods.js ├── gesture.js ├── ie.js ├── ios3.js ├── selector.js ├── stack.js ├── touch.js └── zepto.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .idea/html5.iml 3 | .idea/HTML5.iml 4 | .idea/modules.xml 5 | .idea/vcs.xml 6 | .idea/workspace.xml 7 | html5/5-lesson-HTML5/websocket/node_modules/ 8 | node_modules 9 | -------------------------------------------------------------------------------- /CSS3/1-课程/1-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/2-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/3-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/4-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/5-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/6-属性选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |

leo

13 |

杜鹏

14 |

子鼠

15 |

小美

16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/1-课程/7-属性选择器-p[miaov=b].html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自定义属性选择p[miaov|=b] 6 | 10 | 11 | 12 |

rowboat

13 |

lxchuan12

14 |

danran

15 |

轩辕

16 |

无名氏

17 |

lxc

18 | 19 | 20 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.1-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.12-倒影.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.13-倒影.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.14-倒影.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.15-渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.16-resize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.17-怪异盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.2-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.3-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.4-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 15 | 16 | 17 |
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.5-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 19 | 20 | 21 |
22 |
1
23 |
2
24 |
3
25 |
4
26 |
5
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.6-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS3/2-课程/2.7-弹性盒模型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 12 | 13 | 14 |
15 |
1
16 |
2
17 |
3
18 |
4
19 |
5
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/10_边框背景.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/11_边框颜色.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/12_线性渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/13_线性渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/14_线性渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/15_线性渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/16_进度条.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/17_多背景.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/18_百度光斑.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/19_线性渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/1_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/20_径向渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/21_径向渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/22_径向渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/23_径向渐变.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/26_背景尺寸.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/2_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/3_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/4_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/5_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/6_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/7_圆角.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/8_风车.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/9_边框背景.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /CSS3/3-css3课件/CSS3第三课 新的UI方案 .pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/CSS3第三课 新的UI方案 .pptx -------------------------------------------------------------------------------- /CSS3/3-css3课件/border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/border.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/bt_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/bt_blue.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/mask.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/miaov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/miaov.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/miaov2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/miaov2.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/new_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/new_bg.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/1.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/2.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/3.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/4.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/5.jpg -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/arrow_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/arrow_on.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/next.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/prev.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/scroll_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/scroll_bg.png -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/smail_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/smail_1.gif -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/smail_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/smail_2.gif -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/smail_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/smail_3.gif -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/smail_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/smail_4.gif -------------------------------------------------------------------------------- /CSS3/3-css3课件/幻灯片效果/img/smail_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/3-css3课件/幻灯片效果/img/smail_5.gif -------------------------------------------------------------------------------- /CSS3/css-demo/01_font-size.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | font-size 6 | 7 | 16 | 17 | 18 |
19 |

文字大小：font-size:12px;

20 |

文字大小：font-size:16px;

21 |

文字大小：font-size:2em;

22 |

文字大小：font-size:200%;

23 |
24 | 25 | -------------------------------------------------------------------------------- /CSS3/css-demo/02_font-family.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | font-family 6 | 7 | 16 | 17 | 18 |
19 |

字体系列：font-family:arial;

20 |

字体系列：font-family:arial, Verdana, sans-serif;

21 |

字体系列：font-family:Verdana, "microsoft yahei";

22 |

字体系列：font-family:"宋体", serif;

23 |
24 | 25 | -------------------------------------------------------------------------------- /CSS3/css-demo/03_font-weight.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | font-weight 6 | 7 | 15 | 16 | 17 |
18 |

字体粗细：font-weight:bold;

19 |

字体粗细：font-weight:normal;

20 |

字体粗细：font-weight:bold;

21 |
22 | 23 | -------------------------------------------------------------------------------- /CSS3/css-demo/04_font-style.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | font-style 6 | 7 | 16 | 17 | 18 |
19 |

字体风格：font-style:italic;

20 |

字体风格：font-style:normal;

21 |

字体风格：font-style:italic;

22 |

字体风格：font-style:oblique;

23 |
24 | 25 | -------------------------------------------------------------------------------- /CSS3/css-demo/06_font.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | font 6 | 7 | 17 | 18 | 19 |
20 |

缩写：font:30px/2 "Consolas",monospace;

21 |

缩写：font:italic bold 20px/1.5 arial,serif;

22 |

缩写：font:20px arial,serif;

23 |

缩写：font:100px;

24 |

缩写：font:'microsoft yahei';

25 |
26 | 27 | -------------------------------------------------------------------------------- /CSS3/css-demo/07_color.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | color 6 | 7 | 17 | 18 | 19 |
20 |

文字颜色：color:red;

21 |

文字颜色：color:#ff0000;

22 |

文字颜色：color:rgb(255,0,0);

23 |

文字颜色：color:rgba(255,0,0,1);

24 |

文字颜色：color:rgba(255,0,0,0.5);

25 |
26 | 27 | -------------------------------------------------------------------------------- /CSS3/css-demo/08_text-decoration.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | text-decoration 6 | 7 | 14 | 15 | 16 |
17 |

text-decoration:underline;

18 |

text-decoration:underline overline;

19 |

text-decoration:line-through;

20 |
21 | 22 | -------------------------------------------------------------------------------- /CSS3/css-demo/09_text-align.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | text-align 6 | 7 | 16 | 17 | 18 |
19 |

文本对齐：text-align: left;

20 |

文本对齐：text-align: right;

21 |

文本对齐：text-align: center;

22 |

文本对齐：text-align: justify;文本对齐文本对齐

23 |
24 | 25 | -------------------------------------------------------------------------------- /CSS3/css-demo/10_vertical-align.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | vertical-align 6 | 7 | 16 | 17 | 18 |
19 |

文字文字文字

20 |

普通文字普通普通文字对齐20px普通文字

21 |

普通文字普通普通文字对齐sub普通文字

22 |

普通文字普通普通文字对齐super普通文字

23 |
24 | 25 | -------------------------------------------------------------------------------- /CSS3/css-demo/11_text-indent.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | text-indent 6 | 7 | 16 | 17 | 18 |
19 |

首行缩进：text-indent:2em;首行缩进首行缩进首行缩进首行缩进

20 |

首行缩进：text-indent:10px;首行缩进首行缩进首行缩进首行缩进

21 |

首行缩进：text-indent:20%;首行缩进首行缩进首行缩进首行缩进

22 |

首行缩进：text-indent:-2em;首行缩进首行缩进首行缩进首行缩进

23 |

首行缩进：text-indent:-9999px;首行缩进首行缩进首行缩进首行缩进

24 |
25 | 26 | -------------------------------------------------------------------------------- /CSS3/css-demo/13_word-wrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | word-wrap 6 | 7 | 13 | 14 | 15 |
16 |

Hello World Hello World Hello World Hello World 17 | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 18 | Hello World Hello World Hello World Hello World 19 |

20 |

Hello World Hello World Hello World Hello World 21 | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 22 | Hello World Hello World Hello World Hello World 23 |

24 |
25 | 26 | -------------------------------------------------------------------------------- /CSS3/css-demo/14_word-break.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | word-break 6 | 7 | 13 | 14 | 15 |
16 |

Hello World Hello World Hello World Hello World 17 | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 18 | Hello World Hello World Hello World Hello World 19 |

20 |

word-break: break-all; Hello World Hello World 21 | xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 22 | Hello World Hello World Hello World Hello World 23 |

24 |
25 | 26 | -------------------------------------------------------------------------------- /CSS3/css-demo/15_text-shadow.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | text-shadow 6 | 7 | 17 | 18 | 19 |
20 |

文字阴影：text-shadow:1px 2px #f00;

21 |

文字阴影：text-shadow:1px 2px 3px #f00;

22 |

文字阴影：text-shadow:1px 2px 3px;

23 |

文字阴影：text-shadow:1px 2px rgba(255,0,0,0.5);

24 |

文字阴影：text-shadow:1px 2px #f00, 1px 2px 3px;

25 |
26 | 27 | -------------------------------------------------------------------------------- /CSS3/css-demo/16_text-overflow.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | text-overflow 6 | 7 | 13 | 14 | 15 |
16 |

文本溢出：text-overflow:ellipsis;文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出

17 |

文本溢出：text-overflow:ellipsis;文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出

18 |
19 | 20 | -------------------------------------------------------------------------------- /CSS3/css-demo/17_cursor.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | cursor 6 | 7 | 18 | 19 | 20 |
21 |

指针：cursor:auto;

22 |

指针：cursor:default;

23 |

指针：cursor:pointer;

24 |

指针：cursor:help;

25 |

指针：cursor:move;

26 |

指针：cursor:none;

27 |

指针：cursor:url(cur.cur),pointer;

28 |
29 | 30 | -------------------------------------------------------------------------------- /CSS3/css-demo/18_inherit.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | inherit 6 | 7 | 15 | 16 | 17 |
18 |

字体系列：font-family:"Consolas";

19 |

字体系列：font-family:"microsoft yahei";

20 |

字体系列：font-family:inherit;

21 |
22 | 23 | -------------------------------------------------------------------------------- /CSS3/css-demo/cur.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/css-demo/cur.cur -------------------------------------------------------------------------------- /CSS3/css-demo/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/CSS3/css-demo/icon.png -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/11-对象的扩展.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/2-const.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 27 | 28 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/3-解构赋值.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 47 | 48 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/5-数值扩展.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/7-for-of.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/8-数组的扩展.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 32 | 33 | -------------------------------------------------------------------------------- /ES6/1-let-对象的扩展/9-对象的扩展.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 48 | 49 | -------------------------------------------------------------------------------- /ES6/2-set/1-对象的扩展.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /ES6/2-set/11-async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 21 | 22 | -------------------------------------------------------------------------------- /ES6/2-set/12-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 46 | 47 | -------------------------------------------------------------------------------- /ES6/2-set/2-Proxy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 44 | 45 | -------------------------------------------------------------------------------- /ES6/2-set/3-observe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 27 | 28 | -------------------------------------------------------------------------------- /ES6/2-set/8-Generator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 26 | 27 | -------------------------------------------------------------------------------- /ES6/2-set/8.2-Generator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | generator 6 | 7 | 8 | 32 | 33 | -------------------------------------------------------------------------------- /ES6/3-promise/1、promise迷你书.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 23 | 24 | -------------------------------------------------------------------------------- /JS相关/BOM/1.2、for in window.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /JS相关/BOM/1、for in window,document,event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | js-for in window,document,event 6 | 7 | 8 | 9 | 43 | 44 | -------------------------------------------------------------------------------- /JS相关/BOM/2、prompt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 无标题文档 7 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /JS相关/JavaScript专题-冴羽/1、跟着underscore学防抖/1、防抖.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /JS相关/JavaScript专题-冴羽/1、跟着underscore学防抖/debounce.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file debounce.js 3 | * @desc 防抖 this指向和event参数 4 | * @version 0.0.1 5 | * @author 轩辕Rowboat lxchuan12@163.com 6 | * @date 2017-11-30 7 | * @copyright 2017 8 | */ 9 | 10 | var count = 1; 11 | var container = document.getElementById('app'); 12 | 13 | function getUserAction(ev) { 14 | // console.log(ev, this); 15 | container.innerHTML = count++; 16 | }; 17 | 18 | function debounce(func, wait){ 19 | var timer; 20 | return function(){ 21 | var context = this; 22 | var args = arguments; 23 | console.log([...args]); 24 | if(timer){ 25 | clearTimeout(timer); 26 | } 27 | timer = setTimeout(function(){ 28 | func.apply(context, args); 29 | }, wait); 30 | } 31 | } 32 | // container.onmousemove = getUserAction; 33 | container.onmousemove = debounce(getUserAction, 1000); -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/1/1.1.html: -------------------------------------------------------------------------------- 1 |  2 | -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/1/1.2.1.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/1/1.2.2.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/1/1.3.1.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/1/1.4.1.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/19/19.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/JavaScript设计模式与开发实践-源代码/2/2.2.1.html: -------------------------------------------------------------------------------- 1 |  -------------------------------------------------------------------------------- /JS相关/cross-domain-demo/README.md: -------------------------------------------------------------------------------- 1 | # 跨域的一点探索 2 | 3 | 可以使用：http-server 4 | 或者xampp 开启服务，端口号设为8000， 5 | 本地使用localhost:8000访问。即为跨域。 6 | ``` 7 | localhost:8000 8 | 127.0.0.1:8000 9 | ``` -------------------------------------------------------------------------------- /JS相关/cross-domain-demo/post-message/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Post Message 5 | 6 | 7 |
8 |
Frame Color
9 |
10 |
11 | 12 |
13 | http://localhost:8000/ajaxdemo/post-message/index.html 14 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /JS相关/cross-domain-demo/window-name-iframe/data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | data-window.name+iframe 6 | 7 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /JS相关/cross-domain-demo/window-name-iframe/null.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/cross-domain-demo/window-name-iframe/null.html -------------------------------------------------------------------------------- /JS相关/cross-domain-demo/window-name-iframe/window.name-server.php: -------------------------------------------------------------------------------- 1 | window.name = "{\"name\":\"hanzichi\", \"age\":10}"; ' 3 | ?> -------------------------------------------------------------------------------- /JS相关/css权重，优先级.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | edit3 8 | 9 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 |

css Style...

46 | 47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /JS相关/http/1、http请求签名.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |
13 | 22 | 23 | -------------------------------------------------------------------------------- /JS相关/jqueryaddClass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jqueryaddClass 6 | 11 | 12 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /JS相关/jsonp/su: -------------------------------------------------------------------------------- 1 | jQuery1102012135371225320024_1462777864149({"q":"a","p":false,"bs":"oninput","csor":"1","g":[ { "q": "爱奇艺", "t": "n", "st": { "q": "爱奇艺", "new": 0 } }, { "q": "爱奇艺vip免费试用", "t": "n", "st": { "q": "爱奇艺vip免费试用", "new": 0 } }, { "q": "acfun", "t": "n", "st": { "q": "acfun", "new": 0 } }, { "q": "阿里巴巴", "t": "n", "st": { "q": "阿里巴巴", "new": 0 } }, { "q": "安居客", "t": "n", "st": { "q": "安居客", "new": 0 } }, { "q": "阿里巴巴批发网", "t": "n", "st": { "q": "阿里巴巴批发网", "new": 0 } }, { "q": "阿卡丽的神秘商店", "t": "n", "st": { "q": "阿卡丽的神秘商店", "new": 0 } }, { "q": "阿里云", "t": "n", "st": { "q": "阿里云", "new": 0 } }, { "q": "av", "t": "n", "st": { "q": "av", "new": 0 } }, { "q": "a站", "t": "n", "st": { "q": "a站", "new": 0 } } ],"s":["爱奇艺","爱奇艺vip免费试用","acfun","阿里巴巴","安居客","阿里巴巴批发网","阿卡丽的神秘商店","阿里云","av","a站"]}); -------------------------------------------------------------------------------- /JS相关/new date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | new Date() 6 | 7 | 8 | 9 |
10 |
11 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JS相关/oop/11、面向对象2-JS是基于原型的程序.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11-面向对象2-JS是基于原型的程序 6 | 7 | 8 | 35 | 36 | -------------------------------------------------------------------------------- /JS相关/oop/13、面向对象2-面向对象中的原型链.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13-面向对象2-面向对象中的原型链 6 | 7 | 8 | 43 | 44 | -------------------------------------------------------------------------------- /JS相关/oop/1、面对对象-基本写法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1-面向对象-基本写法 6 | 7 | 8 | 24 | 25 | -------------------------------------------------------------------------------- /JS相关/oop/20、面向对象之原型继承.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20-面向对象之原型继承 6 | 7 | 8 | 26 | 27 | -------------------------------------------------------------------------------- /JS相关/oop/21、面向对象之原型继承.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21-拖拽的组件开发 6 | 7 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /JS相关/oop/4、面向对象-对象引用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 4-面向对象-对象引用 6 | 7 | 8 | 30 | 31 | -------------------------------------------------------------------------------- /JS相关/oop/5、对象引用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 5-对象引用 6 | 7 | 8 | 39 | 40 | -------------------------------------------------------------------------------- /JS相关/oop/es6 Class/new-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 25 | 26 | -------------------------------------------------------------------------------- /JS相关/oop/es6 Class/new-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 18 | 19 | -------------------------------------------------------------------------------- /JS相关/oop/es6 Class/new-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 30 | 31 | -------------------------------------------------------------------------------- /JS相关/oop/es6 Class/new-7-Object.create().html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 25 | 26 | -------------------------------------------------------------------------------- /JS相关/oop/es6 Class/new.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 18 | 19 | -------------------------------------------------------------------------------- /JS相关/oop/inherit/1.原型链继承.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 30 | 31 | -------------------------------------------------------------------------------- /JS相关/oop/inherit/5.寄生式继承.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 5.寄生式继承 8 | 9 | 10 | 32 | 33 | -------------------------------------------------------------------------------- /JS相关/oop/inherit/7.es6-extends.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS继承 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JS相关/oop/inherit/ES6继承(extends)关系图By@若川.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/oop/inherit/ES6继承(extends)关系图By@若川.png -------------------------------------------------------------------------------- /JS相关/oop/inherit/ES6继承(extends)关系图By@若川.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/oop/inherit/ES6继承(extends)关系图By@若川.xmind -------------------------------------------------------------------------------- /JS相关/oop/inherit/es6-extends.js: -------------------------------------------------------------------------------- 1 | // ES6 2 | class Parent{ 3 | constructor(name){ 4 | this.name = name; 5 | } 6 | static sayHello(){ 7 | console.log('hello'); 8 | } 9 | sayName(){ 10 | console.log('my name is ' + this.name); 11 | return this.name; 12 | } 13 | } 14 | class Child extends Parent{ 15 | constructor(name, age){ 16 | super(name); 17 | this.age = age; 18 | } 19 | sayAge(){ 20 | console.log('my age is ' + this.age); 21 | return this.age; 22 | } 23 | } 24 | let parent = new Parent('Parent'); 25 | let child = new Child('Child', 18); 26 | console.log('parent: ', parent); // parent: Parent {name: "Parent"} 27 | Parent.sayHello(); // hello 28 | parent.sayName(); // my name is Parent 29 | console.log('child: ', child); // child: Child {name: "Child", age: 18} 30 | Child.sayHello(); // hello 31 | child.sayName(); // my name is Child 32 | child.sayAge(); // my age is 18 -------------------------------------------------------------------------------- /JS相关/oop/inherit/构造函数-原型对象-实例关系图By@若川.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/oop/inherit/构造函数-原型对象-实例关系图By@若川.png -------------------------------------------------------------------------------- /JS相关/oop/inherit/构造函数-原型对象-实例关系图By@若川.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/oop/inherit/构造函数-原型对象-实例关系图By@若川.xmind -------------------------------------------------------------------------------- /JS相关/事件/3、client.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /JS相关/事件/4、移动终端默认不支持on事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 移动终端默认不支持on事件 6 | 13 | 25 | 26 | 27 |
Emulation
28 | 29 | 30 | -------------------------------------------------------------------------------- /JS相关/函数/2、局部、全局变量、作用域.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 作用域 6 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /JS相关/函数/4、匿名函数的自执行函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 自执行的匿名函数 6 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /JS相关/函数/7、打点计时器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 打点计时器 6 | 7 | 8 | 31 | 32 | -------------------------------------------------------------------------------- /JS相关/函数/8、语言精粹里的Function.prototype.method.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8、语言精粹里的Function.prototype.method 6 | 7 | 8 |
9 | JavaScript深入之从原型到原型链 10 |
11 |
12 | 详解prototype与__proto__ 13 |
14 | 
15 | 	
16 | 		document.writeln('Hello world');
17 |         Function.prototype.method = function(name, func){
18 |             this.prototype[name] = func;
19 |             return this;
20 |         }
21 | 	
22 |
23 | 30 | 31 | -------------------------------------------------------------------------------- /JS相关/函数/bind模拟实现/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 面试官问：能否模拟实现bind 4 | 5 |

文章中的例子和测试代码放在`github`中。

6 | 7 | bind模拟实现 github 8 | 9 |
10 | 11 | bind模拟实现 预览地址 bind-0~8.html 12 | 13 |

`F12`看控制台输出，结合`source`面板查看效果更佳。

14 |
-------------------------------------------------------------------------------- /JS相关/函数/call-apply-模拟实现/apply-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 22 | 23 | -------------------------------------------------------------------------------- /JS相关/函数/call-apply-模拟实现/apply-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /JS相关/函数/call-apply-模拟实现/apply-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /JS相关/函数/this-指向/this-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | this 8 | 9 | 10 | 27 | 28 | -------------------------------------------------------------------------------- /JS相关/函数/this-指向/this.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | this 8 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/1.jpeg -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/2.jpeg -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/3.jpeg -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/4.jpeg -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/5.jpeg -------------------------------------------------------------------------------- /JS相关/原生js上下无缝滚动/img/arrow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js上下无缝滚动/img/arrow.jpg -------------------------------------------------------------------------------- /JS相关/原生js淡入淡出/img/test1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js淡入淡出/img/test1.jpg -------------------------------------------------------------------------------- /JS相关/原生js淡入淡出/img/test2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js淡入淡出/img/test2.jpg -------------------------------------------------------------------------------- /JS相关/原生js淡入淡出/img/test3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js淡入淡出/img/test3.jpg -------------------------------------------------------------------------------- /JS相关/原生js淡入淡出/img/test4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js淡入淡出/img/test4.jpg -------------------------------------------------------------------------------- /JS相关/原生js淡入淡出/img/test5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/JS相关/原生js淡入淡出/img/test5.jpg -------------------------------------------------------------------------------- /JS相关/字符串/2、字符串去除空格等.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2、字符串去除空格排序。 6 | 7 | 8 |
trim() IE9+String.prototype.trim()
9 | 21 | 22 | -------------------------------------------------------------------------------- /JS相关/字符串/4.1、字符串加空格返回-两种方法-split-charAt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 字符串加空格返回-两种方法 6 | 7 | 8 | 37 | 38 | -------------------------------------------------------------------------------- /JS相关/字符串/4.2、this指向-字符串加空格函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 笔试题部分 6 | 7 | 8 | 42 | 43 | -------------------------------------------------------------------------------- /JS相关/字符串/5、fromCharCode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | fromCharCode 6 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /JS相关/控制元素简单的淡入淡出效果类似fadein和fadeout/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 原生js代码控制元素简单的淡入淡出效果 6 | 7 | 8 | 9 |
10 |
淡入淡出的JavaScript例子。
11 |
12 | 13 | 14 |
15 |

更多信息可以查看微博。

16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /JS相关/数组/1.1、splice_对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | js 6 | 7 | 8 | 9 | 29 | 30 | -------------------------------------------------------------------------------- /JS相关/数组/1.3、splice删除被添加数据.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1.3、splice删除并添加数据 7 | 8 | 9 | 10 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /JS相关/数组/2、sku组合.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sku组合 6 | 7 | 8 | 25 | 26 | -------------------------------------------------------------------------------- /JS相关/正则表达式/4.1、匹配子项.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 4.1匹配子项 6 | 7 | 8 | 9 | 10 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /JS相关/正则表达式/4.2、匹配子项.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 4.2匹配子项 6 | 7 | 8 | 9 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JS相关/正则表达式/5.1、正则的前项声明和反前项声明.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /JS相关/正则表达式/6、蘑菇街-T1-验证.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | T1-蘑菇街在线笔试 6 | 7 | 8 | 20 | 21 | -------------------------------------------------------------------------------- /JS相关/正则表达式/8、网址的匹配.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /JS相关/计算json数据的长度.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 计算Json数据的长度 6 | 7 | 8 | JSON对象长度和遍历方法 9 | 25 | 26 | -------------------------------------------------------------------------------- /JS相关/请用最简化CSS代码实现如下描述样式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 请用最简化CSS代码实现如下描述样式 6 | 17 | 18 | 19 |
Emulation
20 | 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## HTML5 2 | 学习前端开发技术，动手练习的Demo。 3 | html5、 模板语言、css3、less、sass、 4 | jquery、zepto、bootstrap、angularjs、vuejs、react、gulp、webpack、nodejs等 5 | -------------------------------------------------------------------------------- /angularjs/2_toDoList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | toDoList 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | -------------------------------------------------------------------------------- /angularjs/2、购物计算价格.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angularjs-2-购物金额实例操作 6 | 7 | 8 | 25 | 26 | 27 |
28 |

价格：

29 |

数量：

30 |

费用：{{sum() |currency:"￥"}}

31 |

运费：{{iPhone.fre |currency:"￥"}}

32 |

总额：{{sum()+iPhone.fre|currency:"￥"}}

33 |
34 | 35 | -------------------------------------------------------------------------------- /angularjs/3、工具方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angularjs-3-工具方法 6 | 7 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /angularjs/4、工具方法_$scope.$apply.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angularjs-1-MVVM 6 | 7 | 8 | 27 | 28 | 29 | 30 |
31 | 32 |

{{name}}

33 |
34 |
35 |

{{name}}

36 |
37 | 38 | -------------------------------------------------------------------------------- /angularjs/5_工具方法_run.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 5_工具方法_run 6 | 7 | 8 | 20 | 21 | 22 | 23 | 26 |
27 |

{{name}}

28 |
29 | 30 | -------------------------------------------------------------------------------- /angularjs/7_datalist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 21 | 22 | 23 | 24 |
25 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /angularjs/b_Services 与指令的使用.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angularjs-Services与指令的使用 6 | 7 | 8 |
9 | {{message}}
{{name}}
{{http}}
{{number}} 10 |
11 | 12 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /angularjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angularjs-1-MVVM 6 | 7 | 8 | 19 | 20 | 21 | 22 |
23 | 24 |

{{name}}

25 |
26 |
27 |

{{name}}

28 |
29 | 30 | -------------------------------------------------------------------------------- /ast/README.md: -------------------------------------------------------------------------------- 1 | # ast 2 | -------------------------------------------------------------------------------- /ast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ast", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "recast": "^0.17.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /ast/src/parse.js: -------------------------------------------------------------------------------- 1 | // 给你一把"螺丝刀"——recast 2 | const recast = require("recast"); 3 | 4 | // 你的"机器"——一段代码 5 | // 我们使用了很奇怪格式的代码，想测试是否能维持代码结构 6 | const code = 7 | ` 8 | function add(a, b) { 9 | return a + 10 | // 有什么奇怪的东西混进来了 11 | b 12 | } 13 | ` 14 | // 用螺丝刀解析机器 15 | const ast = recast.parse(code); 16 | 17 | // ast可以处理很巨大的代码文件 18 | // 但我们现在只需要代码块的第一个body，即add函数 19 | const add = ast.program.body[0] 20 | 21 | console.log(add); -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/1.iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/1.window.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/10.upload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/2.iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 26 | 27 | 28 | 29 | 这里是a.com下的2.iframe.html页面 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/3.window.open.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/4.window.open.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 20 | 21 | 22 | 23 | 这是a.com下的4.window.open.html页面 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/5.iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/7.ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/ajax.php: -------------------------------------------------------------------------------- 1 | 1,'msg'=>'错误提交方式')); 7 | } 8 | 9 | if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){ 10 | 11 | $pic = $_FILES['file']; 12 | 13 | if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){ 14 | exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name'])); 15 | } 16 | 17 | } 18 | echo $_FILES['file']['error']; 19 | exit_status(array('code'=>1,'msg'=>'出现了一些错误')); 20 | 21 | function exit_status($str){ 22 | echo json_encode($str); 23 | exit; 24 | } 25 | ?> -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/a/test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/5-lesson-HTML5/a/test.txt -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/b/2.iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 这里是b.com下的2.iframe.html页面 10 | 11 | 12 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/b/3.postMessage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 33 | 34 | 35 | 36 | 这是b.com的postMessage.html页面 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/b/ajax.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/2worker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/4内容编辑.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 |
aaaaaaaaaaa
10 | 11 | 12 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/5语音输入.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/6桌面提醒.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/cache.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | 2.png 4 | 5 | FALLBACK 6 | 7 | style1.css style2.css 8 | 9 | 10 | NETWORK -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/canvas.js: -------------------------------------------------------------------------------- 1 | // JavaScript Document 2 | 3 | importScripts('randomArr.js'); 4 | 5 | self.onmessage = function(ev){ 6 | 7 | var arr = randomArr(ev.data , ev.data/10); 8 | 9 | self.postMessage(arr); 10 | 11 | }; -------------------------------------------------------------------------------- /html5/5-lesson-HTML5/lesson-2/randomArr.js: -------------------------------------------------------------------------------- 1 | // JavaScript Document 2 | 3 | function randomArr(iAll,iNow){ 4 | 5 | var arr = []; 6 | var result = []; 7 | 8 | for(var i=0;i404

你要找的页面被LEO吃了

'); 21 | res.end(); 22 | } else { 23 | res.writeHeader(200, { 24 | 'content-type' : 'text/html;charset="utf-8"' 25 | }); 26 | res.write(data); 27 | res.end(); 28 | } 29 | 30 | }); 31 | 32 | }).listen(8888); 33 | -------------------------------------------------------------------------------- /html5/6-lesson/miaov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/6-lesson/miaov.png -------------------------------------------------------------------------------- /html5/7-lesson/1demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /html5/7-lesson/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/2.png -------------------------------------------------------------------------------- /html5/7-lesson/2demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html5/7-lesson/4demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /html5/7-lesson/5demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 28 | 29 | 30 | 31 | 32 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5/7-lesson/6视频与canvas结合.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 25 | 26 | 27 | 28 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /html5/7-lesson/HTML5音频与视频.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/HTML5音频与视频.pptx -------------------------------------------------------------------------------- /html5/7-lesson/Intermission-Walk-in.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/Intermission-Walk-in.ogv -------------------------------------------------------------------------------- /html5/7-lesson/Intermission-Walk-in_512kb.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/Intermission-Walk-in_512kb.mp4 -------------------------------------------------------------------------------- /html5/7-lesson/johann_sebastian_bach_air.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/johann_sebastian_bach_air.mp3 -------------------------------------------------------------------------------- /html5/7-lesson/johann_sebastian_bach_air.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruochuan12/html5/9251d829762e434861ecc287b1327e11781998e9/html5/7-lesson/johann_sebastian_bach_air.ogg -------------------------------------------------------------------------------- /html5/7-lesson/新建文本文档.txt: -------------------------------------------------------------------------------- 1 | http://s8.qhimg.com/share/audio/piano1/a4.mp3 -------------------------------------------------------------------------------- /html5/Storage-数据存储/sessionStorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5,sessionStorge 6 | 7 | 8 | 0 9 | 10 | 28 | 29 | -------------------------------------------------------------------------------- /html5/canvas/countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 当前浏览器不支持Canvas，请更换浏览器后再试 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /html5/第二课/1新的选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 27 | 28 | 29 | 30 |
div
31 |
div2
32 | 33 | 34 | -------------------------------------------------------------------------------- /html5/第二课/2新的选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 25 | 26 | 27 | 28 |
div
29 |
div2
30 | 31 | 32 | -------------------------------------------------------------------------------- /html5/第二课/3新的选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 17 | 18 | 19 | 20 |
div
21 |
div2
22 | 23 | 24 | -------------------------------------------------------------------------------- /html5/第二课/4获取class列表属性.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 24 | 25 | 26 | 27 |
div
28 | 29 | 30 | -------------------------------------------------------------------------------- /html5/第二课/h5新选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5新选择器 6 | 15 | 16 | 17 |
div1
18 |
div2
19 |
div2
20 | 21 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/10-insertBefore.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | js选项卡改写为jquery选项卡 6 | 8 | 10 | 17 | 18 | 19 |
div
20 | span 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/19、iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19、iframe 6 | 9 | 10 | 11 |
12 | 父级页面 13 |
14 |
15 | 子级页面 16 |
17 | 18 | 40 | 41 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/4-remove()-detach().html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 4-remove()-detach() 6 | 16 | 17 | 18 |
1detach
19 | 20 | 39 | 40 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/6.3-wrap().html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6.3-DOM操作wrap() 6 | 16 | 17 | 18 |
19 |
6.2-clone()
20 |
21 |

p标签

22 | span 23 | span 24 |

鼠标

25 | span 26 |

h1标签

27 |
28 | 29 | 44 | 45 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/6.8add.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | add 6 | 7 | 25 | 26 | 27 | 28 |
div
29 | span 30 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /jQuery/2-jquery基础扩展/函数传参.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 函数传参 6 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /jQuery/3-jQuery.cookie/main.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | console.log('jq'); 3 | //回滚原来的位置 4 | var str = window.location.href; 5 | str = str.substring(str.lastIndexOf("/") + 1); 6 | if ($.cookie(str)) { 7 | $("html,body").animate({ scrollTop: $.cookie(str) }, 100000000); 8 | console.log('cookie'); 9 | }; 10 | $(window).scroll(function() { 11 | // console.log('scroll'); 12 | var str = window.location.href; 13 | str = str.substring(str.lastIndexOf("/") + 1); 14 | var top = $(document).scrollTop(); 15 | $.cookie(str, top, { path: '/' }); 16 | return $.cookie(str); 17 | }); 18 | 19 | 20 | // //点击跳页面 21 | // $('.shop_info span').bind('click',function(e){ 22 | // e.preventDefault(); 23 | // var id=$(this).attr('id'); 24 | // window.location.href='/shop/category/'+id+'.html'; 25 | // }); 26 | 27 | }); 28 | -------------------------------------------------------------------------------- /less/css/body-bg.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #f1f1f1; 3 | } 4 | -------------------------------------------------------------------------------- /less/css/index.css: -------------------------------------------------------------------------------- 1 | @import '../css/body-bg.css'; 2 | .able-tri { 3 | border-width: 50px; 4 | border-color: red transparent transparent transparent; 5 | border-style: solid dashed dashed dashed; 6 | /* 不写dashed 则IE6下有黑板。(注释在css中可见) */ 7 | } 8 | .position { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | } 13 | .argument { 14 | border-bottom: 20px #cccccc solid; 15 | border-top: 20px solid #cccccc; 16 | } 17 | .test_03 { 18 | width: calc(300px-20px); 19 | } 20 | .test_03-hover { 21 | height: 10px; 22 | } 23 | body { 24 | background: #f1f1f1; 25 | } 26 | -------------------------------------------------------------------------------- /less/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | learn less-imooc 6 | 7 | 8 | 9 |
imooc
10 | 11 |
12 | // argument 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /mpvue-demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = tab 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /mpvue-demo/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | test/**/*.js 4 | source/mock/**/*.js 5 | -------------------------------------------------------------------------------- /mpvue-demo/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {}, 7 | "postcss-mpvue-wxss": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /mpvue-demo/README.md: -------------------------------------------------------------------------------- 1 | # mpvue-demo 2 | 3 | > A Mpvue project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # 初始化项目 9 | vue init mpvue/mpvue-quickstart myproject 10 | cd myproject 11 | 12 | # 安装依赖 13 | yarn 14 | 15 | # 开发时构建 16 | npm dev 17 | 18 | # 打包构建 19 | npm build 20 | 21 | # 指定平台的开发时构建(微信、百度、头条、支付宝) 22 | npm dev:wx 23 | npm dev:swan 24 | npm dev:tt 25 | npm dev:my 26 | 27 | # 指定平台的打包构建 28 | npm build:wx 29 | npm build:swan 30 | npm build:tt 31 | npm build:my 32 | 33 | # 生成 bundle 分析报告 34 | npm run build --report 35 | ``` 36 | 37 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 38 | -------------------------------------------------------------------------------- /mpvue-demo/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /mpvue-demo/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | // var isProduction = process.env.NODE_ENV === 'production' 4 | // for mp 5 | var isProduction = true 6 | 7 | module.exports = { 8 | loaders: utils.cssLoaders({ 9 | sourceMap: isProduction 10 | ? config.build.productionSourceMap 11 | : config.dev.cssSourceMap, 12 | extract: isProduction 13 | }), 14 | transformToRequire: { 15 | video: 'src', 16 | source: 'src', 17 | img: 'src', 18 | image: 'xlink:href' 19 | }, 20 | fileExt: config.build.fileExt 21 | } 22 | -------------------------------------------------------------------------------- /mpvue-demo/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /mpvue-demo/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/app.wxss: -------------------------------------------------------------------------------- 1 | @import "./common/vendor.wxss"; 2 | 3 | .container { 4 | height: 100%; 5 | display: -ms-flexbox; 6 | display: flex; 7 | -ms-flex-direction: column; 8 | flex-direction: column; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | -ms-flex-pack: justify; 12 | justify-content: space-between; 13 | padding: 200rpx 0; 14 | box-sizing: border-box; 15 | } -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/common/vendor.wxss: -------------------------------------------------------------------------------- 1 | 2 | .card { 3 | padding: 20rpx; 4 | } -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/components/card.vue.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/components/slots.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/pages/counter/index.vue.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/pages/counter/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /mpvue-demo/dist/wx/pages/counter/main.wxml: -------------------------------------------------------------------------------- 1 |