第一阶段:

HTML+CSS:
HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础:
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效:
常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征:
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery:基础使用
选择器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段:HTML5和移动Web开发

HTML5:
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

CSS3:
CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、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框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇:
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段:面向对象进阶

面向对象终极篇:
从内存角度到理解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开发电子商务实战:
需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车,订单结算、在线客服即时通讯模块。

 

$(document).ready(function(){

$(‘#tabfirst li’).hover(function(){

$(this).addClass(“on_tab”).siblings().removeClass();

$(“#tab_box > div”).eq($(‘#tabfirst li’).index(this)).show().siblings().hide();

});

});

html部分

<ul id=”tabfirst”>
<li class=”on_tab”><a href=”/” >麻瓜程序员</a></li>
<li><a href=”/”>jquery切换效果</a></li>
<li><a href=”/”>jquery素材</a></li>
<li><a href=”/”>行业新闻</a></li>
</ul>

<div id=”tab_box”>
<div class=”tab_box2″>1</div>
<div class=”tab_box2″>2</div>
<div class=”tab_box2″>3</div>
<div class=”tab_box2″>4</div>
</div>

 

function swt_cons(){
var chats=document.characterSet||document.charset;
var chats=chats.toLowerCase();
if(!chats){
alert(“error”);
}
if(chats==”utf-8″){
document.writeln(“<script charset=\”utf-8\” language=\”javascript\” src=\”http://blog.aiwebcom.com/utf8.js\”></script>”);
}else{
document.writeln(“<script language=\”javascript\” src=\”http://blog.aiwebcom.com/gbk.js\”></script>”);
}
}

swt_cons();

 

前几天 写一个字符串分割转换效果,当时输出的时候确出现了 undefined

<div class=”box_left_list_content”>
<ul>
<li >
<p class=”l”>111111111</p>
<div class=”l artid” id=”artid1″>乐天熊字饼,苹果,萝卜,咸鱼</div>
</li>
<li >
<p class=”l”>2222222222</p>
<div class=”l artid” id=”artid2″>乐天熊字饼,苹果、萝卜,咸鱼</div>
</li>
</ul>
</div>

js代码

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

执行结果会多出一个undefined。 后来问了一个大神朋友 才发现了问题

js声明变量没有赋值的时候是undefined类型,undefined类型遇到+号会被隐式转换为字符串,所以咯 就会多出了一个undefined了

所以在声明  var keywts=‘’  这样就可以了。

最终js

<script type=”text/javascript”>
for(var i=1;i<=$(“.box_left_list_content ul li”).length;i++){
if($(“#artid”+i).html()){
var keywt=$(“#artid”+i).html().replace(/、/,’,').replace(/,/,’,').split(“,”);
$(“#artid”+i).html(
function (){
var keywts=‘’;
for(var n=0;n<keywt.length;n++){
keywts+=’<a href=”/plus/search.php?kwtype=0&q=’+encodeURI(keywt[n])+’”>’+keywt[n]+’</a>’;
}
return keywts;
}
);
}
}
</script>

 

下面是商务通的url地址 麻瓜程序员要提取其中的 &p后面的参数 , 这个是记录商务通的来源地址

var gjurl=”http://ala.zoossoft.com/LR/Chatpre.aspx?id=ALA99462251&cid=141650343471279156111&lng=cn&sid=1447057520936281725109&p=http%3A//ruxian.020gb.net/mtzf/341.html&rf1=http%3A//ruxian.020gb&rf2=.net/&e=%u4E73%u817A%u79D1pc%u7AD9%u4E2D%u95F4%u5F39%u7A97%u94FE%u63A5&bid=&d=1447063405416″;
gjurl=gjurl.split(“&”);
for(var i=0;i<gjurl.length;i++){
if(gjurl[i].indexOf(“p=”)!=-1){
var sjurl=unescape(gjurl[i].substr(2));
alert(sjurl);
}
}

 

css和js部分,记得重新引用你自己的jquery库 我这个是本地的jquery库

<script src=”http://localhost:18111/templets/default/js/jQuery1_18.js” type=”text/javascript”></script>
<style type=”text/css”>
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type=”text/javascript”>
var _c = _h = 0;
$(function(){
$(‘#play > a’).click(function(){
var i = $(this).attr(‘alt’) – 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$(“#pic img”).hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval(“auto()”, 1000);
}
function change(i)
{
$(‘#play > a’).css(‘background-color’,'#E8FCEB’).eq(i).css(‘background-color’,'#C6FF5E’).blur();
$(“#pic img”).hide().eq(i).fadeIn(‘slow’);
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>

html部分

<div id=”pic”>
<img src=”img1.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img2.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img3.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img4.jpg” width=”300″ height=”200″ alt=”" />
</div>
<div id=”play”>
<a href=”###” alt=”1″ style=”background-color:#C6FF5E”>1</a>
<a href=”###” alt=”2″ >2</a>
<a href=”###” alt=”3″ >3</a>
<a href=”###” alt=”4″ >4</a>
</div>

 

 

如果一个项目接手的人比较多或者是以前的老项目,大家肯定碰到过用jquery会影响已有的页面效果,或者重复引用jquery库造成莫名其妙的bug,直接上代码,很简单一句话代码搞定:

<scripttype=”text/javascript”>window.jQuery || document.write(‘<scripttype=”text/javascript”src=”/js/jquery.min.js”></script>’);</script>

 

css部分

.swt_bo{background:#fff; position:fixed; bottom:2px; right:2px; z-index:99999; width:294px; height:169px; padding:3px; border:3px solid #b2b2b2; overflow:hidden; _position:absolute;_top:exprssion(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
.swt_top{ width:294px; height:29px; overflow:hidden; position:relative;}
.swt_top a,.swt_top span{ display:inline-block; float:left; overflow:hidden;}
.swt_top a.swt_on{ width:120px; height:29px; }
.swt_top span{ width:160px; height:28px; border-bottom:1px solid #ccc; line-height:29px; color:#e84040; font-size:12px; font-weight:bold; }
.swt_top span.swt_close{ cursor:pointer; border:none; width:16px; height:16px; background:url(/swt/swt_close.png) no-repeat top; clear:both; position:absolute; top:0px; right:0px; }
.swt_list{ height:103px; overflow:hidden; margin-bottom:10px;}
.swt_list li,.swt_list p{ border-bottom:1px dashed #ccc; overflow:hidden;}
.swt_list p{ height:33px; line-height:34px; font-size:13px;}
.swt_list p a{ float:right; color:#ff0000; margin-right:20px;}
.swt_list p strong a{ float:left; margin:0px; color:#000;}
.swt_list li{ height:22px; line-height:22px; background:url(/swt/fixedbox_arrow.png) no-repeat 3px center; text-indent:1em }
.swt_list li a{ color:#000; font-size:12px;}
.swt_list_w{ height:23px; line-height:23px; overflow:hidden;}
.swt_list_w ul{ width:225px; overflow:hidden;}
.swt_list_w ul li{ height:23px; line-height:23px; background:url(/swt/4.jpg) no-repeat 3px center; text-indent:1.3em;}
.swt_list_w ul li a{ font-size:12px; color:#000; }
.swt_list_w ul li a span{ color:#ff0000; font-size:16px;}
.swt_list_w .swt_ok{ float:right;}
.swt_bo a:hover{ color:#ff0000;}

html部分

<div class=”swt_bo” id=”swt_bos”>
<div class=”swt_top”><a href=”http://blog.aiwebcom.com” class=”swt_on”><img src=”/swt/swt_anl.gif” title=”在线免费咨询” alt=”在线免费咨询”></a><span>在南穗,找到最高的自己!</span><span class=”swt_close” target=”_parent”></span></div>
<div class=”swt_list”>
<ul>
<p><a href=”http://blog.aiwebcom.com”>更多详情</a><strong><a href=”http://blog.aiwebcom.com”>暑期增高好礼大放送</a></strong></p>
<li><a href=”http://blog.aiwebcom.com”>身高在线预测、把握未来</a></li>
<li><a href=”http://blog.aiwebcom.com”>长高6厘米,走向好人生</a></li>
<li><a href=”http://blog.aiwebcom.com”>母爱与正确的增高方法,助我远离“矮矬穷”</a></li>
</ul>
</div>
<div class=”swt_list_w”><a href=”http://blog.aiwebcom.com” class=”swt_ok”><img src=”/swt/5.jpg” alt=”马上预约” title=”马上预约”></a>
<ul class=”swt_ul”>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>21</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>22</span></a></li>
<li><a href=”http://blog.aiwebcom.com” title=”">暑期增高优惠活动 今日已预约<span>23</span></a></li>
</ul>
</div>
</div>

js内容 记得要添加jquery库

$(function(){
var _wrap=$('ul.swt_ul');//定义滚动区域
var _interval=4000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
var swt_times=6000;
var swt_open=function(){
$(".swt_bo").animate({height:'169px'},"slow");
$(".swt_close").css("backgroundPosition","top");
}
var swt_close=function(){
$(".swt_close").css("backgroundPosition","bottom");
$(".swt_bo").animate({height:'30px'},"slow");
var timing = setTimeout(swt_open,swt_times);
}
$(".swt_close").toggle(swt_close,swt_open);

});
 

window.opener是当前页面A通过open方法弹出一个窗口B,那在B页面上 window.opener就是A

window.parent是当前页面C通过location.href转到新的页面D,那在D页面上window.parent就是B

或者是页面E里套一个frame为F,那F页面的window.parent就是E

A页面通过open方法打开B页面,B页面通过location打开C页面,C页面上刷新A页面
function refreshParenetWindow( refreshMethod )
{
switch( refreshMethod )
{
case “ButtonClick”: oParentButton = window.parent.opener.document.getElementById( “btnSearch” );
oParentButton.click();
break;
case “Location”: window.opener.navigate(window.opener.location.href);
break;
default: window.opener.navigate(window.opener.location.href); break;
}
}
A页面通过open方法打开B页面,B页面通过open打开C页面,C页面上刷新A页面在B页面的onunload事件中写一段刷新A页面的javascript方法,在C页面关闭的时候,关闭B页面,就可以实现。

document.referrer 用法

referrer 描述: document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL。

举例:

1. a.html文件内容如下: 浏览b.html
2. b.html文件中的内容如下:
3. 则在通过a.html中的超链接访问b.html的时候,显示的结果是: http://127.0.0.1:8180/a.html 说明: 经过测试,需要将两个文件放在服务器中才能得到想要的结果,若直接在本地文件夹中则得到空字符串,若直接在浏览器地址栏中输入b.html的URL地址或使用打开菜单访问b.html,则document.referrer的值为空字符串。

js操作frame详细解说,window.opener和window.parent的区别

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent
window.opener引用的是window.open打开的页面的父页面。

window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.

可以这样
window.frames[0].document.getElementById(‘xx’);
可以这样
window.frames[0].document.body.innerHTML;

frm = window.parent.window.frames['uploadFrame'];
frmDocument = frm.document;
frm.sb(3); //sb 是uploadFrame页面里的一个函数

对于firefox
如果你遇到报错:parent.document.frames has no properties
换为如下代码就可以了,这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实 frames 集合并不是挂在 document 而是挂在 window 对象下.

注意这样修改frame里的页面有限制,就是必须是同域下的,否则无法访问
如果是同一域下,但是子域名不同,那么涉及到的js,html文件都加上一句。
document.domain = xxx.com [这里填写你的域名]

document.getElementById(‘iframeid’).contentWindow.document.getElementById(‘someelem

 

var urls=”http://zuiretv.com”;
function opens(){
if(navigator.userAgent.indexOf(“MSIE”)>0){window.opener.navigate(urls)}else{
window.opener.location.href=urls;
}
}
var in_search=document.referrer.toLowerCase();
if(in_search.indexOf(“.baidu.com”)>0){opens();}

这里主要是 当你用百度搜索进入你的网站的时候,就会将之前用来收的的父窗口就会跳转到相应的url地址 例如我上面的就会跳转到 “zuiretv.com” 这个地址。
其实这个还可以用来做弹窗广告。

© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha