博客园_愁容骑士FFF

CSS Transition （CSS过渡效果）入门

2011-09-28T13:48:00Z

尽管人们期待屏幕显示技术有所改进，但CSS和HTML却只提供了少数的交互设计控制，而且还只是双向状态的而非渐进状态，如：一个链接只能是一种颜色或另一种颜色，文本域只能是一种尺寸或另一种尺寸，一幅照片要么透明要么不透明。没有从两种状态的之间的部分，即没有过渡。

这种不优雅的切换效果使很多页面让人感觉突兀。虽然我们可以用DHTML和jQuery来实现过渡效果，但这需要很多代码来实现原本很简单的事情。

在这篇文章中，我们用一种简洁的方法来给页面增加过渡效果，你将会发现CSS ransitions的一些有用的信息以及如何使用它们。

几个月前，我曾冒失地建议设计师们应该使用CSS3新技术来实现他们期待很久的一些基本样式，但问题是这些技术在IE中（包括IE8）都无法实现。一些读者认为建议使用那四分之三的人无法看到的新技术是轻率的。

对于这些读者，我会说：先不要急于决定，因为我将会向你们介绍CSS中另一个属性，它可以用仅仅几行代码为任何元素添加过渡效果。

CSS3正在引入CSS transition技术，但已经作为一个扩展，CSS transition已被添加进了Webkit。这意味着这项技术目前只能在基于Webkit引擎的浏览器上使用，如Apple Safari和Google Chrome。

CSS过渡效果的由来

过渡作为Webkit的一部分已经有一段时间了，基于此，Safari UI实现了其他浏览器无法实现的很多酷炫的效果。但W3C CSS Workgroup拒绝将其加入官方标准，一些成员认为过渡效果并非样式属性，而且已经可以用脚本实现。

但很多设计者和开发者，包括我在内，认为过渡效果实际上是一种动态样式属性，而非传统上我们很多人使用的静态样式。

幸运的是，争论已经过去，去年三月份来自Apple和Mozilla的代表们开始将CSS Transition Module 加入CSS Level 3 specification，和Apple加入Webkit的那部分非常接近。

渐进增强设计的简介

在进行下面的内容之前，让我们先强调一点：如果样式在浏览器上不具有互操作性，永远不要把网站功能依赖于样式。

这就是说，你可以用样式如过渡效果和增强设计来改进用户体验，而不牺牲那些无法看到它们的用户的可用性。只要能让用户离开了那些过渡效果仍然可以完成他们的任务就好。

首先介绍一些过渡的概念

CSS过渡不会替代DHTML，但可以在支持过渡效果的浏览器中增强你的设计，并且不用担心破坏其他用户的浏览体验。

你需要在Apple Safari 3+ 或者 Google Chrome中看到过渡效果，这两个浏览器都可以在Mac和PC上使用。

反转

过渡效果最明显的表现就是当用户把鼠标悬停在某个元素上时高亮它们，如链接、表格、表单域、按钮等。过渡可以给页面增加一种非常平滑的外观。

Example #1

HTML

<div > 
 <p><a href="#">Link</a></p> 
</div>

CSS

#example1 p { text-align: left; }
#example1 a:link {
 font-size: 3em;
 color: blue;
 background-color: rgb(255,255,255);
 -webkit-transition: color .5s linear, background-color .5s linear; 
 transition: color .5s linear, background-color .5s linear;  
}
#example1 a:hover {
 color: red;
 background-color: rgb(255,204,255);
 -webkit-transition: color .5s linear, background-color .5s linear; 
 transition: color .5s linear, background-color .5s linear;  
}
#example1 a:active {
 color: green;
 -webkit-transition: color .5s linear; 
 transition: color .5s linear; 
}

下拉菜单

CSS过渡使纯CSS来实现下拉菜单变得非常容易。

Example #2

HTML

<div > 
 <ul > 
  <li>About Us</li> 
   <ul > 
    <li><a href="#">Our Team</a></li> 
    <li><a href="#">News</a></li> 
    <li><a href="#">Reviews</a></li> 
    <li><a href="#">Contact</a></li> 
   </ul> 
 </ul> 
</div>

CSS

#example2 {
 height:200px; 
}
#example2 a:link {
 color: blue;
 text-decoration: none;
 -webkit-transition: color .25s ease-in 0s;
 transition: color .25s ease-out 0s; 
}

#example2 a:hover {
 color: red;
 -webkit-transition: color .25s ease-in .1s;
 transition: color .25s ease-out .1s; 
}

#example2 a:active {
 color: green;
 transition: color .25s ease; 
}

#example2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#example2 .menu {
 display: block; position: relative;
 top: .9em;
 left: 0;
 padding: 10px;
 height: auto;
 width: 100px;
 border: 8px solid rgba(204,204,204,.5);
 cursor: pointer;
 background-color: rgba(255,255,255,.75);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

#example2 ul.menu  li {
 font-weight: normal;
 list-style: none;
}

#example2 ul.menu  li a:link {
 font-weight: normal;
 list-style: none;
 font-size: 12px;
 margin-left: 0;
 padding-left: 0;
}

#example2 ul.menu ul li {
 font-weight: normal;
 padding: 5px 0;
 margin:0;
 border-top: 1px solid rgb(204,204,204);
 background-color: rgb(255,255,255);
 -webkit-transition: background-color .5s ease; 
 transition: background-color .2s ease; 
}

#example2 .drop {
 display: block; position: relative;
 height: 0;
 overflow: hidden;
 width: 100px;
 opacity: 0;
 -webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s;
 transition: opacity .25s linear 0s, height .25s ease-out .1s;  
}

#example2 ul.menu ul li:hover {
 background-color: rgb(234,234,234);
 -webkit-transition: background-color .5s ease; 
 transition: background-color .2s ease; 
}
 
#example2 ul.menu:hover>.drop {
 height: 140px;
 opacity: 1;
 -webkit-transition: opacity .25s linear 0s,  height .25s linear 0s;
 transition: opacity .25s linear 0s,  height .25s linear 0s; 
}

动画

你可以使用CSS过渡来让一个对象在两点之间移动。

Example #3

HTML

<div > 
 <div > 
  <p><strong>Example #3</strong></p> 
  <p  style="color:#FFFFFF;">Click & Hold!</p> 
  <div id="astro"><img src="http://netdna.webdesignerdepot.com/uploads/css101/astro-127531.png"></div> 
 </div> 
</div>

CSS

#example3 {
 background-color: black;
 color: white;
}
  
#example3 .control {
 text-align: center; font-size: 3em;
}
  
#example3 .move { cursor: pointer;}
  
#example3 .move>#astro {
 position: relative;
 top: 0;
 left: 250px;
 -webkit-transition: top 2s ease-in-out, left 2s ease;
 transition: top 2s  ease-in-out, left 2s ease;
}
  
#example3 .move:active>#astro {
 top: 10px;
 left: 10px;
 -webkit-transition: top 2s ease-in-out, left 2s ease;
 transition: top 2s  ease-in-out, left 2s ease;
}

过渡，状态和动作

我们在此稍作停留，在深入了解过渡之前，我们必须理解一个元素产生过渡效果的各种状态。

状态定义了一个特定元素在当前如何与用户进行交互，它们在CSS中用伪类来标注。例如：当用户把鼠标悬停在某一元素上时，那个元素将应用用伪类hover的样式。

动态伪类	受影响的元素	描述
:link	仅链接	未访问链接
:visited	仅链接	已访问链接
:hover	所有元素	鼠标可悬停元素
:active	所有元素	鼠标可点击元素
:focus	所有可被选中元素	选中的元素
None	所有元素	所有元素默认状态

过渡将会在渐渐地在两种不同的状态间变换。例如：某个元素的原始颜色值将会经过中间色调缓慢地变化到悬停颜色值。

一个简单的过渡例子

让我们考虑为一个链接增加悬停颜色过渡效果。像其他CSS属性一样，transition属性直接应用在CSS选择器上，这个属性有以下4个值：

CSS property

CSS属性表示要产生变化的属性（如：颜色）。下面的列表列出了可以产生过渡的属性。

Duration

持续表示过渡持续的时间，以秒为单位（如：.25s）

Timing function

计时功能控制Duration如何计时。你可以让效果加速或减慢甚至为其指定一个节拍或计时器，而不是仅仅使用一个数字来计时。

Delay

延迟表示动作触发后多长时间开始产生过渡效果，通常用秒表示。如果不需要延迟的话，此值可以忽略。

因为过渡属性是Webkit的扩展，所以我们必须把transition 和 -webkit-transition两种属性都包含进来以向后兼容：

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

现在，当悬停在一个链接上时，其颜色将会在0.25秒内从默认颜色经中间色变化到最终色。

当然，我们还要让它变回默认颜色。我们给伪类:link（如果可能的话也给:visited）在淡出之前增加一个非常简短的过渡（0.1秒）：

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

增加多重过渡

因为过渡是CSS的一个属性，如果添加多个transition属性实例，最后添加的那个将覆盖之前的实例。所以在下面的规则中仅有背景颜色产生过渡效果：

a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  transition: background-color .15s linear .1;
}

要实现多重过渡，可以在同一transition属性中将各个要变换的属性用逗号隔开：

a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

这个例子将会使前景色和背景色同时产生过渡效果。

哪些属性可以产生过渡？

几乎任何可设定颜色、长度和位置值的CSS属性都可以产生过渡效果，包括很多CSS3的属性。一个值得注意的例外是box-shadow.

根据W3C的过渡标准，这里有一个可以产生过渡效果的CSS属性列表，标示了哪些变量可以产生变化。我将其中的一些有用的属性进行了强调。

CSS属性	可改变的变量
background-color	颜色
background-image	仅渐变
background-position	百分比,长度
border-bottom-color	颜色
border-bottom-width	长度
border-color	颜色
border-left-color	颜色
border-left-width	长度
border-right-color	颜色
border-right-width	长度
border-spacing	长度
border-top-color	颜色
border-top-width	长度
border-width	长度
bottom	长度, 百分比
color	颜色
crop	Rectangle
font-size	长度, 百分比
font-weight	数字
grid-*	Various
height	长度, 百分比
left	长度, 百分比
letter-spacing	长度
line-height	数字, 长度, 百分比
margin-bottom	长度
margin-left	长度
margin-right	长度
margin-top	长度
max-height	长度, 百分比
max-width	长度, 百分比
min-height	长度, 百分比
min-width	长度, 百分比
opacity	数字
outline-color	颜色
outline-offset	整数
outline-width	长度
padding-bottom	长度
padding-left	长度
padding-right	长度
padding-top	长度
right	长度, 百分比
text-indent	长度, 百分比
text-shadow	阴影
top	长度, 百分比
vertical-align	关键词, 长度, 百分比
visibility	可见性
width	长度, 百分比
word-spacing	长度, 百分比
z-index	整数
zoom	数字

过渡计时和延迟

你可以改变过渡的计时率，使得过渡在开始的时候缓慢，结束的时候加快，反之亦然；或者在中间增加其他变化。CSS过渡使用5个关键字值来实现自定义计时曲线。

名称	如何工作
cubic-bezier(x1, y1, x2, y2)	X和Y的值用于定义计时功能的贝塞尔曲线形状，位于0到1之间
linear	匀速
ease	渐慢
ease-in	加速
ease-out	变慢
ease-in-out	加速然后变慢

全局过渡？

过渡将会很快成为所有网站增强用户界面反馈的标准操作步骤。要给整个网站增加无处不在的过渡效果，一个选择就是使用全局选择器。通过为所有元素应用默认过渡属性，你可以实现统一的过渡效果。

*:link, *:visited, *:hover, *:active, *:focus {
   -webkit-transition:
     color .25s linear,
      background-color .25s linear,
     border-color .25s linear;
   transition:
     color .25s linear,
     background-color .25s linear,
     border-color .25s linear;
}

这里有一个争议，认为给页面上所有元素应用过渡属性将会减慢使浏览器的解析速度。但我还没有发现任何证明此观点的证据，有人知道吗？

Jason Cranford Teague写过13余本数字媒体的书，包括：Speaking In Styles: The Fundamentals of CSS for Web Designers.要了解更多关于CSS和web打印的信息，请参考Jason的新书：Fluid Web Typography.可以在Twitter上follow Jason：@jasonspeaking。

原文地址：http://www.webdesignerdepot.com/2010/01/css-transitions-101/

本文来源：http://hi.baidu.com/thinkmad/blog/item/deb0c0fdde4b064ed6887db5.html

本文链接

利用css3的animation实现slide

2011-09-28T13:44:00Z

主要介绍一下animation,那么先看下面一段代码。

/* 确保我们是在一个 3-D 空间 */ -webkit-transform-style: preserve-3d;

/*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */

-webkit-animation-name: x-spin;

-webkit-animation-duration: 7s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear; }

/* 定义要调用的动画 */

@-webkit-keyframes x-spin {

0% { -webkit-transform: rotateX(0deg); }

50% { -webkit-transform: rotateX(180deg); }

100% { -webkit-transform: rotateX(360deg); }

}

animation对应的CSS属性列表：

animation-name 动画的名称。

animation-duration 定义动画播放一次需要的时间。默认为0；

animation-timing-function 定义动画播放的方式，参数设置类似transition-timing-function animation-delay 定义动画开始的时间

animation-iteration-count 定义循环的次数，infinite即为无限次。默认是1。

-webkit-animation-direction 动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

—————————————————————

有兴趣的可以看看我利用animation实现slide幻灯片。

点击查看Demo

本文来源：http://www.cssoul.com/2011/08/use-css3-make-slide/

本文链接

史无前例的 HTML5 资源参考指南

2011-06-20T12:30:00Z

尽管 HTML5 规范在 2014 年之前不会有正式版本，很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门，原生支持了以前只可能使用 JavaScript 或 Flash 实现的东西。这里收集了学习 HTML5 的 175 个参考资源，包括教程，框架，示例等。基本上算是 HTML5 葵花宝典了吧？

1、基础教程

HTML5 教程
来自 W3schools.com 的灰常灰常基础的教程。

HTML5 入门，简单易懂，马上使用！
来自 What!? 的指南，介绍 HTML5 初步。

你必须知道的 28 个 HTML5 特性、小贴士和技术
来自 Nettuts+ 的实用 HTML5 小贴士。

HTML 简介
一个 40 分钟的视频教程，来源于 Google 员工 Brad Neuberg。

快速技巧：你应该马上使用的 HTML5 特性
来自 Nettuts+ 的示范影片。

学习热爱 HTML5

一个关于 HTML5 技术优势的伟大概览，以及一些非常有用的技巧。

使用语义类名称为 HTML5 做预先准备
Jon Tan 写的一篇文章，关于 HTML5 中的新语义类。

HTML5：基础介绍
一份 HTML5 介绍，讲述 API，新元素等内容。

你必须知道的关于 HTML5 的一切
来自 TechRadar UK 的扫盲文章。

HTML5 教程
非常基础的教程站。

HTML5 中的结构化标签
介绍那些即将替换诸多 div 元素的结构化标签。

令人惊叹的 HTML5
非常实用的 HTML5 入门教程

HTML5，再一次
一份关于使用 HTML5 进行前端设计简要指南。

HTML5 演讲稿

一个关于 HTML5 的超大幻灯片，本身也是使用 HTML5 制作的。

Header 元素
来自 HTML5 Doctor 的一篇介绍 header 元素的文章。

HTML5 和 Web 的未来
从 2009 年 7 月开始，这篇文章包含了 HTML5 基础。

HTML5 中的 CSS 代码结构：一些实用指南
一些来自 Woork 的实用指南。

HTML5 如虎添翼：贴士，技巧和技术
一份 HTML5 概览，包括关于语义标记，表单等内容。

2、使用 HTML5 创建网站

HTML5 教程 – 从这里开始
一份基础 HTML5 教程，包括一个基本的模版文件。

使用 HTML5 和 CSS3 编写一个充满活力的专业网站

使用 HTML5 和 CSS3 编写一个向后兼容的单页面作品集

HTML5 & CSS3 案例学习教程

触摸未来：使用 HTML5 和 CSS3 创建一个优雅的网站

编写一个 CSS3 & HTML5 单页面网站模版

从无到有编写一个 HTML5 布局

HTML5 和 CSS3：你即将使用的技术

使用 HTML5 设计编码一个炫酷的 iPhone App 网站

用 HTML5 和 CSS3 实现简单的网站布局

使用 HTML5 转换 WordPress TwentyTen 主题
利用 HTML5 优势改进 WordPress 默认 TwentyTen 主题的教程

Dreamweaver CS5 中的 HTML5 和 CSS3 第一部分：构建网页
来自 Adobe 的关于在 Dreamweaver CS5 中编码 HTML 和 CSS3 系列的第一部分

使用 HTML5 和 CSS3 创建现代网站
来自 IMB’s developerWorks 的教程

使用 HTML5 编写网页
来自 Webmonkey 站点

使用 HTML5 设计一个博客

3、Canvas 教程

一个结合 HTML5 Canvas 和 jQuery 的幻灯片

使用 HTML5 和 Java Script 设计弹跳球

如何使用 HTML5 Canvas 画画
来自 Think Vitamin 的教程，介绍如何使用 Canvas 画画

HTML5 Canvas – 基础
来自 Dev.Opera 的 HTML5 Canvas 基础介绍

考虑 HTML5 Canvas 的可访问性
Canvas 可访问性概览

HTML5 Canvas 特性指南
一份来自 Six Revisions 的综合指南

Canvas 教程
来自 mozilla 的开发者网络，包括绘制形状，使用图像，以及更多其他教程。适合 Canvas 初学者。

4、本地存储教程

使用 HTML5 本地存储实现便签功能
一个本地存储实践教程

使用 HTML5 和 CSS3 技术实现便签功能
这个案例的便签在被关闭时有一个很酷的动画效果

HTML5 应用的浏览器存储
又一个在 HTML5 应用中使用本地存储的教程

HTML5 本地存储 – 第一部分
一份 HTML5 本地存储教程的第一部分

快速技巧：学习 HTML5 本地存储
来自 Nettuts+ 的视频教程

webOS HTML5 数据库存储教程
一个关于在 Palm webOS 上使用 HTML5 本地存储功能的教程

5、表单教程

使用 HTML5 表单大干一番

如何创建跨浏览器的 HTML5 表单

使用 HTML5 和 CSS3 设计搜索框

重新考量 HTML5 表单

HTML5 表单来了
一些简要信息，关于 HTML5 对表单设计意味着神马

6、视频和多媒体教程

使用 CSS3 和 jQuery 创建自定义的 HTML5 视频播放器

如何创建 HTML5 视频播放器

映射到 3D 空间的 HTML5 视频

打造跨浏览器的 HTML5 视频（包括 iPad）
关于 HTML5 视频的教程

HTML5 视频元素
来自 HTML5 Doctor 的关于 HTML5 视频元素的教程

7、移动设备应用教程

如何创建基于 HTML5 的 iPhone 应用
这份教程告诉你如何为 iPhone 创建一个离线的 HTML5 应用

HTML5 应用：使用 Geolocation 定位
介绍 HTML5 中的地理定位 (geolocation) API

使用 HTML5 创建移动 Web 应用，第一部分
来自 IBM’s developerWorks 2010 年的某篇参考文章的第一部分

使用 HTML5 在移动设备上创建离线 Web 应用
又一个来自 IBM’s developerWorks 的教程

HTML5 应用：神马，为神马，咋整？
来自Nettuts+ 的 HTML5 应用概览

8、更多教程

如何使用 HTML5，CSS3，jQuery 技术创建可爱的弹窗工具
来自 SpyreStudios 的实践教程

如何让所有浏览器正确渲染 HTML5 标签，甚至是 IE6
来自 Nettuts+ 站点

让使用 HTML5 和 CSS3 不再遗憾
使得 HTML5 和 CSS3 技术更加跨浏览器兼容的工具和技术

实现 HTML5 拖拽
一份来自 Nettuts+ 的教程

我的 5 个 HTML 编码习惯
一些个人编码喜好分享和指导意见

HTML5 微数据：欢迎来到机器世界
一个关于微数据 (microdata) 规范的概览

结合 CSS3 和 HTML5 技术
一份来自 Nettuts+ 的教程

HTML5：解决 nav 的歧义
来自 Jeffrey Zeldman 关于使用 nav 元素的一些说明

9、HTML5 备忘单和快速参考

HTML5 和 CSS3 支持
一个非常方便的表格，包括了 HTML5 和 CSS3 的浏览器兼容性检查

HTML5 蓄势待发
一个互动性质的图标，给出了每个主流浏览器的对 HTML5 的兼容性差异

HTML5 口袋书
一个袖珍的 HTML5 参考指南

HTML5 Canvas 备忘单

HTML5 备忘小抄

HTML 5 备忘单 (PDF)

HTML5 图表参考手册
一个图标，解释了 HTML5 和 HTML5 所能做到的事情

HTML5 标签手册
来自 W3CSchools 的手册

HTML5 词汇表
来自 HTML5 Doctor 站点

HTML 5 参考手册
官方的 W3C 参考手册

HTML5 和 HTML4 不同
来自 W3C 站点

HTML5 所支持的特性
一个涵盖浏览器对 HTML5 特性支持情况的参考手册

神马时候能用 HTML5？
检查各种不同浏览器的 HTML5 支持差异

布局引擎比较 (HTML5)
诸多浏览器布局引擎对 HTML5 和 HTML4 的支持情况对比，来自维基百科

HTML5 ID/Class 命名参考
HTML5 结构性元素指南

HTML5 测试
测试你的当前浏览器对 HTML5 的支持情况，并显示其他浏览器的评分

HTML5 追踪
一个跟踪 HTML5 标准修订的参考表

HTML5 安全备忘录
一个方便的网站，显示了某些场景下浏览器是如何处理 HTML5 元素的

10、专业的 HTML5 站点

W3C HTML5 Logo
包括官方的 HTML5 Logo、以及画廊和商品链接等

HTML5 教程
HTML5 教程站点有很多 HTML5 教程和新闻

免费 HTML5 模版
一个基本、免费 HTML5 模版集合

HTML5 Rocks
包括教程、资源，一级 HTML5 试验场

HTML5 Doctor
包括问答，文章等等和 HTML5 相关的信息

HTML Canvas 教程
一个讲解 HTML5 Canvas 教程和展示案例的站点

WHATWG 工作组博客
HTML5 标准 WHATWG 工作组的官方博客

HTML5Trends.com
一个 HTML5 新闻资讯类站点

移动端 HTML5
一个专门用于教学 HTML5 的移动 Web 应用与开发的网站

11、框架

HTML5 Boilerplate
一份坚实可靠的 HTML5 框架

Less Framework 4
Less Framework 4 框架是一个结合 CSS3 和 HTML5 的框架，可选移动端端和桌面端

52 Framework
一个关联 HTML5、CSS3 和 JavaScript 的框架

SproutCore
一个 HTML5 应用程序框架

Roots WordPress 主题
一个 HTML5 和 CSS3 的 WordPress 基础主题

LimeJS
一个 HTML5 游戏框架

Baseline
一个 CSS 栅格，包括一些 HTML5 元素预定义样式

Baker 电子书框架
一个适用于 iPad 的电子书框架，基于 HTML5 构建

Popcorn.js
一个用于视频的 HTML5 JavaScript 库

DHTMLX Touch
一个基于 HTML5 的 JavaScript 库，适用于移动端的应用

适用于 WordPress 的 HTML5 多媒体框架
一个 HTML5 多媒体框架 WordPress 插件

H5 WordPress 主题
一份基于 HTML5 的 WordPress 主题

SwitchToHTML5
一个 HTML5 框架生成器

Jo
一个移动端的 HTML5 应用框架

HTML5 样板官方指南
来自 Nettuts+ 站点的指南

12、案例展示

HTML5 Mania
HTML5 Web 设计画廊

HTML5 展示
专业 HTML5 站点画廊

HTML5 网站
有一个 HTML5 站点画廊

HTML5 精英
有一份 HTML5 案例展示

基于 HTML5
HTML5 Web 设计案例展示

HTML5 案例：48 个击败 Flash 的案例

HTML5 画廊
HTML5 站点大集合

Canvas 案例
关于 HTML5 Canvas 的应用程序、游戏、工具和教程

12 个漂亮的 HTML5 Web 设计案例
12 个 HTML5 站点展示

潜伏在未来：25 个超现代的使用 HTML5 的网站
25 个基于 HTML5 站点的案例展示

30 个布局由 HTML5 核心支持的壮丽网站
另一份基于 HTML5 站点的展示案例

13、演示和案例

HTML5 演示和案例
一些 HTML5 功能演示，一份浏览器兼容手册

HTML5 Canvas 和 Audio 视频音频实验
一个很酷的 HTML5 Canvas 动画

HTML5 和 CSS3 实验
一系列的 HTML5 元素、布局实验和演示

SublimeVideo
一个 HTML5 视频播放器

Projekktor
一个免费的 HTML5 视频播放器

10 个能让你忘记 Flash 的 HTML5 演示

12 个难以置信的 HTML5 实验

给大家的 Video
另一个 HTML5 视频播放器

HTML5 媒体
使得 video 和 audio 在住浏览器上都能正常使用

Modernizr
一个使得 HTML5 和 CSS3 元素兼容老浏览器的 JavaScript 库

14、书籍

给 Web 设计师的 HTML5 书籍

HTML5：设计富 Web 应用

真实世界的 HTML5 和 CSS 3

使用游戏学习 HTML5 和 JavaScript，一份 HTML5 基础教程

HTML5 和 CSS3，用明天的标准做今天的设计

HTML5 Canvas：原生的交互和动画

专业的 HTML5 和 CSS3 设计模式

专业的 HTML5 编程：用于开发富 Web 应用的强大的 API

HTML5 解决方案：适合于 HTML5 开发人员的基本技术

利用 HTML5 Canvas 实现游戏

使用 JavaScript 实现 HTML5 动画

HTML5 视频权威指南

HTML5 24 小时培训

深入 HTML5

HTML5 简介

了不起的 HTML5

15、更多资源和教程

HTML5 Web Sockets 如何与代理服务器实现互动

HTML5 概览
来自 A List Apart，发布于 2007 年 12 月

是的，你现在可以使用 HTML5 了！
一篇 Sitepoint 文章，发布于 2009 年中

HTML5 和 CSS3 的力量
一篇深入介绍 HTML5 和 CSS3 的文章，发布于 2009 年中

HTML5 语义
2009 年 A List Apart 上发布的一篇谈论 HTML5 元素语义的文章

Kaltura HTML5 媒体库
一个 JavaScript 类库，让你能在各种浏览器下应用 HTML5 视频和音频

有关开发命名约定，微格式，和 HTML5
来自 For A Beautiful Web 站点

HTML5 崛起
来自 Adactio 站点

Steve Smith 谈 HTML5 和 CSS3
谈论 HTML5 和 CSS3 对 Web 设计意味着什么，来自 Think Vitamin

HTML5 和 CSS3 把你带到另一个设计层次
来自 Web Design Ledger 站点

HTML5：现实和神话
来自 Smashing Magazine 的关于 HTML5 的许多神话和误解

HTML5 和你
来自Nettuts+ 站点

HTML5 在 App 上的应用
讲述 HTML5 如何应用在 App 上

16、更多 HTML5 搜捕

终极 HTML5 工具包：60+ 文章、教程、资源和启发灵感的案例展示

学习 HTML5：10 个必要原因

HTML5 的未来

HTML5 和 CSS3 资源终极收藏集

15 个实用的 CSS3 和 HTML5 模版和框架

23 个高质量 HTML5 资源

70 个必须收藏的 HTML5 和 CSS3 教程资源

HTML5 教程资源收集

25 个优质 HTML5 教程和技术

让你忙死的 HTML5 教程和技术

15 个实用的 HTML5 教程和备忘单

唯一需要马上阅读的 HTML5 资源

22 个优秀的 HTML5 教程

40+ 开发者必看的 HTML5 教程，技术和案例

30+ 实用的 HTML5 案例，教程和技术

英文原稿：The ultimate HTML5 resource guide | Webdesigner Depot
翻译整理：终极 HTML5 资源参考指南 | 芒果小站

转载自 <a href="http://www.mangguo.org/the-ultimate-html5-resource-guide/" title="史无前例的 HTML5 资源参考指南" rel="bookmark">史无前例的 HTML5 资源参考指南 | 芒果小站</a>

本文链接

从清除浮动（clear float）谈拥有布局（has layout）与块级格式化范围（block formatting context）

2011-03-21T03:59:00Z

float是网页布局中都要使用的css属性，他为我们灵活布局提供了方便，但同时浮动太多会带来很多麻烦，所以我通常的做法是使用float完后，马上清除他。float的本质是脱离的正常的html文档流，就是由于他脱离的文档流才出现了很多麻烦。

清除浮动（我更喜欢叫闭合浮动元素）的最简单的方法就用<div style=”clear:both;”></div>加入空的标签，但是这种不够语义化，也显得不是很灵活，每次都要加额外的 html。于是有人就想到css里面有一个：after的，这样就不需要加入额外的html了，完全由css完成，于是就有了下面这段比较经典的css代码：
.clear:after{ content:" "; display:block; height:0; clear:both; visibility:hidden;}

简单的解释一下吧，用after产生的内容是个空格，先display:block,然后高度为0，不让他影响布局，clear:both就是清除浮动啦，隐藏和height:0差不多就是不要影响布局。但是这么做只对支持:after的浏览器（比较多了ie8、ie9、firefox3.X、 opera、chrom、safari）有作用，要是不支持怎么办呢？

不支持after的浏览器也不是很多了，最常用的可能就只有ie6、ie7了，对于ie6、和ie7的解决就是加一个height:1%;就ok了。好了，貌似所有主流的浏览器的问题都解决了。赶快进入正题。

为什么ie6、7加了个height:1%就ok了？是为了让其has layout。那么has layout是什么呢？

其实haslayout 是Windows Internet Explorer7以下渲染引擎的一个内部组成部分。在InternetExplorer7以下中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，而不是依赖于祖先元素来完成这些工作。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，拥有 haslayout的元素，通常显示为“haslayout = -1”。

这里的has layout就是对自己和可能的子孙元素进行尺寸计算和定位来决定父元素的高度，也就是父元素适应了里面内容的高度，这回大家就明白为什么加入一个 height:1%的原因了，当然也可以加入其它的属性使其has layout，如width等。当然加float也可以（float也可以触发layout），但不推荐，不要用floa来清除浮动，这样float又会产生一个浮动，那样你的页面会很乱，初学者很容易犯得一个错误。

其实清除浮动的本质就是产生一个块级格式化范围，它会自动清除内部的浮动，首先强调一下块级格式化范围不是ie6、7所独有的，而是属于css的一种现象。关于边距重叠大家应该都比较清楚，两个普通的div边距，如果是两个正数，那么他们实际的边距是取他们中最大的，如果有一个是负数就把两个值加起来，这些就是由于没有产生块级格式化的原因。如果产生了块级格式化他们就将不会共享边距，他们的会有各自的边距，他们的实际边距就会相加。

那么当一个元素产生了块级格式化一个没有会是什么情况呢？

除了ie6、7认为只要有一个产生了块级格式化就不应该和其他共享边距，其他的浏览器（ie8 ie9 Firefox chrom Safari opera）都是认为可以边距共享的。我不知道这是不是又和ie的haslayou有关。

由于float会产生块级格式化范围，所以很多刚开始学css的人就会用float来产生块级格式化范围来清除浮动和避免边距重叠。但float很恶心啊！

关于has layout和block formatting context我这里先不多说了，以后会对他们单独解释。最后回归清除浮动，对于任何浏览器只要产生块级格式化范围就可以了，对于has layout浏览器要让浮动的父级元素has layout。知道这两点以后各种清除浮动的方法就很好懂了。

本文链接

解决IE6不支持PNG-24透明的问题

2011-02-23T08:31:00Z

IE6 png 透明 (三种解决方法)(转来的哦)

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

=============================================================================

此效果简单，。。。。相当不错推荐

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

语法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。

false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：

Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。

sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。

src : 可读写。字符串(String)。参阅 src 属性。

说明：

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

实例：解决IE6下png透明失效的问题。

CSS样式:

.png{

_background: url(http://www.snowangel.cn/images/angel.png) no-repeat !important;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="http://www.snowangel.cn/images/angel.png");

background:none;

width:118px;height:133px;

}

.png div{position:relative;}

HTML代码：

<div >

<div>

CSS 背景PNG透明及链接失效问题解决

</div>

兼容IE6.0、IE7.0、FF，

IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。

=============================================================================

第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

.qq {

height: 90px;

width: 90px;

background-image: url(icon_home.png)!important;/* FF IE7 */

background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */

_ background-image: none; /* IE6 */

}

-->

</style>

</head>

<body>

</body>

</html>

第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录

请勿大量使用，否则会导致页面打开很慢!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

.mypng img {

azimuth: expression(

this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);

}

</style>

</head>

<body>

换成你的png图片

<div >

</div>

</body>

</html>

第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.

{

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))

{

for(var j=0; j<document.images.length; j++)

{

var img = document.images[j]

var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

{

var imgID = (img.id) ? "id='" + img.id + "' " : ""

var imgClass = (img.className) ? "class='" + img.className + "' " : ""

var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

var imgStyle = "display:inline-block;" + img.style.cssText

if (img.align == "left") imgStyle = "float:left;" + imgStyle

if (img.align == "right") imgStyle = "float:right;" + imgStyle

if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = "<span " + imgID + imgClass + imgTitle

+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML

j = j-1

}

window.attachEvent("onload", correctPNG);

</script>

<!--

body {

background-color: #9999CC;

}

-->

</style></head>

<body>

把图片换成你自己的图片

</body>

</html>

方法四

// 修复 IE 下 PNG 图片不能透明显示的问题

function fixPNG(myImage) {

var arVersion = navigator.appVersion.split("MSIE");

var version = parseFloat(arVersion[1]);

if ((version >= 5.5) && (version < 7) && (document.body.filters))

{

var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";

var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";

var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' ";

var imgStyle = "display:inline-block;" + myImage.style.cssText;

var strNewHTML = "<span " + imgID + imgClass + imgTitle

+ " style=\"" + "width:" + myImage.width

+ "px; height:" + myImage.height

+ "px;" + imgStyle + ";"

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";

myImage.outerHTML = strNewHTML;

} }

window.onload=function(){

document.getElementById("top").style.height=screen.height/5+"px";

}//

</script>

用法如下：

本文链接

IE6下z-index犯癫不起作用bug的初步研究

2011-02-23T08:15:00Z

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=471

一、匆匆带过的概念
关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页中，层的概念与photoshop或是flash中层的概念是一致的。熟悉 photoshop或是flash的应该知道，层级越高（图层越靠上），越在上面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。

在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移改变层次序的过程中：

在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。

在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。就像生孩子一样，一个人不顶用，需要配合。下为z-index的业余示意图：

按照正常的思维，z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6，这家伙，估计是后妈带大的，从小营养不良，结果后来健康问题一堆又一堆。z-index的问题就是其中之一，而本文就是要讲讲这个IE6下z-index不起作用的问题。

二、关于效果截图的些必要说明
下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度40%，几乎满屏显示的层级为1的绝对定位层。HTML为：<div id="blank"></div>，对应CSS为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。

这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z-index不起作用有很直观的认识了。

三、IE6的抱怨：浮动让我沉沦
现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z- index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签无position 属性（不包括static）；3、问题标签含有浮动(float)属性。
您可以拿下面的代码自己做个简单测试：

<div id="blank"></div><div style="position:relative; z-index:9999;"><img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" /></div>

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

<div id="blank"></div><div style="position:relative; z-index:9999;"><img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" /></div>

结果IE6下：

您可以狠狠地点击这里：在线demo测试

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。

四、固执的IE6：它只认第一个爸爸
可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：

<div id="blank"></div><div style="position:relative;"><div style="position:relative; z-index:1000;">        <div style="position:absolute; z-index:9999;">        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />        </div>    </div></div>

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：

<div id="blank"></div><div style="position:relative; z-index:1;"><div style="position:relative; z-index:1000;">        <div style="position:absolute; z-index:9999;">        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />        </div>    </div></div>

结果IE6童鞋喜笑颜开，春光灿烂：

您可以狠狠地点击这里：改变父标签层级在线demo测试

五、必要的结语
老实讲，我对z-index研究的精力其实比较有限，本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测，里面所蕴含的知识不是CSS手册上的那点东西，那只是冰山一角。这涉及到border及background的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等，这是很深的一潭水。

总之，慢慢来，慢慢积累，慢慢研究，一定会一步一步揭开z-index的本质面纱的。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=471

（本篇完）

本文链接

差距在哪里

2010-06-14T03:42:00Z

有人工作，有人上学，大家千万不要错过这篇文章，能看到这篇文章也是一种幸运，真的受益匪浅，对我有很大启迪，这篇文章将会改变你我的一生，真的太好了，希望与有缘人分享，也希望对有缘人有所帮助！看完之后有种“相见恨晚”的感觉，特别激动，希望大家好好的珍藏这篇文章，相信多年以后，再来看这篇文章，一定有不同的感觉。         正如"打工皇帝"唐骏说："我觉得有两种人不要跟别人争利益和价值回报。第一种人就是刚刚进入企业的人，头5年千万不要说你能不能多给我一点儿工资，最重要的是能在企业里学到什么，对发展是不是有利……"
        人总是从平坦中获得的教益少，从磨难中获得的教益多；从平坦中获得的教益浅，从磨难中获得的教益深。一个人在年轻时经历磨难，如能正确视之，冲出黑暗，那就是一个值得敬慕的人。最要紧的是先练好内功，毕业后这5年就是练内功的最佳时期，练好内功，才有可能在未来攀得更高。
        出路在哪里？出路在于思路！
　　其实，没有钱、没有经验、没有阅历、没有社会关系，这些都不可怕。没有钱，可以通过辛勤劳动去赚；没有经验，可以通过实践操作去总结；没有阅历，可以一步一步去积累；没有社会关系，可以一点一点去编织。但是，没有梦想、没有思路才是最可怕的，才让人感到恐惧，很想逃避!
　　人必须有一个正确的方向。无论你多么意气风发，无论你是多么足智多谋，无论你花费了多大的心血，如果没有一个明确的方向，就会过得很茫然，渐渐就丧失了斗志，忘却了最初的梦想，就会走上弯路甚至不归路，枉费了自己的聪明才智，误了自己的青春年华。
    荷马史诗《奥德赛》中有一句至理名言："没有比漫无目的地徘徊更令人无法忍受的了。"毕业后这5年里的迷茫，会造成10年后的恐慌，20年后的挣扎，甚至一辈子的平庸。如果不能在毕业这5年尽快冲出困惑、走出迷雾，我们实在是无颜面对10年后、20年后的自己。毕业这5年里，我们既有很多的不确定，也有很多的可能性。
　　毕业这5年里，我们既有很多的待定，也有很多的决定。
　　迷茫与困惑谁都会经历，恐惧与逃避谁都曾经有过，但不要把迷茫与困惑当作可以自我放弃、甘于平庸的借口，更不要成为自怨自艾、祭奠失意的苦酒。生命需要自己去承担，命运更需要自己去把握。在毕业这5年里，越早找到方向，越早走出困惑，就越容易在人生道路上取得成就、创造精彩。无头苍蝇找不到方向，才会四处碰壁；一个人找不到出路，才会迷茫、恐惧。
    生活中，面对困境，我们常常会有走投无路的感觉。不要气馁，坚持下去，要相信年轻的人生没有绝路，困境在前方，希望在拐角。只要我们有了正确的思路，就一定能少走弯路，找到出路！
        成功的人不是赢在起点，而是赢在转折点。
    不少刚刚毕业的年轻人，总是奢望马上就能找到自己理想中的工作。然而，很多好工作是无法等来的，你必须选择一份工作作为历练。职业旅程中的第一份工作，无疑是踏入社会这所大学的起点。也许你找了一份差强人意的工作，那么从这里出发，好好地沉淀自己，从这份工作中汲取到有价值的营养，厚积薄发。千里之行，始于足下，只要出发，就有希望到达终点。
    起点可以相同，但是选择了不同的拐点，终点就会大大不同！
    毕业这几年，我们的生活、感情、职业等都存在很多不确定的因素，未来也充满了各种可能。这个时候，必须学会选择，懂得放弃，给自己一个明确的定位，使自己稳定下来。如果你不主动定位，就会被别人和社会"定型"！可以这么说：一个人在毕业这5年培养起来的行为习惯，将决定他一生的高度。我们能否成功，在某种程度上取决于自己对自己的评价，这就是定位。你给自己定位是什么，你就是什么。定位能决定人生，定位能改变命运。丑小鸭变成白天鹅，只要一双翅膀；灰姑娘变成美公主，只要一双水晶鞋。
    人的命，三分天注定，七分靠打拼，有梦就"会红"，爱拼才会赢。只要不把自己束缚在心灵的牢笼里，谁也束缚不了你去展翅高飞。
    现实情况远非他们所想的那样。于是，当优越感逐渐转为失落感甚至挫败感时，当由坚信自己是一块"金子"到怀疑自己是一粒"沙子"时，愤怒、迷茫、自卑就开始与日俱增。
    其实，应该仔细掂量一下自己，你是否真是金子？是真金，手中要有绝活，才能上要有过人之处才行。一句话：真金是要靠实力来证明的，只有先把自己的本领修炼好了，才有资格考虑伯乐的事情
   每颗珍珠原本都是一粒沙子，但并不是每一粒沙子都能成为一颗珍珠。
   想要卓尔不群，就要有鹤立鸡群的资本。忍受不了打击和挫折，承受不住忽视和平淡，就很难达到辉煌。年轻人要想让自己得到重用，取得成功，就必须把自己从一粒沙子变成一颗价值连城的珍珠。
        天有下雨与日出，人生高峰与低谷。
        莫为浮云遮望眼，风物长宜放眼量。    只要拂去阴霾，就能亮出朗朗晴空。如果你在工作上有些不如意，要相信自己不会一直处于人生的低谷期，总有一天能冲破重重云层。告诉自己：我并没有失败，只是暂时没有成功！只要在内心点亮一盏希望之灯，一定能驱散黑暗中的阴霾，迎来光明。
    的确，论资历，他们是不折不扣的职场菜鸟，业务涉及不深，人脉一穷二白，在工作中经常碰壁。他们的压力并不一定都像千钧大石，而是像大雨来临前的天色，灰色低沉，明明有空间，却被灰色填满每个缝隙，只能等待大雨倾盆之后的晴空。"起得比鸡早，睡得比狗晚，干得比驴多，吃得比猪差。"这是很多刚刚毕业的人喜欢用来调侃自己生活状态的话。虽然有点儿夸张，但是，他们中的很多人的确一直都被灰色心情所笼罩--心里永远是多云转阴。记得有位哲人曾说："我们的痛苦不是问题本身带来的，而是我们对这些问题的看法产生的。"换个角度看人生，是一种突破、一种解脱、一种超越、一种高层次的淡泊与宁静，从而获得自由自在的快乐。
    一位哲人说："人生就是一连串的抉择，每个人的前途与命运，完全把握在自己手中，只要努力，终会有成。"就业也好，择业也罢，创业亦如此，只要奋发努力，都会成功。你是不是准备把生命的承诺全部都交给别人？
　　毕业后这5年，是改变自己命运的黄金时期。在最能决定自己命运时，如果还不把握，那你还要等到什么时候呢？我的人生我做主，命运由己不由人。
　　不要活在别人的嘴里，不要活在别人的眼里，而是把命运握在自己手里。
　　别说你没有背景，自己就是最大的背景。美国作家杰克·凯鲁亚克说过一句话："我还年轻，我渴望上路。"在人生的旅途中，我们永远都是年轻人，每天都应该满怀渴望。每个人的潜能都是无限的，关键是要发现自己的潜能和正确认识自己的才能，并找到一个能充分发挥潜能的舞台，而不能只为舞台的不合适感到不快。要客观公正地看待自己的能力，结合自己的实际情况和爱好冷静选择，尽可能到最需要自己、最适合自己的地方。
　    在人力资源管理界，特别流行一个说法，即"骑马，牵牛，赶猪，打狗"理论：人品很好，能力又很强的，是千里马，我们要骑着他；人品很好但能力普通的，是老黄牛，我们要牵着他；人品、能力皆普通的，就是"猪"，我们要赶走他；人品很差能力很强的，那是"狗"，我们要打击他。
    我想，刚刚毕业几年的你，一样胸怀大志，一样想成为一匹被人赏识、驰骋沙场的千里马吧？那么，就好好沉淀下来。低就一层不等于低人一等，今日的俯低是为了明天的高就。所谓生命的价值，就是我们的存在对别人有价值。能被人利用是一件好事，无人问津才是真正的悲哀！
    能干工作、干好工作是职场生存的基本保障。任何人做工作的前提条件都是他的能力能够胜任这项工作。能干是合格员工最基本的标准，肯干则是一种态度。一个职位有很多人都能胜任，都有干好这份工作的基本能力，然而，能否把工作做得更好一些，就要看是否具有踏实肯干、苦于钻研的工作态度了。
    在能干的基础上踏实肯干。
    工作中，活干得比别人多，你觉得吃亏；钱拿得比别人少，你觉得吃亏；经常加班加点，你觉得吃亏……其实，没必要这样计较，吃亏不是灾难，不是失败，吃亏也是一种生活哲学。现在吃点儿小亏，为成功铺就道路，也许在未来的某个时刻，你的大福突然就来了。
    能吃亏是做人的一种境界，是处世的一种睿智。
    在工作中并不是多做事或多帮别人干点儿活就是吃亏。如果领导让你加加班、赶赶任务，别以为自己吃了大亏，反而应该感到庆幸，因为领导只叫了你，而没叫其他人，说明他信任你、赏识你。吃亏是一种贡献，你贡献得越多，得到的回报也就越多。乐于加班，就是这样的一种吃亏。
    舍得舍得，有舍才有得；学会在适当时吃些亏的人绝对不是弱智，而是大智。
　　给别人留余地就是给自己留余地，予人方便就是予己方便，善待别人就是善待自己。
　　傻人有傻福，因为傻人没有心计。和这样的人在一起，身心放松，没有太多警惕，就能相互靠近。傻在很多时候意味着执着和忠贞，也意味着宽厚和诚实，让人不知不觉站到他一边。傻人无意中得到的，比聪明人费尽心机得到的还多。毕业这几年，你的天空中只飘着几片雪花，这样你就满足了吗？成功需要坚持与积累，与其专注于搜集雪花，不如省下力气去滚雪球。巴菲特说："人生就像滚雪球，最重要的是发现很湿的雪和很长的坡。"让自己沉淀下来，学着发现"很湿的雪"，努力寻找"很长的坡"。记住：散落的雪花会很快融化，化为乌有，只有雪球才更实在，才能长久。
在毕业这几年里，你要是能做到比别人多付出一分努力，就意味着比别人多积累一分资本，就比别人多一次成功的机会。照片描述：五种颜色五大洲什么是职业化呢？职业化就是工作状态的标准化、规范化、制度化，即在合适的时间、合适的地点用合适的方式说合适的话、做合适的事，使知识、技能、观念、思维、态度、心理等符合职业规范和标准。"在每个行业里，都有很多出色的人才，他们之所以能存在，是因为比别人更努力、更智慧、更成熟。但是，最重要的是，他们比一般人更加职业化！这就是为什么我现在能当你老板的原因。一个人仅仅专业化是不够的，只有职业化的人才能飞在别人前面，让人难以超越！"不要以为我们现在已经生存得很安稳了。对于毕业5年的人来讲，一定要认清即将面临的五大挑战。

一、赡养父母。
二、结婚生子。
三、升职加薪。
四、工作压力。
五、生活质量。
    有的人为生存而雀跃，目光总是停在身后，三天打鱼两天晒网，有始无终。
　  有的人为发展而奋斗，目光总是盯在正前方，每天进步一点点，坚持不懈。
　　毕业这几年，不能没有追求和探索，不能没有理想和目标。人生如逆水行舟，不进则退。甘于现状的生活就是不再前行的船，再也无法追上时代前进的步伐。一定要抓紧每一秒钟的时间来学习，要明白学习不是学生的专利。小聪明的人最得意的是：自己做过什么？大智慧的人最渴望的是：自己还要做什么？
　　小聪明是战术，大智慧是战略；小聪明看到的是芝麻，大智慧看到的是西瓜。
　　在这个世界上，既有大人物，也有小角色，大人物有大人物的活法，小人物有小人物的潇洒，每个人都有自己的生活方式，谁也勉强不了谁。但是，小聪明只能有小成绩和小视野，大智慧才能有大成就和大境界。小企业看老板，中企业看制度，大企业看文化。
    小公司与大企业都有生存之道，没有好坏之分，但对一个人不同阶段的影响会不同。
　　小公司肯定想要发展为大企业，这是一种目标，年轻人也要给自己的职业生涯制定目标。毕业几年的你，是否经常会怯场或者是感到没有底气？居安思危绝对不是危言耸听！此刻打盹，你将做梦；此刻学习，你将圆梦。在竞争激烈的人生战场上，打盹的都是输家！
   每个人在年轻的时候似乎都豪情万丈，什么都不怕，可是随着年龄的增长，每天想着房子、工作、养家糊口这些俗事儿，再也没有年轻时那种敢于"上天探星、下海捞月"的勇气了。是我们改变了生活，还是生活改变了我们？我们的思想越来越复杂，因为有了越来越多的舍不得、越来越多的顾虑，我们总是在徘徊、总是在犹豫。毕业开始一两年，生活的重担会压得我们喘不过气来，挫折和障碍堵住四面八方的通口，我们往往在压迫得自己发挥出潜能后，才能杀出重围，找到出路。可是两三年后，身上的重担开始减轻，工作开始一帆风顺，我们就松懈了下来，渐渐忘记了潜在的危险。直到有一天危机突然降临，我们在手足无措中被击败……毕业这几年，仍然处于危险期，一定要有居安思危的意识，好好打拼，这样才能有一个真正的安全人生！
    生于忧患，死于安乐。如果你想跨越自己目前的成就，就不能画地自限，而是要勇于接受挑战。对畏畏缩缩的人来说，真正的危险正在于不敢冒险！
    年轻人在社会的重压下，适应能力已变得越来越强，只是他们不自觉地习惯被环境推着走。他们不敢冒险，怕给自己带来终身的遗憾，于是告慰自己："我对得起自己、对得起家人，因为我已竭尽全力。"其实，人只有不断挑战和突破才能逐渐成长。长期固守于已有的安全感中，就会像温水里的青蛙一样，最终失去跳跃的本能。
    经历了这几年社会生活，你应该明白：这个世界上有富也有贫，有阴也有亮，有丑也有美，到底看到什么，取决于自己是积极还是消极。在年轻时学会勤勉地工作，用一种光明的思维对待生活，那么，只要张开手掌，你就会发现，里面有一片灿烂的人生。    把感恩刻在石头上，深深地感谢别人帮助过你，永远铭记，这是人生应有的一种境界；把仇恨写在沙滩上，淡淡忘掉别人伤害过你，学会宽容，让所有的怨恨随着潮水一去不复返，这也是一种人生境界。
    学会倒出水，才能装下更多的水。从毕业那天开始，学会把每天都当成一个新的起点，每一次工作都从零开始。如果你懂得把"归零"当成一种生活的常态，当成一种优秀的延续，当成一种时刻要做的事情，那么，经过短短几年，你就可以完成自己职业生涯的正确规划与全面超越。
　　在职业起步的短短道路上，想要得到更好、更快、更有益的成长，就必须以归零思维来面对这个世界。不要以大学里的清高来标榜自己，不要觉得自己特别优秀，而是要把自己的姿态放下，把自己的身架放低，让自己沉淀下来，抱着学习的态度去适应环境、接受挑战。放下"身段"才能提高身价，暂时的俯低终会促成未来的高就。
　　年轻人从校园或者从一个环境进入一个新环境，就要勇于将原来环境里熟悉、习惯、喜欢的东西放下，然后从零开始。我们想在职场上获得成功，首先就要培养适应力。从自然人转化为单位人是融入职场的基本条件。一个人起点低并不可怕，怕的是境界低。越计较自我，便越没有发展前景；相反，越是主动付出，那么他就越会快速发展。很多今天取得一定成就的人，在职业生涯的初期都是从零开始，把自己沉淀再沉淀、倒空再倒空、归零再归零，正因为这样，他们的人生才一路高歌，一路飞扬。
　　在毕业这几年里，我们要让过去归零，才不会成为职场上那只背着重壳爬行的蜗牛，才能像天空中的鸟儿那样轻盈地飞翔。请好好品味一下杰克·韦尔奇说过的一句话："纠正自己的行为，认清自己，从零开始，你将重新走上职场坦途。"　吐故才能纳新，心静才能身凉，有舍才能有得，杯空才能水满，放下才能超越。
    归零思维五大表现：心中无我，眼中无钱，念中无他，朝中无人，学无止境。
    年轻人难免带着几分傲气，认为自己无所不能、所向披靡，其实不然，初入职场的新人还是个"婴儿"，正处在从爬到走的成长阶段。在毕业这几年里，一定要让自己逐步培养起学徒思维、海绵思维、空杯思维，具有这样思维的人心灵总是敞开的，能随时接受启示和一切能激发灵感的东西，他们时刻都能感受到成功女神的召唤。

本文链接

web图片优化

2010-06-01T02:21:00Z

周六参加web交流会www.w3ctech.com ，获益匪浅。开发中只是使用YSlow 的Grade评级进行web站点优化，却没有发现，其实YSlow的Tools也相当强大。

这里，我就现学现卖。讲讲使用YSlow的Smush.it 进行web图片的优化。

1. 首先，还是使用前端开发的不可缺少的利器--FireFox 浏览器。安装上YSlow--Add-ons

2. Get Add-ons，搜索yslow

3. 安装

4. 重启Firefox

5. 输入要进行分析的web站点后，选择 YSlow -- Tools -- All.Smush.it

6. Firefox 会弹出一个新的页面，显示分析处理后的结果

我已我们公司的产品www.atelink.com 登录页做测试后，可以发现，仅仅是一个登录页，图片可以压缩处理28.36%.

点击“Download Smushed images” 可以将经过Yahoo站点压缩过的图片打包下载下来。

如果想保持图片的目录结构(比方说有图片是在global/images 目录下，有的是在content/images 目录下)，勾选"keep Directory structure in zip file"。

通过这种方式，可以直接替换网站的图片文件即可。但是，需要注意的是，如果图片是使用css的background-image 设置的，那么需要更改相应的css代码。

PS：将鼠标放在图片名称上，会显示该图片的缩略图。真的是太强大了~~ O(∩_∩)O...

7. 使用UPLOADER ，我们可以选择本地文件上传后，通过Yahoo网站处理后，然后下载图片文件。

WEB标准化交流会是由“WEB标准化联盟”（46077068）在2009年发起的线下活动。在每月的最后一个周六，与Web从业者共同研究并讨论前端动态。本活动以技术交流为目的，不收取任何费用。官方站点是www.w3ctech.com ，期待你的加入，共同学习，分享经验。

本文来于：http://blog.csdn.net/spring21st/archive/2010/05/31/5637027.aspx

本文链接

jQuery技巧大放送

2010-05-29T14:44:00Z

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式

主要包括以下几种方式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如：
$("p").trigger("click"); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。

例如：
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[ i ]);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

本文链接

即刻提升jQuery性能的十个技巧[TUTS+]

2010-05-28T05:48:00Z

本文提供即刻提升你的脚本性能的十个步骤。不用担心，这并不是什么高深的技巧。人人皆可运用！
这些技巧包括：

使用最新版本
合并、最小化脚本
用for替代each
用ID替代class选择器
给选择器指定前后文
建立缓存
避免DOM操作
避免使用concat()，利用join()处理长字串
返回false值
利用小抄和参考文档

1. 使用最新版本

jQuery一直处于不断的开发和改进过程中。 John 和他的团队不断研究着提升程序性能的新方法。

一点题外话，几个月前他还发布了Sizzle，一个据说能在Firefox中把程序性能提升3倍的JS选择器库。

如果你不想时刻关注是否有新版本，然后再花时间下载上传，Google 就又能帮你一把了。他们的服务器上存储了大量Ajax库供您选择。

<!-- 利用一个简单的script标签调用API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* 加载 jQuery v1.3.2 */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* 加载完成后弹出消息 */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>

编辑按：另一个更为简单快速的方法是直接使用脚本链接。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面这句代码就够了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

笨活儿：特定版本的还可以这样加载：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2. 合并、最小化脚本

大部分浏览器都不能同时处理多个脚本文件，所以它们都是排队加载——加载时间也相应地延长了。

考虑到你网站的每个页面都会加载这些脚本，你应该考虑把它们放到单个文件中，然后利用压缩工具（比如 Dean Edwards 的这款）把它们最小化。更小的文件无疑将带来更快的加载速度。

JavaScript和CSS压缩的目的是在保持脚本的执行性能的同时，减少数据传递的字节数（可以通过减小原始文件，也可以利用gzip。大多数产品级的网络服务器都把gzip作为HTTP协议的一部分）。

— 引自 YUI compressor，一款 jQuery官方推荐的压缩脚本的工具。

3. 用for替代each

原生函数总是比辅助组件更快。

如果遇到需要遍历对象的情况（如从远程接收的JSON对象），你最好重写你的（JSON）对象为一个数组，数组的循环处理要容易些。

利用Firebug，我们能测定每个函数的执行时间。

var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');  //原生for函数
var l = array.length;
for (var i=0;i

上面的结果显示原生代码只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且这还只是我在本机上测试一个基本上啥也没做的函数的结果，当遇到更复杂的情况，例如设置css属性或DOM操作时，时间差异肯定更大。

4. 用ID替代class选择器

利用ID选择对象要好得多，因为这时jQuery会使用浏览器的原生函数getElementByID()来获取对象，查询速度很快。

因此，比起利用那些方便的css选择技巧，使用更为复杂的选择器也是值得的（jQuery也为我们提供了复杂选择器）。你也可以手工书写自己的选择器（其实比你想象中简单），或者为你想要选择的元素指定一个有ID的容器。

//下例创建一个列表并且填充条目内容
//然后每个条目都被选择一次
//首先使用class选择
console.time('class');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
//然后利用ID选择
console.time('id');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');

上面的例子很好地说明了不同选择方式之间的显著性能差异。请看下图，利用class来做选择，时间无限增大，甚至超过了五秒：

5. 给选择器指定前后文

jQuery的参考文档里说：

传递给jQuery() 原始DOM节点的前后文（如果没有东西被传递，则前后文为整个文档）。

目的是连同选择器一起，实现更为准确的查询。

所以，如果你一定要利用class来指定目标，至少为选择器指定上下文，以免jQuery费精力去遍历整个DOM文档：

与其这样写：

$('.class').css ('color' '#123456');

为选择器加上前后文比较好（expression: 目标选择器；context: 前后文）：

$(expression, context)

也就是说：

$('.class', '#class-container').css ('color', '#123456');

这样做要快得多，因为它不用遍历整个DOM。只要找到#class-container就好了。

6. 建立缓存

不要犯不断重新选择同一个东西的错误。你应该把你要处理的元素缓存为一个变量。

更不要在一个循环里重复选择同一个元素！这样做十分影响速度！

$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 这样写更好
$('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
// 甚至这样
var item = $('#item');
item.css('color', '#123456');
item.html('hello');
item.css('background-color', '#ffffff');
// 遇到循环,这样做非常不好
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append(i);
}
console.timeEnd('no cache');
// 下面这样要好得多
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');

如下图所示，即使是相对较短的迭代，缓存的效果还是很明显的。

7. 避免DOM操作

DOM操作应该越少越好，因为诸如prepend()，append()，after()的插入动作都很费时。

上面的例子如果用html()会更快：

var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);

8. 避免使用concat()，利用join()处理长字串

听起来可能挺奇怪，不过这样做真的能提升速度，尤其是当连接特别长的字串时。

先建立一个数组，放入你想要串联的东西。join()方法比字符串的concat()函数要快得多。

var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));

近期一项由Tom Trenka发起的测试中，得出了下表的结果：

“ += 操作符更快——比把字串片段放到数组中然后join起来还要快”，“作为字串缓冲（string buffer）的数组在大部分浏览器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。”

— Tom Trenka

9. 返回false值

您可能已经注意到，如果函数执行后不返回false，你就会被跳转到页面顶部。

如果页面较长，这种反应是很烦人的。

所以，与其这样：

$('#item').click (function () {
// stuff here
});

不如多加一句：

$('#item').click (function () {
// stuff here
return false;
});

10. 额外小贴士 – 小抄和参考文档

这条建议并不直接提升函数的执行速度，不过如果你肯花时间在这上面，研究研究这些小抄和参考文档，你将来定能节约很多时间。

请在手边随时放一张小抄以作快速参考。

英文原文来自NetTut+：10 Ways to Instantly Increase Your jQuery Performance

译文原文来自笨活儿：十种方式即刻提升您的jQuery代码性能[TUTS+]。

©请尊重作者和译者。若需转载，务必保留原文链接。

你应该也会喜欢：

本文链接