大前端之路

第一阶段
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.length
   
   

    
      toLowerCase()：将字符串中的字母转成全小写。如：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) = 9
   
   

    
        Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
   
   
   
   

    
        Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
   
   
   
   

    
     Number数值对象:   
   
   
   
   

    
     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() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，
     
     

      
      		             直到 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
js特效 	  tab：tab标签切换
 
 

  
  	  
  
  <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开发电子商务实战 需求与设计： 账户模块注册登录：
 会员中心模块： 前台展示模块： 购物车： 订单结算： 在线客服即时通讯模块：