实习是学生一个阶段学习后的重要内容，通过实习能让学生将所学理论知识应用于社会实践中，很多学生认为抽象的理论知识，在实习阶段都会豁然开朗，大有“柳暗花明又一村”的感觉下面是小编为大家整理的《前端开发实习工作计划》的文章，希望能够很好的帮助到大家，谢谢大家对小编的支持和鼓励。
前端开发、网站美工职位描述
Web前端开发工程师
岗位职责：
1、公司产品web端页面的制作、开发和优化
2、根据设计稿，编写静态页面和交互、特效等功能的脚本程序
2、开发基于HTML5技术的可灵活定制、可扩展的前端UI组件
3、优化前端架构，提高系统的灵活性和可扩展性
4、开发、维护、扩展前端代码框架
5、跟踪研究前沿的前端技术，并应用到公司的产品开发当中
任职要求：
1、两年以上工作经验，了解各种Web前端技术，对符合web标准的网站重构有经验;
2、熟练掌握DIV+CSS网页布局，并且对模板化、模块化有一定理解,精通HTML/HTML
5、CSS/CSS3等前端开发技术;
3、熟练掌握JavaScript语言核心技术DOM、BOM、Ajax、JSON等，对javascript框架(如prototype/jQuery/YUI等)有一定的经验;
4、对css/JavaScript性能优化、解决多浏览器兼容性问题有一定的经验;
5、熟悉浏览器渲染原理，精通各种前端调试工具，对页面性能和浏览器兼容有丰富的实践经验;
6、理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验;
7、对用户体验、交互操作流程、及用户需求有一定了解;
8、具备良好的责任心、逻辑思维强、善于交流和表达、较强的学习能力、优秀的团队沟通与协作能力。
9、爱思考，沟通能力强。
网页设计/策划
岗位职责：
1、根据公司业务实际需要，负责平台网站项目的整体美编创意、设计和页面的美化。
2、根据公司项目的运营需要，设计、制作市场宣传物料。
3、负责网站LOGO、图片制作及广告类页面制的作。
4、负责网站整体页面展现的文案内容策划。
5、负责网站活动内容的美编工作。
6、配合项目的其它艺术、设计工作。 能力发展：
有较强的美术功底及审美能力，较强的活动专题页面设计和网页设计创意能力;
精通Photoshop/Dreamweaver等设计软件，对图片渲染和视觉效果有较好的把控和认识。 较强的创意、策划能力，良好的表达能力，思维敏捷; 工作认真，有责任心，富有团队精神; 具备良好的美术基础，良好的创意构思能力;
有良好的团队合作意识，耐心，诚恳，有强烈的责任心和积极主动的工作态度，能从大局出发，主动完成任务。
面试请携带网站设计相关案例。
web前端核心技术
从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html
5、css
3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML
5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。
关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360等等;从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。
前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页浏览器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。
以上是自己做前端开发的一点心得，它所涵盖的知识面远远不止这些，我也在不断的学习，不断地丰富自己，希望自己能在前端这个职位上开阔自己的一片天地!
什么是前端开发工程师
前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML(标准通用标记语言下的一个应用)、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间2005年开始，是指Web前端开发工程师的简称。 Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。
(ps：本文章由北大青鸟广安门校区搜集自互联网)
做一个有信仰的前端开发人员--4/19演讲稿
此文有博看文思(http://)学员提供
做一个有信仰的前端开发人员
1.提问，阐述浏览器用户开发人员的关系(提问—阐述中举例VCD—具体阐述关系)
浏览器为什么有现在这么大?处理速度是现在这样的?
浏览器—开发人员—用户
浏览器需要用户，所以浏览器其实是根据用户的需要去做，即使是去做的遵循标准，最初目的也是为了用户。为什么浏览器有纠错性，为什么曾经的一个标准要错误的标签必须报错，不能正常显示页面。浏览器是为了用户好，用户好自己才能活下去;标准也是为了用户好，让用户知道自己技术是对用户有利的。但是为什么浏览器和标准却有如此大的不同。因为这中间插了一层人，就是我们开发人员。因为我们开发人员的不同行为方式，从而导致了浏览器和标准一些截然不同的行为。
举个简单的例子。用户通过电视连VCD看光盘内容。但是光盘往往有错的时候，许多放这些碟子的VCD机器读到错误就卡死到那里了。刚开始的时候，用户会抱怨碟子不好，慢慢的用户就会放弃VCD机器，因为碟子普遍不好，还要VCD做什么。然后VCD厂家不能坐视不管吧。所以他们就研究出了纠错技术，读到错误的部分，跳过去，不影响大部分的浏览。用户感到爽了，自然就不会放弃VCD机器，至少暂时不会有此想法。但是发明VCD碟子的人们呢，他们希望VCD碟子不会被损害，而不是简简单单跳过去。所以他们可能会考虑改进碟子被损害的几率，因为如果他们不改进技术，那么VCD厂家将放弃这个技术市场，从而投向另外的技术市场，从此VCD的技术就会消失。然后可能出现的情况就是VCD技术升级了，可能成为WCD、XCD等等。但是这时候新的问题就要出现了。你这个技术升级了，我的机器也得跟着升级，但是升级代价多大，用户会不会接受你这个新技术，等等问题。当你这个升级的技术的升级代价很大，或者用户觉得无法适应的时候，厂家就会放弃这项技术。是的，这个技术又要面临完蛋的危险。因此升级的时候，如果升级带来的代价太大，就不得不考虑放慢步伐，让用户和厂家接受以后一部分之后再进行下一步。如此看来技术想要存活下去真的是夹缝中求生存啊。
浏览器就像VCD机，我们写的代码就是光盘。现在我们就不难理解我们的web标准它多么想一步到位但是却不能够，看看XHTML2.0的下场。是的，完全语义化很好，img和a的移除很棒，省多少代码哪。但是假如我们是厂商，我们不得不面临的一个问题是什么?问大家。换位思考。我们不得不面临的一个问题就是：现有解析引擎的全面崩盘，要做一个全新的解析引擎。所有浏览器厂家基本回到了原点……那么我们会接受这个标准么?问大家。如果有的人说会，那么问他，你是做标准的还是做市场的，如果都照你这么做公司就要破产了。一个公司首要的是要存活，然后才考虑信仰(良知不在此范围)。那好，用户看到的页面也是没什么变化的(表面上)，现在一个正常的浏览器厂商老板都不会接受这个标准。除了GOOGLE可能会欢迎，因为它们首先是做搜索引擎其次是做浏览器的，标准有利于搜索引擎。然后新的问题就出来了，厂商不接受这个标准，怎么
办。没有人市场的标准就是一纸空文，没有意义。所以。XHTML2.0完蛋了。尽管它让代码更简洁，让搜索引擎更喜欢。
2.解决文初提到的问题。引申出开发人员的不坚定是整个问题的产生因素。告知大家保持信仰。
我想说的并不是浏览器用户开发人员三者的关系，我想说这三者的关系，只是想告诉大家，浏览器是根据市场来决定web标准的存活的，而用户就是市场的根本。大家想想，老师说过我们这行业里有多少混子，大家大部分也都加前端群里和那些工作前线的人交流过了，他们是什么水平想必大家心里都很清楚。他们写出来的代码能是什么样子的，前阵子郑晗给我看过一个table布局下的问题，全部table加img，背景色都截图到img里。大家想想是不是，这些代码如果按照标准来会怎么样。如果我们是厂商，再次换位思考，这样的代码泛滥带来是什么结果。问大家。带来的结果就是用户无论用什么浏览器看到的都是不对的页面。那么我们有没有办法整治那些混蛋开发人员呢?没有办法，他们也不是你的员工，别的办法也不能立即奏效，我们只能保住眼前利益，对吧。此处可以提问大家，遇到这种问题怎么办。那么我们就只能够增强浏览器的纠错性。那么好吧，浏览器就变大了，处理速度变慢了。
假如我一开始就告诉你们，一切都是因为我们这些代码开发人员，可能你们接受不了。但是我这样带着大家换位思考下来，相信你们都能理解了。为什么浏览器厂商会这么做。因为它也是为了活下去。很简单的一个例子，搜狗里有纠错功能，输入错误的拼音能得到正确的词组。这也是搜狗成功的一个重要因素。
那么这样带来的结果是什么，就是浏览器不断变大，用户体验越来越不好，什么鸟浏览器，或者什么鸟网站，太TM慢了。更有小白会说，擦，升级了浏览器网速就变得这么慢。这是一个恶性循环。怎么解决?作为浏览器厂商，我们想解决这个恶性循环，我们会希望什么发生呢?想想，就是一个新的技术出来，不用过大的更改解析引擎，不用太大的代价。根源上的解决才能解决问题。但是实际上呢，他们不知道做标准的多么为难，他们有个解决的办法，但是升级代价太大，所以他们不得不忍耐的一步一步的慢慢实现升级。
哦了，讲这么多，想告诉大家，我们就是改变这个恶性循环的重要环节，如果我们每个代码开发人员都有良知，写好的代码，那么这个升级的过程就会快的很多很多。就像如果世界上每个劳动者都有良知，珍惜时间，在路上发生车祸的时候不停下来看热闹，在旁边发生口角的时候不停下来看热闹，那么整个世界的劳动力的浪费率将会提高多少?劳动成果将会提高多少呢?在经济学家眼里，这些小事，就是阻碍世界经济发展的重要因素，这些劳动力的浪费将给世界带来巨大的损失，同样这些劳动力自己也没有得到最大的回报。
所以我想说，为了所有人，做一个有信仰的前端开发人员。
2010年4月18日星期日
23:58
很久没演讲了。好激动。但是最近真的很忙很忙。今天晚上十一点赶工了一个小时才写完，准备的不是很充分。每次演讲都希望对大家有帮助，其次才是锻炼自己的思维，总结知识。本来还准备有个话题准备讲最近的实习经验，但是刚写了个部门实施方案，所以暂时不想谈那个话题了。下次有机会吧。希望大家都一起快速成长。
HTML知识总结
span
行级元素，多个
同行块级元素，独占
一行块级元素，前后
保留一行
标题标签，h1~h6表6个等级，加粗，前后保留一行width：设置宽
度height：设置高
度alt：图片加载失败显示的文本
div
文本类
p
h
图片标签img
color：颜色
水平线常用标签
hr
size：高度(粗
细)width：宽度(长度)herf：超链接转到的地址
超链接a
target
_self:默认值，在当前页面打开_blank:在新窗口
打开
带标题的框fieldsetlegend设置标题
disc：实心圆
无序列表
列表标签
有序列表
ul
square：小方块
olcircle：空心圆
tr表示行
th
表示标题单元格，居中、加粗
td
表格标签
caption
表示一个单元格
表示标题，定义在第一行，居中
rowspan
设置单元格占的行
数
colspan
设置单元格占的列
数
action表单提交地址
get：显示提交参数，将参数用?和&拼接到url上
带到服务器端
method
post：隐式提交参
数optgroup 表示分组,分组不能选,只能选分组中的option
下拉菜单selected默认选中multiple 设置下拉菜单为多选模式表单项rows: 显示文本的行数(高度)文本域
cols: 显示文本的列
数(宽度)
name：参数名
size：显示字符长度(控制文本框长
度)maxlength：最大可
输入字符数
input文本框type=“text”
placeholder：提示
内容
disabled：不会被提交到服务器readonly：只读(会被提交到服务
器)
value：默认值
密码框
type=“password”单选按钮type=“radio”复选框
type=“checkbox”文件选择框type=“file”
按钮
type=“button”提交
type=“submit”checked：默认选
中
input
按钮
重置type=“reset”
noresize：不能改变框架大小
frame：表示框架
scolling：是否显示滚动条(yes、no、auto)设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略
rows
cols
border
框架集
框架边框的宽度
borderColor框架边框颜色
frameBorder
设置框架是否有边框(yes|no)_blank:新窗口中
打开_self:在当前窗口
打开
框架集中的超链接打开方式target_parent:父窗口
中打开_top在最顶层窗口中打开frameName：在对应name框架打
开
ifame
在页面中嵌入框架
dl、dt、dd其他标签
marquee：滚动标签
shape="circle"
coords="309,257,20"target="_blank"
href="http:///s?wd=帽子">
shape="poly"
coords="258,316,277,283,340,280,356,314"target="_blank"
href="http:///s?wd=t恤">
img usemap
ruby：用rt包含的内容对前面
的普通文本进行注释
漢
呵呵呵
吃了没?
range：范围选择
color：颜色选择
输入控件html5新标签
number：数字输入
date picker：日期选择
datalist：自动提示
video：动画
媒体
radio：音频
autocomplete：是否关闭自动提示(off |
on)html5新标签
autofocus: 自动获得
焦点
required: 表示控件
必须输入内容
controls : 播放控制条
autoplay ：自动播放
loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload
CSS知识点总结
内联：直接在标签的style属性上编写
样式样式定义方式
样式块：在style标签中编写样式块，并通过一定规则(选择器)应用到对应的那些标签上(通常写在head中)
<style type="text/css">span {
color: green;
background-color: #eeffee;}
</style>
外部样式文件：将样式块编写在外部
的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)
<link href="hehe.css" rel="stylesheet" />id选择器#xxx 针对id为xxx的标签
类选择器.xxx 针对class属性为xxx的标
签
标签选择xxx 针对标签名为xxx的标签
*选择器选择所有元素选择器
后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2
子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)
紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后
的selector2元素
所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的
selector2兄弟元素
color：字体颜色
font-size：字体大小
font-family：字体样式
字体
font-weight: bolder(加粗) | normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique) *italic和oblique实际显示效果
几乎一致font-variant: 设置字体显示为小型大写字母
text-align: 水平对齐方式(left | center | right)常用属性
vertical-align: 垂直对齐方式(top | middle |
bottom)
line-height: 设置行高(通常用于设置文本居
中)
white-space: nowrap 不换行, pre 当做pre标签
border: 边框(1px solid
red)
文本
width: 宽度
underline 下划线
height: 高度
overline 上划线
text-decoration: 文本装
饰
line-through 贯穿线(删
除线)
blink 闪烁
none 无
dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)
text-shadow: 文本阴影
第二个参数: 阴影垂直位置(y轴上的偏移量)
第三个参数: 模糊程度第四个参数: 阴影颜色
padding：内边距
padding: xxpx;
padding: xxpx xxpx;
padding: xxpx xxpx xxpx;
padding: xxpx xxpx xxpx xxpx;padding: auto;
padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型
margin：外边距
margin: xxpx;
margin: xxpx xxpx;
margin: xxpx xxpx xxpx;
margin: xxpx xxpx xxpx xxpx;margin: auto;
margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom
border：边框
color：颜色;width：宽度;
style：outset|inset|solid|double|dottedborder-radius: 10px; /* 同时设置4个角*/
background-color: 背景颜色
background-image: 背景图片
background-repeat: no-repeat | repeat-x |
repeat-y | repeat背景
background-position: xxxpx xxpx | xx%
xx%; (可以为负数)
background-size: xxxpx xxpx | xx% xx% |
cover | contain; (不能为负数)
cover: 拉伸,可以超出contain: 拉伸不能超出
background-attachment: scroll(随着内容
一起滚动) | fixed (不滚动)
hidden：隐藏
scroll：滚动
overflow：当内容溢出
时的处理方式
visible：直接显示
auto：如果溢出就滚动，否则不显示滚动条
visible 显示
visibility：设置元素是
否显示
hidden 隐藏，保留占位
none：隐藏，不保留占
位
block：设置为块级元
素
display：设置元素是否
显示
inline：设置为行级元
素
布局
inline-block：设置为行
内块元素
left 左浮动
float: 浮动right 右浮动
none 不浮动
left 不允许左边有浮动
clear: 清除浮动right 不允许右边有浮动
both 不允许两边有浮动
ul或ol 自带样式：
列表样式
list-style-type: 列表项的
样式
margin: 16px 0px;padding: 0px 0px 0px
40px;
absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位
position
定位
z-index: 设置z轴的值，
越大越在最前
relative：相对定位参照元素本身的位置
fixed：固定位置，不
会滚动
link 超链接默认样式
hover 鼠标悬停样式
active 鼠标点击样式
visited 访问之后的样式(主要控制颜色)
伪类
focus 获得输入焦点的
样式
first-child 第一个元素
last-child 最后一个元素
:not 不包含指定的选
择器
:noly-child 是父元素的唯
一子元素
cursor 鼠标样式
其他样式
box-shadow 阴影
translate: 平移
rotate：旋转transform：变换
scale：缩放
skew：扭曲
matrix：以变换矩阵变换
第一个值表示需要过渡的样式属性transition 过渡
transition:transform2s,background-color .5s;
第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画
@keyfarmes 关键帧用于定义动画的细节(每一帧如何显示)
@keyframes myanimation {0% { background-color: #cfc; }30% {
background-color: #ccf;border-radius: 50px;}80% {
width: 300px;
background-color: #fcc;}
100% {
width: 300px;height: 300px;
background-color: #000;}}
@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}
需要显示动画的地方通过animation属性来使用声明的关键帧
.ac:active {
animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀
-webkit-chrome，safari, opera-o-opera
-moz-firefox
-ms-ie(ie9以上)
JavaScript
javascript代码必须包含在<script></script>标签中
也可以书写到外部的.js文件中,通过<script src="xxx.js"></script>来引入
script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码
通过alert来弹出提示框
通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |
false)
String: 字符串
字符串必须被""或'包含必须对称
如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号
也可以使用'来表示一个单引号"来表示一个双引号
表示换行数据类型
表示制表符表示书写方式
NaN: Not A Number 当使用非数字来进行运算时
的值
undefied: 未定义
null: 空值
substring 截取子串, 从start到end-1处,如果
没指定end则取到最后一个字符
toUpperCase 将所有字符变成大写
toLowerCase 将所有字符变成小写
indexOf 查找子串首次出现的位置, 如果找不到则
返回-1字符串处理
lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上
的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾
开始计数split 将字符串按照指定的字符进行拆分成
为数组
获取当前时间var now = new Date()
获取指定时间的日期对象
var date = new Date(yyyy,MM,dd,HH,mm,ss)
设置指定时间(将时间对象设置为一个指定时间)
now.setFullYear(yyyy,MM,dd,HH,mm,ss)
now.setMonth日期Date
now.setDatenow.setHours
...
获取指定时间信息
now.getFullYear() // 年只能取出年份,如: 2015
now.getMonth // 月0-11月
now.getDate // 日
now.getDay // 星期0-6 (0表示星期天)
now.getHours // 时24小时制
now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒
通过new Array()来创建数组var names = new Array();
var names = new Array("小王", "大王", "炸弹"); // 创建时给数组设置默认值
//用json格式表示数组
var names = [];
var names = ["小王", "大王", "炸弹"];数组Array
可以通过length来设置或获取数组的长度
push : 往数组末尾添加元素
pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序
sort: 按"字符串"的自然排序规则进行升序
splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)
slice: 获取start到end处的子数组
join: 将数组元素以指定分隔符进行连接成为字符串
function xxx(....) {
声明函数
....}
var xxx = function (...) {
...
函数变量
}var ooo = xxx;
ooo();函数
function fn(fx) {
fx();
将函数作为参数
}fn(function () {
...});(function (...) {
立即执行函数
....})(...);
getElementById 根据id获取唯一的元素var xx = document.getElementById("xx");DOM(Document Object Model) 文档对象模型
获取元素
getElementsByTagName 根据标签名获取元
素数组
onclick 鼠标点击事件
getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组
中删除)
onmouseover 鼠标进入事件
onmouseout 鼠标离开事件
onmousemove 鼠标被移动
onmousedown 鼠标按钮被按下事件机制
onmouseup 鼠标按钮被松开
onkeydown 某个键盘按键被按下
onkeyup某个键盘按键被松开
onload 一张页面或图像被完成加载
onchange 域的内容被改变
onfocus 元素获得焦点
onblur 元素失去焦点
setTimeout: 延迟执行(只会执
行一次)var xx = setTimeout(xxx, 1000);setTimeout("fn();", 3000);BOM(Browser Object Model)
window
清除使用clearTimeout(xx);setInterval: 定时执行(间隔指
定时间循环执行)
xx.offsetLeft获取元素的位置和尺寸(只读)
xx.offsetTopxx.offsetWidthxx.offsetHeight
var xx = setInterval(xxx,1000);
清除使用clearInterval(xx);
[] 表示[]中的字符任意取一个
在[] 中的^ 表示非不包含该字符
() 表示将多个表达式合并为一个表达式
在()中的|表示将两个匹配条件进行逻辑“或”(Or)运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次
{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次. 任意字符(不包含
)正则表达式
^ 匹配字符串的开头$ 匹配字符串的结尾
w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号
W 对w取反(不包含单词字符) [^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格
S 对s取反非空格
换行符 单词边界
B 不是单词边界(对取反)
eval
执行字符串形式的
代码。
for(var i in array) {var item = array[i];
}
for(var key in obj) {var value = obj[key];
}
迭代数组迭代出的值为数组的下标
for...in
迭代对象迭代出的值为对象的属性名其他
with
设置以某个对象为代码块作用域对象
delete attribute删除属性
isNaN
如果被判断值不是一个数字则返回true，
否则为false
在国内，“前端开发
”这个名词逐步被熟知，
“前端开发
”这个职位越来越被企业重视，表明国内的Web前端开发正在慢慢走向成熟，更好地学习提高自身的前端开发技术能力是必须的，整理9个国内优秀的前端开发设计网站给大家，也希望能看到你推荐的中文前端开发网站和社区。
1, OKAJAX
OKAJAX是以ajax技术为主，涉及网站建设、网络编程、网页设计、网页特效、服务器技术、资源下载等的综合性网站。
2, 蓝色理想
诞生于1999年10月的蓝色理想，以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容，是国内最大的设计类站点之一。
3, W3School
W3School是最完善的在线教程站，包括
XHTML教程、
XML教程
JavaScript & AJAX、网站构建等前端开发人员必备的系统性学习教材。
4, 前端观察
前端观察是一个纯粹的前端技术分享网站，本站的目的是为前端技术人员提供所需的资讯及资源，挖掘国内优秀的原创设计及内容，加以高度的整理。
5, CSS88
CSS88专注前端开发，关注用户体验，是一个资深的Web前端开发站，不仅传播前端技术，更重要的是关注前端设计从业者的生存状态，有多个开放的前端交流群。
6, CssRain
CssRain实用的前端技术信息，原创和搜集前端开发中细节的内容，一本jQuery新书推荐<<锋利的
jQuery>>你值得拥有。
7, 我爱CSS
我爱CSS，致力于Web标准在中国的应用和发展，提供CSS和XHTML学习教程。 8, iJavaScript
iJavaScript致力于JavaScript信息的共享，提供JavaScript基础教程、AJAX技术及JavaScript框架的学习和应用。
9.菠菜博
菠菜博是一个分享优质网站设计素材资源、关注Web前端开发与应用资源的博客。
推荐阅读：
前端开发学习计划（推荐6篇）03-27
Web前端开发技术与优化工作研究11-01
菜鸟前端开发年终总结（精选6篇）06-28
计算机网站前端开发技术优化分析05-11
网页前端开发案例教学论文（推荐3篇）04-25
Web前端开发课程项目化教学改革与实践12-21
协作模式下Web前端开发技术课程教学改革研究与实践09-12
基于1+X证书制度的中等职业学校网络前端开发课程教学优化05-12
前端实习工作计划03-27
