网页兼容问题
我的图书馆
网页兼容问题
网页的加载速度是评估网站质量一个重要指标。原因在于大多数用户能够容忍的网页加载时间只有几秒，如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页，所以网页载入速度会极大地影响网站的流量和访问。以下总结了几种可以明显提高网站加载速度的初步简单技巧方式，如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化。
网页加载提速之 – 优化网页图片文件
你的网页一定有图片，加载一个网页往往图片的总尺寸是最大的，特别是那些颜色丰富的背景图片和大副广告图片。所以一般要在同等图片质量的情况下要尽可能地 减小图片尺寸。在Photoshop中我们可以用保存为Web图片的选项试一下。图片也有几种常用的文件格式。如JPEG一般是用来存储照片或全彩色图片 的，比如照片、屏幕截图等。GIF图片格式的颜色要比JPEG少，适合做小图，如制作按钮、Logo等，另外GIF支持动态效果。PNG跟GIF比较相 似，但它的尺寸较大，支持的颜色也比GIF要多，并且PNG支持背景透明。我们可以试试使用一种不同的格式保存图片试下，如将PNG和JPEG换成GIF 试试。
网页加载提速之 – 图片使用height和width属性
你会给每个图片加上height和width属性吗？这两个属性可以让浏览器在加载图片之前就知道图片的长和宽，并预留出指定的长宽待图片加载后显示。如 果没有这两个属性，浏览器还需要在读取图片成功后再处理一次页面布局样式，这无疑减慢了网页加载速度。所以在固定图片大小的情况下最好都使用上长和宽属 性。
网页加载提速之 – CSS文件压缩瘦身
DIV+CSS是现在流利的网页布局方式，DIV定义了元素，CSS控制显示效果。所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中，并且 CSS文件代码也有很多行。我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容，如重复定义样式、空格等来瘦身。可以尝试使用一下 CleanCSS工具来压缩你的CSS文件。
网页加载提速之 – 目录地址后加上斜杠（/）
如访客点击访问这样一个目录地址：http://www.techolics.com/tools，去打开这个目录下的index.html文档。当服务 器收到请求后它需要消耗一些时间来分析这是一个文件还是一个目录。但是如果我们在最后加上一个斜杠（/），服务器就知道你是在访问一个目录地址，然后就直 接加载默认文档index.html或index.php就行了。这样服务器就不用花时间来分析这个地址，也起到了一定加速的作用。
网页加载提速之 – 整合CSS、JS文件减少HTTP请求次数
现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接。所以当访问一个网页时浏览器需要多次向服务器请求这些文件。在请求和加 载之间会产生不少的时间差。特别是一些网页上有多个小图片、图标按钮的网页，有多少图片，浏览器就需要请求多少将这些小文件，多将请求这些小图片文件将明 显影响网页的加载速度。所以我们应该尽可能将小图片拼合一个PNG大图片上，然后通过坐标来显示图标。一次请求一个大图片比多次请求小图片速度要快不少。 同样，最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。
写在最后，这里只提到了一些简单的初级皮毛，因为这些是最容易做的优化方式。下一步我们还需要考虑网页代码（php或aspx）是否优化高效、服务器的响 应速度、服务器带宽是否够用等等更深层的因素。但如果将上面几点做到位，相信网页加速速度会提高不少。所以如果你有更多经验请在讨论区留言分享给大家吧。
开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。
页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。
前端页面的工作很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很重要的一点还要细心。下面我们就讲讲页面开发，开发中需要事项和常遇到的问题吧。
首先分析效果图，细节上是否和站内风格统一；设计的元素是否便于实现；元素是否能复用。有问题及时和产品人员进行沟通，避免开发过程中的频繁修改，影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。
合理布局很重要，如同大厦的地基，大厦的高度再于地基是否牢固，合理的布局能有更好的扩展性。结构要尽量简洁，尽量减少结构中的嵌套，不要为了实现某种样式添加多余的空标签。
标签尽量语义化，能够让代码更加清晰。现在html5添加了更多的语义化标签，像header，section等，大胆的使用吧。虽然html5对 于标签的相互嵌套体现了很好的包容性，即使标签没有闭合，或是inline元素中包含一堆block元素也不会有问题，但是为了养成良好的习惯还是尽量做 到严格遵循xhtml的规范。
尽量少在页面写inline css,会使页面代码臃肿，不便于维护，有悖于样式和结构相分离的初衷。
页面中推荐的两种注释：
&%!–jsp注释,不会输出,推荐使用–%&
另一个总和前端页面开发打交道的就是图片。图片分为两种，一种是cssimage引用，另一种纯Image的页面引用。
背景图是通过样式在页面上输出，会在页面中产生请求，延长页面的渲染时间，为了解决这个问题，可以把类似的图片进行合并，减少请求数。在进行合图的时候，尽量把颜
色相近的图标放到一起，可以减少图片的大小。
页面中直接引用的图片尽可能少的缩放，非常影响页面的渲染速度；尽可能少的使用前端技术控制图像显示大小，对用户不可见的部分就是浪费带宽，浪费钱，页面 的渲染速度也肯定会受到影响，影响用户体验；在知道图片宽高的情况下尽量在img中加上宽高，减少页面reflow造成的速度损耗。
静态图片一定要小，建议存成png8格式，在不影响图片的显示质量下，可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片，存成jpg格式的更小，难道你会非选png的吗？存储完后图片还能用一些压缩工具进行无损压缩（如：PNGGauntlet）。
对于图片来说小就是原则，为什么呢，给你算个帐，节约10K看不出什么，100个用户是1000K，10000个是100000K,那一亿个用户呢？全是白花花的银子啊！
图片有几点需要注意：
1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替（）。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。
2、如果你的工程已经上线，我们站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。
3、避免过小的背景图平铺。
4、尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改；
css主要说一下注意事项：
1、class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。
2、CSS后代选择器性能：.a{} & .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便；
3、编码时尽可能使用缩写，如padding：tborder-width:1px 0;border-color:#CEE1EE;color:#F05;
使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999来达到同样效果。
5、减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。
6、border:替换border:0;的写法；
7、使用css3的属性来代替阴影或是圆角的图片；（浏览器兼容是个问题）
浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
IE6、IE7、Firefox之间的兼容写法：
IE都能识别*;标准浏览器(如FF)不能识别*；
同一类class下的CSS hack可写为：
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*仅IE6及IE6以下*/
一般三者的书写顺序为：FF、IE7、IE6.
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*仅IE6*/
*+html .classname{background-color:#555;}/*仅IE7*/
常见的css bug这里就不说了，稍后会在wiki里总结一个列表供大家查阅和参考。
对于样式和图片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。这三种的区别是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾经的域，通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。
在开发过程中，我们应该对bug出现有预见性，特别是常见的bug（QA经常提的bug比如连续字符串没有换行，鼠标在没有变成手型…）要提前做出处理。 要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划，减少冗余，可以简单写下注释，便于以后修改。
再来说一下快速查bug和解决bug的一些个人见解吧。
首先要分辨bug的类型，有的bug不一定是页面的问题。是否是页面套错了某个标签没有闭合，是否需要js修改或是后台技术处理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自带调试工具都能进行调试和修改；使用工具能很快定位bug的位置和类型，作出修改。
经验的积累也是很重要的。有时候你使用了所有的方法解决但问题仍然存在，需要看看DOCTYPE是否在HTML顶部，是否完整，推荐；是否有多余的空格或是编码格式是否正确，比如ie解析的空格间距不太一样，有时候会导致意想不到的bug。
还有一种方式是逐步删代码方式，看究竟是那个部分是有问题的。
解决bug常用的几个方法：
有人说zoom:1;是解决ie6的兼容问题的万精油。可以用，但是不易多用，这个属性可能会存在一些潜在的问题，至于是什么问题，大家可以google一下。
position:往往和overflow:搭配使用能解决ie下滚动图片侧漏问题哦。
最后要说的是优化，一定要时时刻刻想着优化自己的代码，给用户带来最好的体验。永远记住这句话【
HTML结构的简化&css代码结构的简化】
发些javascript基础知识，便于大家学习，也便于我自己查看
1.javascript的数组API
&pre&//定义数组
var pageIds = new Array();
pageIds.push(′A′);
//shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a：[2,3,4,5] b：1
//unshift：将参数添加到原数组开头，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7
//注：在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的返回值不可靠，需要用返回值时可用splice代替本方法来使用。
//pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a：[1,2,3,4] b：5
//push：将参数添加到原数组末尾，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7
//concat：返回一个新数组，是将参数添加到原数组中构成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]
//splice(start,deleteCount,val1,val2,)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,
var a = [1,2,3,4,5];
var b = a.splice(2,2,7,8,9); //a：[1,2,7,8,9,5] b：[3,4]
var b = a.splice(0,1); //同shift
a.splice(0,0,-2,-1); var b = a. //同unshift
var b = a.splice(a.length-1,1); //同pop
a.splice(a.length,0,6,7); var b = a. //同push
//reverse：将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]
//sort(orderfunction)：按指定的参数对数组进行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
//slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
//join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5"
2.dom最常用API
document方法：
getElementById(id) Node 返回指定结点的引用
getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合
createElement(name) Node Node
createTextNode(text) Node 创建一个纯文本结点
ownerDocument Document 指向这个节点所属的文档
documentElement Node 返回html节点
document.body Node 返回body节点
element方法：
getAttribute(attributeName) String 返回指定属性的值
setAttribute(attributeName,value) String 给属性赋值
removeAttribute(attributeName) String 移除指定属性和它的值
getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合
node方法：
appendChild(child) Node 给指定结点添加一个新的子结点
removeChild(child) Node 移除指定结点的子结点
replaceChild(newChild,oldChild) Node 替换指定结点的子结点
insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点
hasChildNodes() Boolean 如果结点有子结点则返回true
node属性：
nodeName String 以字符串的格式存放结点的名称
nodeType String 以整型数据格式存放结点的类型
nodeValue String 以可用的格式存放结点的值
parentNode Node 指向结点的父结点的引用
childNodes NodeList 指向子结点的引用的集合
firstChild Node 指向子结点结合中的第一个子结点的引用
lastChild Node 指向子结点结合中的最后一个子结点的引用
previousSibling Node 指向前一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点；如果这个节点就是兄弟节点，那么该值为null
3.网上搜藏的一个map对象:
function HashMap()
/** Map 大小 **/
var size = 0;
/** 对象 **/
var entry = new Object();
/** 存 **/
this.put = function (key , value)
if(!this.containsKey(key))
entry[key] =
/** 取 **/
this.get = function (key)
return this.containsKey(key) ? entry[key] :
/** 删除 **/
this.remove = function ( key )
if( this.containsKey(key) && ( delete entry[key] ) )
/** 是否包含 Key **/
this.containsKey = function ( key )
return (key in entry);
/** 是否包含 Value **/
this.containsValue = function ( value )
for(var prop in entry)
if(entry[prop] == value)
/** 所有 Value **/
this.values = function ()
var values = new Array();
for(var prop in entry)
values.push(entry[prop]);
/** 所有 Key **/
this.keys = function ()
var keys = new Array();
for(var prop in entry)
keys.push(prop);
/** Map Size **/
this.size = function ()
/* 清空 */
this.clear = function ()
entry = new Object();
var map = new HashMap();
map.put("A","1");
map.put("B","2");
map.put("A","5");
map.put("C","3");
map.put("A","4");
alert(map.containsKey("XX"));
alert(map.size());
alert(map.get("A"));
alert(map.get("XX"));
map.remove("A");
alert(map.size());
alert(map.get("A"));
/** 同时也可以把对象作为 Key **/
var arrayKey = new Array("1","2","3","4");
var arrayValue = new Array("A","B","C","D");
map.put(arrayKey,arrayValue);
var value = map.get(arrayKey);
for(var i = 0 ; i & value. i++)
//alert(value[i]);
/** 把对象做为Key时 ，自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/
/** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/
function MyObject(name)
this.name =
function MyObject(name)
this.name =
this.toString = function ()
return this.
var object1 = new MyObject("小张");
var object2 = new MyObject("小名");
map.put(object1,"小张");
map.put(object2,"小名");
alert(map.get(object1));
alert(map.get(object2));
map.remove("xxxxx");
alert(map.size());
/** 运行结果 小名 小名 size = 1 **/
/** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/
4.常用的数字函数:
·数字型(Number)
var i = 1;
var i = new Number(1);
2.字符串与数字间的转换
var i = 1;
var str = i.toString(); //结果: "1"
var str = new String(i); //结果: "1"
i = parseInt(str); //结果: 1
i = parseFloat(str); //结果: 1.0
//注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32
3.判断是否为有效的数字
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true
//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
i = parseInt(str);
if( isNaN(i) ){ }
4.数字型比较
//此知识与[字符串比较]相同
5.小数转整数
var f = 1.5;
var i = Math.round(f); //结果:2 (四舍五入)
var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)
var i = Math.floor(f); //结果:1 (返回小于f的最大整数)
6.格式化显示数字
var i = 3.14159;
//格式化为两位小数的浮点数
var str = i.toFixed(2); //结果: "3.14"
//格式化为五位数字的浮点数(从左到右五位数字,不够补零)
var str = i.toPrecision(5); //结果: "3.1415"
7.X进制数字的转换
//不是很懂 -.-
var i = parseInt("0x1f",16);
var i = parseInt(i,10);
var i = parseInt(");
//返回0-1之间的任意小数
var rnd = Math.random();
//返回0-n之间的任意整数(不包括n)
var rnd = Math.floor(Math.random() * n)
5.网上搜藏的js堆栈:
function stack(){
if(this.top==undefined){
//初始化堆栈的顶部指针和数据存放域
this.top=0;
this.unit=new Array();
this.push=function(pushvalue){
//定义压入堆栈的方法
this.unit[this.top]=
this.top+=1;
this.readAllElements=function(){
//定义读取所有数据的方法
if(this.top==0){
alert("当前栈空，无法读取数据");
return("");
var count=0;
var outStr="";
for(count=0;count&this.count++){
outStr+=this.unit[count]+",";
return(outStr);
this.pop=function(){
//定义弹出堆栈的方法
if(this.top==0){
alert("当前栈空，无法弹出数据");
return("");
var popTo=this.unit[this.top-1];
this.top--;
return(popTo);
/* 从堆栈弹出数据，顶部指针减一，不过这里没有做到资源的释放，也
就是说数据仍然存在于this.unit的数组中，只不过无法访问罢了。目前
我也没想到好的办法解决。*/
6.最常用的JavaScript日期函数:
·日期型(Date)
var myDate = new Date(); //系统当前时间
var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
var myDate = new Date(yyyy, mm, dd);
var myDate = new Date("monthName dd, yyyy hh:mm:ss");
var myDate = new Date("monthName dd, yyyy");
var myDate = new Date(epochMilliseconds);
2.获取时间的某部份
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从开始的毫秒数) 时间戳！！
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
3.计算之前或未来的时间
var myDate = new Date();
myDate.setDate(myDate.getDate() + 10); //当前时间加10天
//类似的方法都基本相同,以set开头,具体参考第2点
4.计算两个日期的偏移量
var i = daysBetween(beginDate,endDate); //返回天数
var i = beginDate.getTimezoneOffset(endDate); //返回分钟数
5.检查有效日期
//checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期
if( checkDate("") ){ }
//正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)
var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
if( r.test( myString ) ){ }
7.最常用字符串函数API:
·字符串(String)
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine.";
2.字符串连接
var myString = "Every " + "good boy " + "does fine.";
var myString = "Every "; myString += "good boy does fine.";
3.截取字符串
//截取第 6 位开始的字符
var myString = "Every good boy does fine.";
var section = myString.substring(6); //结果: "good boy does fine."
//截取第 0 位开始至第 10 位为止的字符
var myString = "Every good boy does fine.";
var section = myString.substring(0,10); //结果: "Every good"
//截取从第 11 位到倒数第 6 位为止的字符
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); //结果: "boy does"
//从第 6 位开始截取长度为 4 的字符
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); //结果: "good"
4.转换大小写
var myString = "Hello";
var lcString = myString.toLowerCase(); //结果: "hello"
var ucString = myString.toUpperCase(); //结果: "HELLO"
5.字符串比较
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //结果: true
if( aString == bString ){ } //结果: true
if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同)
6.检索字符串
var myString = "hello everybody.";
// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置
if( myString.indexOf("every") & -1 ){ } //结果: true
7.查找替换字符串
var myString = "I is your father.";
var result = myString.replace("is","am"); //结果: "I am your father."
8.特殊字符:
\b : 后退符 \t : 水平制表符
\n : 换行符 \v : 垂直制表符
\f : 分页符 \r : 回车符
\" : 双引号 \′ : 单引号
\\ : 反斜杆
9.将字符转换成Unicode编码
var myString = "hello";
var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型)
var char = String.fromCharCode(66); //返回Unicode为66的字符
10.将字符串转换成URL编码
var myString = "hello all";
var code = encodeURI(myString); //结果: "hello%20all"
var str = decodeURI(code); //结果: "hello all"
//相应的还有: encodeURIComponent() decodeURIComponent()
8.数学函数:
·Math对象
1. Math.abs(num) : 返回num的绝对值
2. Math.acos(num) : 返回num的反余弦值
3. Math.asin(num) : 返回num的反正弦值
4. Math.atan(num) : 返回num的反正切值
5. Math.atan2(y,x) : 返回y除以x的商的反正切值
6. Math.ceil(num) : 返回大于num的最小整数
7. Math.cos(num) : 返回num的余弦值
8. Math.exp(x) : 返回以自然数为底,x次幂的数
9. Math.floor(num) : 返回小于num的最大整数
10.Math.log(num) : 返回num的自然对数
11.Math.max(num1,num2) : 返回num1和num2中较大的一个
12.Math.min(num1,num2) : 返回num1和num2中较小的一个
13.Math.pow(x,y) : 返回x的y次方的值
14.Math.random() : 返回0到1之间的一个随机数
15.Math.round(num) : 返回num四舍五入后的值
16.Math.sin(num) : 返回num的正弦值
17.Math.sqrt(num) : 返回num的平方根
18.Math.tan(num) : 返回num的正切值
19.Math.E : 自然数(2.045)
20.Math.LN2 : 2的自然对数(0.9453)
21.Math.LN10 : 10的自然对数(2.046)
22.Math.LOG2E : log 2 为底的自然数(1.9634)
23.Math.LOG10E : log 10 为底的自然数(0.2518)
24.Math.PI : π(3.793)
25.Math.SQRT1_2 : 1/2的平方根(0.5476)
26.Math.SQRT2 : 2的平方根(1.0951)
9.浏览器特征函数:
1.浏览器名称
//IE : "Microsoft Internet Explorer"
//NS : "Netscape"
var browserName = navigator.appN
2.浏览器版本
bar browserVersion = navigator.appV
3.客户端操作系统
var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );
4.判断是否支持某对象,方法,属性
//当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false
if( document.images ){ }
if( document.getElementById ){ }
5.检查浏览器当前语言
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
6.检查浏览器是否支持Cookies
if( navigator.cookieEnabled ){ }
10.JavaScript面向对象的方法实现继承:call方法
// 动物类 animal
function animal(bSex){
this.sex = bSex
this.getSex = function(){
return this.sex
// 类静态变量 (如果你不修改它的话～～)
animal.SEX_G = new Object(); // 雌性
animal.SEX_B = new Object(); // 雄性
// 动物子类 鸟
function bird(bSex){
animal.call(this, bSex);
this.fly = function(iSpeed){
alert("飞行时速高达 " + iSpeed);
// 动物子类 鱼
function fish(bSex){
animal.call(this, bSex);
this.swim = function(iSpeed){
alert("游动时速高达 " + iSpeed)
// 鱼 鸟 杂交品种。。。
function crossBF(bSex){
bird.call(this, bSex);
fish.call(this, bSex);
var oPet = new crossBF(animal.SEX_G); // 雌性 鱼鸟
alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");
oPet.fly(124)
oPet.swim(254)
11.用面向对象的编程方式写JavaScript:
MyTool = new function(){
* 返回非空字符串,如果有默认值就返回默认字符串.
this.notNull = function(str,defaultStr){
if(typeof(str)=="undefined"||str==null||str==′′){
if(defaultStr)
return defaultS
return ′′;
rootId = MyTool.notNull(rootId,′001000′);
12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:
* 对JSON对象转换为字符串.
* @param {json对象} json
* @return {json字符串}
function jsonObj2Str(json) {
var str = "{";
for (prop in json) {
str += prop + ":" + json[prop] + ",";
str = str.substr(0, str.length - 1);
str += "}";
* 将json字符串转换为json对象.
* @param {json字符串} jsonstr
* @return {json对象}
function jsonStr2Obj(jsonstr) {
return eval("("+jsonstr+")");
* 得到一个元素的left坐标值.
* @param {dom对象} obj
* @return {位置值}
function getLeft(obj){
var offset=e.offsetL
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
* 得到一个元素的绝对位置的top坐标值.
* @param {dom对象} obj
* @return {位置值}
function getTop(obj){
var offset=e.offsetT
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
* 删除一个字符串的左右空格.
* @param {原始字符串} str
* @return {删除空格之后的字符串}
function trim(str)
return str.replace(/(^\s*)|(\s*$)/g,"");
* 根据id取出一个元素.
* @param {元素id值} str
* @return {dom对象}
function $(str) {
return document.getElementById(str);
* 按name获取一个对象.
* @param {元素name值} str
* @return {根据name返回的第一个对象}
function $byName(str) {
var arr = document.getElementsByName(str);
return arr[0];
/***************以下方法和表单验证相关*************************************************/
* 返回非空字符串,如果有默认值就返回默认字符串.
* @param {要进行转换的原字符串} str
* @param {默认值} defaultStr
* @return {返回结果}
function notNull(str, defaultStr) {
if (typeof(str) == "undefined" || str == null || str == ′′) {
if (defaultStr)
return defaultS
return ′′;
* 比较两个日期大小.
* @param {较小日期的文本框id} smallDate
* @param {较大日期的文本框id} bigDate
* @param {出错的提示信息} msg
function compareTwoDate(smallDate, bigDate, msg) {
var v1 = $(smallDate).
var v2 = $(bigDate).
if (v1 &= v2) {
alert(msg);
v2.focus();
* 比较两个金额大小的方法.
* @param {较小的金额} smallNum
* @param {较大的金额} bigNum
* @param {出错提示信息} msg
* @return {Boolean}
function compareTwoNum(smallNum, bigNum, msg) {
var v1 = $(smallNum).
var v2 = $(bigNum).
if (parseFloat(v1) &= parseFloat(v2)) {
alert(msg);
v2.focus();
* 检查文本框的长度是否超出指定长度.
* @param {文本id} textId
* @param {文本框的最大长度} len
* @param {文本框描述内容} msg
* @return {有错就返回false,否则返回true}
function checkLength(textId, len, msg) {
obj = $(textId);
str = obj.
str = str.replace(/[^\x00-\xff]/g, "**");
realLen = str.
if (realLen & len) {
alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入！\n注意：一个汉字占2位。");
obj.focus();
* 判断某个文本框不可以为空.
* @param {文本框id} textId
* @param {文本框描述内容} msg
* @return {有错就返回false,否则返回true}
function checkIfEmpty(textId, msg) {
var textObj = $(textId);
var textValue = textObj.
if (trim(textValue) == ′′) {
alert(′[′ + msg + ′]不得为空！′);
textObj.focus();
* 判断指定文本框内容必须为邮件.
* @param {文本框id} textId
* @param {文本框描述} msg
* @return {如果是邮件内容就返回true否则返回false}
function checkIsMail(textId, msg) {
var obj = $(textId);
if (!_isEmail(obj.value)) {
alert(′[′ + msg + ′]不是合法的邮件地址！′);
obj.focus();
* 验证是不是邮件.
* @param {要验证的字符串} strEmail
* @return {Boolean}
function _isEmail(strEmail) {
//接下来的验证是否有两个以上的‘.’号，有的话就是错的！
var first = strEmail.indexOf(′.′);
if (strEmail.indexOf(′@′)== -1) {
var tempStr = strEmail.substring(first + 1);
if (tempStr.indexOf(′.′) != -1) {
if (strEmail
.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
* 判断某个文本框是否数字.
* @param {文本框id} textId
* @param {文本框描述内容} msg
* @return {Boolean}
function checkIsNum(textId, msg) {
obj = $(textId);
if (isNaN(obj.value)) {
alert(′[′ + msg + ′]必须为数字。′);
obj.focus();
* 判断某个文本框是否含有非法字符.
* @param {文本框的id} textId
* @param {文本框描述内容} msg
* @return {有错就返回false否则返回true}
function checkIsValid(textId, msg) {
obj = $(textId);
if (!_isValidString(obj.value, ′[′ + msg + ′]不得含有非法字符。′)) {
obj.focus();
* 判断是不是合法字符串.
* @param {要进行判断的字符串} szStr
* @param {文本描述} errMsg
* @return {合法则返回true否则返回false}
function _isValidString(szStr,errMsg) {
voidChar = "′\"&&`~!@#$%^&\(\)（）！￥……？?“”‘’*";
for (var i = 0; i & voidChar. i++) {
aChar = voidChar.substring(i, i + 1);
if (szStr.indexOf(aChar) & -1){
alert(errMsg)
/*************** 以下方法和下拉菜单相关*************************************************/
* 控制下拉菜单不可以为-1(未选择情况value=-1)
* @param {下拉菜单id} selectId
* @param {下拉菜单描述内容} msg
* @param {下拉菜单的空值对应的value,默认为-1} nullValue
* @return {Boolean}
function checkChooseSelect(selectId, msg ,nullValue) {
var obj = $(selectId);
if (obj.value == notNull(nullValue,′-1′)) {
alert(′[′ + msg + ′]必选!′);
obj.focus();
* 得到下拉菜单的显示的文字.
* @param {下拉菜单dom对象} selectObj
* @return {返回下拉菜单的显示的"文本"}
function getSelectText(selectObj) {
return selectObj.options[selectObj.selectedIndex].
* 得到下拉菜单的显示的值.
* @param {下拉菜单dom对象} selectObj
* @return {得到下拉菜单的显示的"值"}
function getSelectValue(selectObj) {
return selectObj.options[selectObj.selectedIndex].
* 设置下拉菜单的选择状态到指定的值.
* @param {下拉菜单对象} obj
* @param {要选择的值} value
function setSelectValue(obj, value) {
/*for (i = obj.options.length - 1; i &= 0; i--) {
if (obj.options[i].value == value) {
obj.options[i].selected =
obj.value=
* 根据键值串的内容进行下拉菜单的动态组装
* @param {要进行下拉菜单组装的dom对象} obj
* @param {键值对用,和;分割,例如′1,男;2,女;3,未知′} valAndText
function setSelectContent(obj,valAndText){
if(trim(valAndText)==′′){
alert(′没有要进行组装下拉菜单的数据!′);
clearSelect(obj);
var keyandvalues = valAndText.split(′;′);
for(var i=0;i&keyandvalues.i++){
var arr = keyandvalues[i].split(′,′);
var value =arr[0];
var text =arr[1];
var objOption = new Option(text,value);
obj.add(objOption);
* 清空下拉菜单里面的内容.
* @param {下拉菜单对象} obj
function clearSelect(obj) {
for (var i=obj.options. i &0; i--) {
obj.remove(0);
/*************** 以下方法和多选框相关*************************************************/
* 返回选中的checks的id组成的字符串,逗号隔开.
* @param {checks数组} checks
* @return 选择的id组成的字符串
function getCheckedIds(checks){
var selectedValue = ′′;
var len = checks.
for(var index=0; index& index++) {
if(checks[index].checked==true) {
selectedValue += checks[index].value+",";
if(selectedValue.length&0)
return selectedValue.substring(0,selectedValue.length-1);
return selectedV
将上面的js保存之后,使用下面的html进行测试:
&script language="javascript" src="aaaaa.js"&&/script&
&SCRIPT LANGUAGE="JavaScript"&
* 表单验证的示例js方法.
function check(){
if(checkIfEmpty(′a′,′非空校验′)
&&checkIsMail(′b′,′邮箱校验′)
&&checkIsNum(′c′,′数字校验′)
&&checkIsValid(′d′,′合法性校验′)
&&compareTwoDate(′e′,′f′,′小日期与大日期关系错误!′)
&&checkLength(′g′,5,′长度校验′)
&&checkChooseSelect(′h′,′下拉菜单非空′,′-1′)
&&compareTwoNum(′k′,′l′,′大小数目关系不正确!′)){
alert(′校验通过!′);
* 取下拉菜单的值和文本的示例js方法.
function getSelect(){
var sss = $(′h′);
alert(′下拉菜单选择的文本是:′+getSelectText(sss)+′\n′
+′下拉菜单选择的值是:′+getSelectValue(sss));
* 根据键值字符串设置下拉菜单的显示内容.
function setSelect(){
var sss = $(′i′).
setSelectContent($(′h′),sss);
* 返回多选框数组选择状态的id的字符串,结果以逗号隔开.
function getMulti(){
alert(′多选选择的id是:′+getCheckedIds(document.getElementsByName(′j′)));
&input id=′a′&
checkIfEmpty(′a′,′非空校验′)
&input id=′b′ value=′′&
checkIsMail(′b′,′邮箱校验′)
&input id=′c′ value=′aaaa′&
checkIsNum(′c′,′数字校验′)
&input id=′d′ value=′@$@$#$#!%%#′&
checkIsValid(′d′,′合法性校验′)
&input id=′e′ value=′′&
&input id=′f′ value=′′&
compareTwoDate(′e′,′f′,′小日期与大日期关系错误!′)
&input id=′k′ value=′12.3′&
&input id=′l′ value=′4564′&
compareTwoNum(′k′,′l′,′大小数目关系不正确!′)
字符长度校验(&5):
&input id=′g′&
checkLength(′g′,5,′长度校验′)
下拉菜单非空校验:
&select id=′h′&
&option value=′-1′&
&option value=′1′&
&option value=′2′&
checkChooseSelect(′h′,′下拉菜单非空′,′-1′)
&td colspan=′2′&
&button onclick=′check()′&
测试表单校验方法
&button onclick=′getSelect()′&
得到下拉菜单的值
getSelectText(sss)和getSelectValue(sss)
输入下拉菜单的键值字符串(如右所示)
&input id=′i′ value=′1,男;2,女;3,未知′&
&button onclick=′setSelect()′&
设置下拉菜单的值
setSelectContent($(′h′),sss)
&input type=′checkbox′ name=′j′ value=′aaa1′&
&input type=′checkbox′ name=′j′ value=′aaa2′&
&input type=′checkbox′ name=′j′ value=′aaa3′&
&input type=′checkbox′ name=′j′ value=′aaa4′&
&button onclick=′getMulti()′&
得到多选选择的id
getCheckedIds(document.getElementsByName(′j′))
近来瀑流式布局越来越普遍，实现瀑流式布局的插件也越来越多。
例如淘宝的KISSY。
不过对我我这种半吊子来说，要熟练的使用KISSY没那么快。
最近在一个项目中hery推荐了一个Masonry插件，
使用起来很简单，插件大小只有6k。简单介绍下。
一般的瀑流式布局，如果有4列的话，很多人会采用一下这种写法:
&div id="main"&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
也就是4列等宽在浮动。因为瀑流式一般每个块的高度都是不固定的，
所以没有办法通过每个块的浮动来实现。
使用插件Masonry就能够解决这个问题。同样的样式用Masonry插件就可以这样写：
&div id="main"&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
简单了许多，插件的原理是通过绝对定位实现的，也就解决了高度不一产生的浮动问题。
这样的写法。后台数据的输出也会更加容易一些。
Masonry的使用方法如下：
引入文件：
在js中调用插件：
&script type="text/javascript"&
$(function(){
$(′#main′).masonry({
// options 设置选项
itemSelector : ′.list′,//class 选择器
columnWidth : 240 ,//一列的宽度 Integer
isAnimated:true,//使用jquery的布局变化& Boolean
animationOptions:{
//jquery animate属性 渐变效果& Object { queue: false, duration: 500 }
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,// 适应宽度&& Boolean
isResizableL:true,// 是否可调整大小 Boolean
isRTL:false,//使用从右到左的布局 Boolean
如果有图片的话，调用如下：
var $main= $(′#main′);
$main.imagesLoaded(function(){
$main.masonry({
itemSelector : ′.list′,
columnWidth : 240
预览网址：http://www.web92.net/dom/-Masonry/
下载地址：
下载密码：
www.web92.net
瀑流布局现在在很多大大小小的网站中都可以看到，可是你发现如果你想用是一件相当麻烦的事，今天有了Masonry 插件，给大家带来一个很大的惊喜，简单使用，轻量级应用。
类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。
这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求
预览网址：http://www.web92.net/dom/-Masonry/
下载地址：
下载密码：
www.web92.net
很长时间没看 正则表达式了，碰巧今天用到，温故知新了一把 看书学习吧
50% 的举一反三练习中的原创。
一 javascript正则表达式的基本知识
1&&&& javascript 正则对象创建 和用法
声明javascript 正则表达式
[js]var reCat = new RegExp("cat");[/js]
[js]var reCat = /cat/;&&&&& //Perl 风格&& （推荐）[/js]
2 学习最常用的 test exec match search& replace& split 6个方法
1） test& 检查指定的字符串是否存在
var data = "123123";
var reCat = /123/
alert(reCat.test(data));& //true
//检查字符是否存在& g 继续往下走& i 不区分大小写
2） exec 返回查询值
var data = ",,Cat,cat,dsfsdfs,";
var reCat = /cat/i;
alert(reCat.exec(data));& //Cat
3）match& 得到查询数组
var data = ",,Cat,cat,dsfsdfs,";
var reCat = /cat/
var arrMactches = data.match(reCat)
for (var i=0;i & arrMactches. i++)
alert(arrMactches[i]);&& //Cat& cat
4） search& 返回搜索位置& 类似于indexof
var data = ",,Cat,cat,dsfsdfs,";
var reCat = /cat/
alert(data.search(reCat));& //23
5） replace& 替换字符& 利用正则替换
var data = ",,Cat,cat,dsfsdfs,";
var reCat = /cat/
alert(data.replace(reCat,"libinqq"));
6）split&& 利用正则分割数组
var data = ",,Cat,cat,dsfsdfs,";
var reCat = /\,/;
var arrdata = data.split(reCat);
for (var i = 0; i & arrdata. i++)
alert(arrdata[i]);
3& 学习下& 简单类&& 负向类& 范围类& 组合类
var data = "1libinqq,2libinqq,3libinqq,4libinqq";
var reCat = /[123]libinqq/
var arrdata = data.match(reCat);
for (var i = 0; i & arrdata. i++)
alert(arrdata[i]);& // 1libinqq 2libinqq& 3libinqq
var data = "alibinqq,1libinqq,2libinqq,3libinqq,4libinqq";& //\u0062cf
var reCat = /[^a123]libinqq/
var arrdata = data.match(reCat);
for (var i = 0; i & arrdata. i++)
alert(arrdata[i]);& //4libinqq
var data = "libinqq1,libinqq2,libinqq3,libinqq4,libinqq5";& //\u0062cf
var reCat = /libinqq[2-3]/
var arrdata = data.match(reCat);
for (var i = 0; i & arrdata. i++)
alert(arrdata[i]);&& // libinqq2& libinqq3
var data = "a,b,c,w,1,2,3,5";& //\u0062cf
var reCat = /[a-q1-4\n]/
var arrdata = data.match(reCat);
for (var i = 0; i & arrdata. i++)
alert(arrdata[i]);& // a b c 1 2 3
前端工程师？前端攻城湿？前端攻城师？前端攻城狮？！
我坎坷的前端路
06年年底我刚刚接触前端概念的时候给自己定了一个这么定义：和设计师一样细腻,和程序员一样严谨;游走在设计师和工程师之间,游刃于用户体验和技术实现之间,斡旋在用户利益和商业利益之间。——偶是一枚前端开发工程师！那时候决定直接一定要坚定的走前端开发这条路！到现在也有5年多了，其中发生了很多事情。
07年开始基本上一门心思的学js，调试前期全是一个一个的alert，后来用Visurl Studio断点调试，前端知识和js基本是从零开始，那时候甚至连ajax都要问后端问个半天才搞懂，那时候做音乐试听的项目，做了2个月，基本每天都是凌晨12点后回家，相当的累，但是每天都非常开心充实。这个项目现在回去想想，交互还是相当的负责，每个页面都有可以直接播放音乐，循环播放，打分，歌词随音乐滚动，还有烦人的mediaplayer操作，还有很多很多的交互功能，或许我是幸运的，第一次做前端就碰到了这么个项目，让我深刻的体会了前端的苦与乐。这以后一直不断的学原生的js。
08年年底做过个2个月的客服，嘿嘿，基本上是帮网友解决一些网页上操作和一些电脑故障问题，这时候才真正思考了一个问题：用户到底是怎么使用我们自己开发的网站的。用户很“笨”，“笨”到你想把你自己的电脑砸了。一个网友在某个原创音乐网站上上传了歌曲，到我们网站来听他自己的歌曲，找了半天没找到说你们网站真垃圾，搞了半天终于知道了他在那个网站上上传的歌曲不能在我们网站上听！当然这个是个极端的例子，原因也很简单其实这两个音乐网站前期本来就是同一批人开发的，架构和交互基本一样。给用户造成一些错觉。
09年开始做了半年的美工，设计加切页面，空的时候也自己玩js。那时候自己搞MTJS，写了一个很不成熟的写了一个DOM类库，基本功能都实现了，那时候学了很多，不过由于相对的不成熟所以一直实际应用，当然现在凡是碰到用原生js写的时候，里面的方法还是非常有效，非常好用的。
09年下半年开始就不做设计了，基本上是切页面，写js，今年开始基本每天都扑在js上了，基本没有多少空余的时间，每天听产品今天这样改明天那样改，说实话累了。现在前端方向那么多，真得好好想想自己接下去的路该怎么走。很多苦逼，很多快乐，有时候也很嚣张，有时候也很无助，更多的是无奈。
前端开发正在蓬勃发展，或许大家也该想想自己将来该往哪方面发展。
以下内容来自：http://www.cnblogs.com/radom/archive//2259674.html
认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。
现阶段的价值也很大。web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。
我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。
新浪前端：
作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。
如果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对方的球门….. 他有两点必须是非常清楚：1、他必须清楚在对方球门与自己之间存在着哪些阻碍；2、他必须清楚如何破除这些障碍将球直至门网….. 他也应该要是所有队员中对这两点最为清楚的人。
每个球队都有自己的明星，可以是锋线杀手、可以是中场战车、可以是超级后卫、也可以是神奇门将、甚至可以是救火教练。而且相信球场上任何一个位置的优秀球员，都有可能在后场断球长途盘带奔袭射门，球进！但任何一支优秀的球队都必须有两类分工，前场球员想的是赢得比赛，后场球员想的是不能输掉比赛，各司其职才能卓越。
而作为一名称职的前锋，你必须是球队里，进球最多、射门技术最好的那一个，否则你还有什么价值可言呢….
百度前端：
应该来讲有三条路，一个是向前走，一个是向后走，另外一个是一直做前端，深入下去。向前即是克军所说的往用户体验与交互设计甚至产品设计师上走，这是最能体现前端价值的了，即用户体验，大多人会往这方面走；
向后走就是做Web开发，往数据库和后台开发方面走，不再区分前后端，大家深入产品的研发实现，这条路就是与软件工程师融合的路，这是的价值就体现在对于业务功能的实现上；
最后还有的是一直深入做前端开发，比如前端各类库与框架的架构设计，W3C各种标准深入研究，对于JavaScript语言本身的研究，对浏览器的原理分析，对于网络传输协议的原理分析等等，这条路要深入下去很不容易，因为涉及很多原理与根本性的东西，所以走的人也不是很多。
当然了，还有一些彻底离开了前端甚至软件开发，转行专门做产品或者做业务运营。可能会因为有不错的技术背景有一定的优势呢。
可能是史上最全的jQuery学习资料
下载包里包含：
1.《《锋利的jQuery》(高清扫描版-有书签)》&实例源码
2.《jQuery初学实例代码集》
3. 《240多个jQuery插件.pdf》
4.《AJAX教程—JQUERY.pdf》
5.《jQuery.EasyUi-1.2.4_API.chm》
6.《jQuery_EasyUI培训文档.doc》
7.《Jquery_基础学习笔记.pdf》
8.《Jquery_基础学习笔记.pdf》
9.《jQuery_使用手册.pdf》
10.《jquery的基本用法[文字版][中文].pdf》
11.《jQuery的基本语法.pdf》
12.《Jquery给页面的所有超链接添加脚本函数.pdf》
13.《jquery语法实例.pdf》
14.《分享-jquery-funet8.com-15天学会jquery.pdf》
下载地址：
下载密码：
www.web92.net
这是一段之前在网上找到的一段代码，是鼠标点击之后菜单展开的jQuery代码，现在只需要改动一个js代码中的一个单词就实现鼠标放在导航栏上菜单展开的手风琴代码
先来看看html部分：
&pre&&div id="wrapper-250"&
&li id="one"&&a href="http://www.funet8.com"&好玩吧&span&495&/span&&/a&
&li&&a href="#"&&em&01&/em&Dropbox&span&42&/span&&/a&&/li&
&li&&a href="#"&&em&02&/em&Skydrive&span&87&/span&&/a&&/li&
&li&&a href="#"&&em&03&/em&FTP Server&span&366&/span&&/a&&/li&
&li&&a href="#"&&em&04&/em&Dropbox&span&1&/span&&/a&&/li&
&li&&a href="#"&&em&05&/em&Skydrive&span&10&/span&&/a&&/li&
&li id="two"&&a href="#two"&Mail&span&26&/span&&/a&
&li&&a href="#"&&em&01&/em&Hotmail&span&9&/span&&/a&&/li&
&li&&a href="#"&&em&02&/em&Yahoo&span&14&/span&&/a&&/li&
&li id="three"&&a href="#three"&Cloud&span&58&/span&&/a&
&li&&a href="#"&&em&01&/em&Connect&span&12&/span&&/a&&/li&
&li&&a href="#"&&em&02&/em&Profiles&span&19&/span&&/a&&/li&
&li&&a href="#"&&em&03&/em&Options&span&27&/span&&/a&&/li&
&li&&a href="#"&&em&04&/em&Connect&span&12&/span&&/a&&/li&
&li&&a href="#"&&em&05&/em&Profiles&span&19&/span&&/a&&/li&
&li&&a href="#"&&em&06&/em&Options&span&27&/span&&/a&&/li&
&li id="four"&&a href="#four"&Sign Out&/a&
&li&&a href="#"&&em&01&/em&Log Out&/a&&/li&
&li&&a href="#"&&em&02&/em&Delete Account&/a&&/li&
&li&&a href="#"&&em&03&/em&Freeze Account&/a&&/li&
调用javascript部分：
&script type="text/javascript" src="js/jquery.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
// 定义变量
var accordion_head = $('.accordion & li & a'),
accordion_body = $('.accordion li & .sub-menu');
accordion_head.first().addClass('active').next().slideDown('normal');
//鼠标点击事件："click"；鼠标浮动上“hover”
accordion_head.on('hover', function (event) {
// 隐藏标题
event.preventDefault();
// 根据鼠标动作展示或隐藏菜单
if ($(this).attr('class') != 'active') {
accordion_body.slideUp('normal');
$(this).next().stop(true, true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
accordion_head.on('hover', function (event) { 实现鼠标事件的更换“hover”为“click”
预览网址：
下载地址：
6. 适当的代码注释
代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
3. Content
4. SideBar
----------------------------------- */
如此你代码的结构就一目了然，你可以容易的查找和修改代码。
而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:
/*** Header ***/
#header{ height:145 position: }
#header h1{ width:324 margin:45px 0 0 20 float: height:72}
/*** Content ***/
#content{ background:# width:650 float: min-height:600 overflow:}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow: }
#content .recent{ margin-bottom:20 border-bottom:1px solid #f3f3f3; position: overflow: }
/*** Footer ***/
#footer{ clear: padding:50px 5px 0; overflow:}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans- font-size:1.1 }
7. 给你的CSS代码排序
如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
background-color:#3399
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-
height:300
margin:10px 5
padding:5px 0 10px 5
width:30%;
z-index:10;
8. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。
/*** 每个样式属性写一行 ***/
background-color:#3399
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-
height:300
margin:10px 5
padding:5px 0 10px 5
width:30%;
z-index:10;
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399 color:#666; font: 1.2em/1.4em Arial, Helvetica, sans- height:300 margin:10px 5 padding:5px 0 10px 5 width:30%; z-index:10; }
当对于一些样式属性较少的选择器，我会写到一行：
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399 color:#666;}
对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。
9. 选择更优的样式属性值
CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如
区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
而border:none把border设为"none"即没有，浏览器解析"none"时将不作出渲染动作，即不会消耗内存值。所以建议使用border:
同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。
10. 使用&link&代替@import
首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。
11. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：
&style type="text/css" &
#container{ .. }
#sidebar{ .. }
而是使用&link&导入外部样式表：
[html]&link rel="stylesheet" type="text/css" href="css/styles.css" /&[/html]
12. 避免使用CSS表达式（）
CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：
[css]background-color: ( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );[/css]
如上所示，中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。
13. 代码压缩
当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。
TA的最新馆藏[转]&[转]&
喜欢该文的人也喜欢