第一阶段
html+css基础 div+css布局:
HTML+css整站开发:编写一个电商页面,用div附一些dd/dt/dl,ul/li的应用布局,整合css,对margin、
padding、text-indent、border等距离进行计算,理解position的相对定位和绝对定位于float之间的关系,对一些
常用的样式编写在记事本以备用,float时要考虑到层次之间的关系和清浮动等动作。在处理上要考虑到不同浏览器的
兼容问题;并对一些icon的图片整合,font的简写等进行应用。
js基础
值类型:number、string、boolean、null和undefined型数据都是值类型,这类值存储在栈(stack)中。引用类型:object、function和array等对象都是引用型数据,这类值存储在堆(heap)中
特殊类型:null空对象,Undefined未定义
js内置对象常用方法:
对象中常用的方法:(1)alert函数:显示一个警告对话框,包括一个OK按钮。
(2)confirm函数:显示一个确认对话框,包括OK、Cancel按钮。
(3)escape函数:将字符转换成Unicode码。
(4)eval函数:计算表达式的结果。
(5)isNaN函数:测试是(true)否(false)不是一个数字。
(6)parseFloat函数:将字符串转换成符点数字形式。
(7)parseInt函数:将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数:显示一个输入对话框,提示等待用户输入。
(9)unescape函数:解码由escape函数编码的字符。String对象:
length:获取字符串的长度。如:var len = strObj.lengthtoLowerCase():将字符串中的字母转成全小写。如:strObj.toLowerCase()toUpperCase():将字符串中的字母转成全大写。如:strObj.toUpperCase()charAt(index):返回指定 下标位置的一个字符。如果没有找到,则返回空字符串。indexOf():返回一个子字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到, 则返回-1。substr():在原始字符串返回一个子字符串。如:var a=filename.substr(index+1);substring():在原始字符串,返回一个子字符串。split():将一个字符串转成数组.Array对象:unshift():往数组前面添加一个或多个数组元素,长度要改变。arrObj.unshift(“a” , “b” , “c”)push():往数组结尾添加一个或多个数组元素,长度要改变。arrObj.push(“a” , “b” , “c”)Date对象:get/setDate():返回或设置日期,get/setSeconds():返回或设置秒钟数get/setTime():返回或设置时间(毫秒为单位)Math数学对象:Math.floor():向下取整(直接去掉小数)。如:Math.floor(9.888) = 9Math.round():四舍五入。如:Math.round(4.5) = 5; Math.round(4.1) = 4Math.pow(x,y):求x的y次方。如:Math.pow(2,3) = 8Number数值对象:toFixed():将一个数值转成字符串,并进行四舍五入,保留指定位数的小数。语法:numObj.toFixed(n)Global对象 :escape():对 String对象编码以便它们能在所有计算机上可读.escape(charString)Reg Exp 正则表达式匹配模式:g:global,全局匹配;m:multilin,多行匹配;i:忽略大小写匹配。个斜杠, / 表达式 / 匹配模式①replace(regexp,"replacestr"):返回替换后的结果。
②match(regexp):返回匹配字符串的数组。
③search(regexp):得到匹配字符串的“首“字符位置的索引。常见DOM树操作大全:
查找节点 :
document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合
document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.createAttribute('属性名'); 创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点document.createComment('注释节点');创建新的注释节点
添加新节点:
parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );给元素增加属性节点
element.setAttribute( attributeName, attributeValue );给元素增加指定属性,并设定属性值删除节点:
parentNode.removeChild( existingChild );删除已有的子节点,返回值为删除节点element.removeAttribute('属性名');删除具有指定属性名称的属性,无返回值element.removeAttributeNode( attrNode );删除指定属性,返回值为删除的属性修改节点:parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点element.setAttributeNode( attributeName );若原元素已有该节点,此操作能达到修改该属性值的目的element.setAttribute( attributeName, attributeValue );若原元素已有该节点,此操作能达到修改该属性值的目的定时器:
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,
js特效 tab:tab标签切换
焦点图:在页面左偏上区域,焦点区域出现,且面积上比较显眼的广告位都会被称作焦点图直到 clearInterval() 被调用或窗口被关闭。语法:setInterval(code,millisec,lang)示例代码:<input type="text" id="clock" /> <script type="text/javascript"> var int=self.setInterval("clock()",1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button οnclick="int=window.clearInterval(int)">停止</button>
- setTimeout() :在指定的毫秒数后调用函数或计算表达式。
- 语法: setTimeout(code,millisec,lang)
基本步骤:DOM操作,定时器,事件运用,JS动画,函数递归,无限滚动打法。
详见:http://www.cnblogs.com/jr1993/p/4451278.html
<style type="text/css">li { list-style: none; } * { padding: 0; margin: 0; } .tab-list { text-align: center; line-height: 40px; font-family: "微软雅黑"; height: 40px; border-bottom: none; } .tab-list li { float: left; border: 1px solid #000; border-right: none; width: 100px; cursor: pointer; } .tab-list li:last-of-type { border-right: 1px solid #000; } .tab-content li { width: 302px; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; margin-top: 0px; } </style>
<div class="tab"> <ul class="tab-list"> <li>one</li> <li>two</li> <li>three</li> </ul> <ul class="tab-content"> <li style="background-color:cornflowerblue;">我是one</li> <li style="display: none;background-color: burlywood;">我是two</li> <li style="display: none;background-color:mediumaquamarine;">我是three</li> </ul> </div>
var eItemList = document.querySelectorAll(".tab-list li");
var eContentList = document.querySelectorAll(".tab-content li"); //给元素编号 for (var i=0;i<eItemList.length;i++) { eItemList[i].index=i; //index是自定义属性,用来保存编号 eItemList[i].οnmοuseοver=function() { for (var i=0;i<eContentList.length;i++) { eContentList[i].style.display="none"; //先将内容全部隐藏 } eContentList[this.index].style.display="block"; //当鼠标触发时再显示对应的内容 for (var i=0;i<eItemList.length;i++) { eItemList[i].style.background="none"; //将背景色设置为无 } eItemList[this.index].style.background="indianred"; }; }
导航:导航菜单的展开
把如下代码加入<body>区域中 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var winprops = "height=500,width=500,location=no,scrollbars=no," + "menubars=no,toolbars=no,resizable=yes"; var visMnu = ""; var actMnu, url; function menuHandler(actMnu,url) { popup = window.open("http://"+url,"MenuPopup",winprops); hideMenu(actMnu); popup.focus() } function flipMenu(actMnu) { if (visMnu == "") showMenu(actMnu); else { if (visMnu == actMnu) hideMenu(actMnu); else { hideMenu(visMnu); showMenu(actMnu); } } } function showMenu(actMnu) { actMnu.style.background = "#889933"; /* modify menu-background-color */ actMnu.style.visibility = "visible"; visMnu = actMnu; } function hideMenu(actMnu) { actMnu.style.background = ""; /* modify color "selected" */ actMnu.style.visibility = "hidden"; visMnu = ""; } // End --> </script> <table name=NaviBar border=0> <colgroup width="110" span="2"></colgroup> <tr bgcolor=#FF9933 style="cursor:default"> <td align=center onMousedown="flipMenu(document.all.Mnu1)"> 综合站点 </td> <td align=center onMousedown="flipMenu(document.all.Mnu2)"> 专业站点 </td> </tr> <tr> <td valign="top"> <table id=Mnu1 width=100% style="cursor:default; visibility:hidden;"> <tr><td onClick="menuHandler(Mnu1,'www.sohu.com/')"> <a href="#"> 搜狐 </a> </td></tr> <tr><td onClick="menuHandler(Mnu1,'www.163.com/')"> <a href="#"> 网易 </a> </td></tr> <tr><td onClick="menuHandler(Mnu1,'www.sina.com/')"> <a href="#"> 新浪网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu1,'www.263.net/')"> <a href="#"> 首都在线 </a> </td></tr> </table> </td> <td valign="top"> <table id=Mnu2 width=100% style="cursor:default; visibility:hidden;"> <tr><td onClick="menuHandler(Mnu2,'www.aspsky.com/')"> <a href="#"> 动网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu2,'www.jzzy.com/')"> <a href="#"> 资源网 </a> </td></tr> <tr><td onClick="menuHandler(Mnu2,'www.phpuser.com/')"> <a href="#"> PHP之家 </a> </td></tr> </table> </td> </tr> </table>
整页滚动:轮播图:
JS制作幻灯片:
弹出层: 手风琴菜单: 瀑布流布局: 滚动事件: 滚差视图:js特征 正则表达式: 排序算法: 递归算法:
闭包: 函数节流: 作用域链: 基于距离运动框架: js中的面向对象:jQuery基础 悬着器: DOM操作:
特效和动画: 方法链: 拖拽: 变形: jQuery的UI组件:
第二阶段
HTML5 新语义标签: html5表单: 音频和视频: 离线和本地存储: SVG: Web Socket: Canvas:CSS3 新选择器:
伪元素: 脸色表示法: 边框: 阴影: background属性改变: Transtion: 动画: 景深和深透: 3D效果制作:
Velocity.js框架: 元素进场: 出场策略: 炫酷css3网页制作:bootstrap 响应式概念: 媒体查询:
响应式网站制作: 删格系统及原理: 常用模板: less和sass:移动Web开发 跨终端web和主流设备简介: 视口:
流式布局:
弹性盒子: rem: 移动终端JavaScript事件: 手机中常见js效果制作 zepto.js: 手机聚划算页面: 手机滚屏:
第三阶段:HTTP服务和AJAX编程
WEB服务器基础 服务器基础知识: apache服务器和其他web服务器: Apache服务器搭建: http介绍: PHP基础
PHP基础语法: 使用PHP处理简单的get或者post请求: AJAX ajax简介和异步概念: ajax框架的封装:
XMLHttpRequest对象详细介绍方法: 兼容性处理方法: ajax中缓存问题: XML介绍和使用: json和json解析:
数据绑定和模板技术: jsonp: 跨域技术: 图片预读取和lazy-load技术: jQuery框架中的ajaxAPI:
实现瀑布流案例:
第四阶段:面向对象进阶
面向对象 从内存角度理解JS面向对象: 基本类型: 复杂类型: 原型链: ES6中的面向对象: 属性读写权限: 设置器:
访问器:面向对象特征 继承性: 多态性: 封装性: 接口:设计模式 面向对象编程思维: 单例模式: 工厂模式:
策略模式: 观察者模式: 模板方法模式: 代理模式: 装饰者模式: 适配器模式: 面向切面编程:
第五阶段:封装一个属于自己的框架
框架封装基础 事件流: 冒泡: 捕获: 事件对象: 事件框架: 选择框架: 框架封装中级 运动原理:
单物体运动框架: 多物体运动框架: 运动框架面向对象封装:框架封装高级 jquery框架雏形: 可扩展性:
模块化: 封装属于自己的框架:
第六阶段:模块化组件开发
面向组件编程 面向组件编程的方式: 面向组件编程的实现原理: 面向组件编程实战: 基于组件化思想开发网站应用程序:
面向模块编程 AMD设计规范: CMD设计规范: requireJS: loadJS: 淘宝的seaJS:
第七阶段:主流的流行框架
web开发工作流 Git/SVN: Yeoman脚手架: NPM/Bower依赖管理工具: Grunt/Gulp/Webpack: MVC/MVVM/MVW框架
angular.js: backbone.js: Knockout/Ember: 常用库 react.js: vue.js: zepto.js:
第八阶段:HTML5原生移动应用开发
Cordova WebApp/NativeApp/HybirdApp简介: Cordova简介: 与PhoneGap之间的关系: 开发环境搭建:
Cordova实战(创建项目,配置,编译,调试,部署发布): Ionic Ionic简介和同类对比: 模板项目解析:
常见组件及使用: 结合Angular构建APP: 常见效果(下拉刷新,上拉加载,侧滑导航,选项卡):React Native
react Native简介: React Native环境配置、创建项目,配置,编译,调试,部署发布: 原生模块和UI组件:
原生常用API:HTML5+ Html5+中国产业联盟: HTML5 Plus Runtime环境: HBuilder开发工具: MUI框架:
H5+开发和部署:
第九阶段:Node.js全栈开发
入门 Node.js发展: 生态圈: Io.js: Linux/Windows/OS X环境配置: REPL环境和控制台程序: 异步编程:
非阻塞I/O: 模块概念: 模块管理工具: 开发流程,调试,测试: 核心模块和对象 全局对象global: process:
console: util: 事件驱动: 事件发射器: 加密解密: 路径操作: 序列化和反序列化: 文件流操作:
HTTP服务端与客户端: Socket.IO:web开发基础 HTTP协议: 请求响应处理过程: 关系型数据库操作和数据访问:
非关系型数据库操作和数据访问: 原生的node.js开发Web应用程序: Web开发工作流: Node.js开发Blog案例:
快速开发框架 Express简介+MVC简介: Express常用API: Express路由模块: Jade/Ejs模板引擎:
使用Express重构Blog案例: Koa等其他常见MVC框架:node.js开发电子商务实战 需求与设计: 账户模块注册登录:
会员中心模块: 前台展示模块: 购物车: 订单结算: 在线客服即时通讯模块:
大前端之路
最新推荐文章于 2024-07-08 00:00:00 发布