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

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+]。

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

©2009 笨活儿 | 永久链接 | 已经有3条评论了 | 推荐到豆瓣

本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者，刚刚写完自己的Hello World，那这里有很多对您的工作将十分有用的小贴士；也许有些技巧您已经知道，那就试试快速浏览一下，看能不能发现一点新东西吧！

注：本文多次用到Firebug的console对象，请参考Firebug Console API 。关于firebug的更详细介绍，请猛击这里。

1. 用 === 代替 ==

JavaScript里有两种不同的相等运算符：===|!== 和==|!=。相比之下，前者更值得推荐。请尽量使用前者。

“如果两个比较对象有着同样的类型和值，===返回true，!==返回false。”

- JavaScript: The Good Parts

不过，如果使用==和!=，在操作不同数据类型时, 你可能会遇到一些意想不到的问题。在进行相等判断前，JavaScript会试图将它们转换为字符串、数字或 Boolean量。

2. 避免使用Eval函数

Eval函数把一个字串作为参数，并把字串作为JavaScript语句执行，返回结果（参考）。

此函数不仅会降低你脚本的执行效率，而且还大大增加了安全风险，因为它赋予了作为文本的参数太大的权利。千万别用！

3. 不要使用快速写法

技术上说，你可以省略掉大部分花括弧和句尾分号，绝大多数浏览器都能正确执行以下语句：

if(someVariableExists)
 x = false

不过，如果是这样的呢：

if(someVariableExists)
 x = false
 anotherFunctionCall();

你可能会认为它和下面的语句相等：

if(someVariableExists) {
 x = false;
 anotherFunctionCall();
}

不幸的是，事实并非如此。现实情况是它等价于：

if(someVariableExists) {
 x = false;
}
anotherFunctionCall();

如您注意到的，再漂亮的缩进也不能代替这华丽的花括弧。在所有情况下都请写清楚花括号和句尾分号。在只有一行语句的时候能偶尔省略掉，虽然下这么做也是极度不被推荐的：

if(2 + 2 === 4) return 'nicely done';

多考虑下将来吧，孩子

假设，在将来的开发过程中，你需要为这个 if 语句添加更多的命令呢？到时候你还不是得把括号给加上？

4. 好好利用JS Lint

JSLint 是由 Douglas Crockford 编写的一个调试器。你只需要贴上你的代码，它就能快速为您扫描出任何明显的错误和问题。

“JSLint 扫描接收的代码。发现问题，描述问题，并给出其在源码中的大概位置。可发现的问题包括但不限于语法错误，虽然语法错误确实是最常见的。JSLint也会用约定俗成的习惯检查代码的格式化风格，以及结构错误。通过JSLint的扫描并不能保证你的程序就完全正确。它只是为您提供了额外一双发现错误的眼睛。”

- JSLint 文档

完成代码之前，把它放到JSLint里检查一下，快速消灭你的无心之过。

5. 在页面底部加载脚本

正如下图所示：

请记住—— 我们要千方百计保证客户端的页面载入速度尽可能的快。而脚本没载入完成，浏览器就没法加载页面的剩余部分。

如果你的JS文件只是添加一些额外功能——例如，为点击某链接绑定事件——那大可以等页面加载基本完成后再做。把JS文件放到页面最后，body的结束标签之前，这样做最好了。

更好的写法是

<p>超哥是世界上最帅的人。benhuoer.com是世界上最好看的博客。</p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 在 For 语句外部声明变量

当需要执行冗长的for语句时，不要让JavaScript引擎每次都重复那些没有必要的操作。例如：

这样不好

for(var i = 0; i < someArray.length; i++) {
 var container = document.getElementById('container');
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 —— 太傻了！

这样好多了

var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len;  i++) {
 container.innerHtml += 'my number: ' + i;
 console.log(i);
}

我要给留言改进这段代码的人额外惊喜！欢迎大家留言讨论！

7. 快速构建字串

要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法：

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

“没那么多繁文缛节来烦你；你就信我一次好了（或者你也可以自己试一试）—— 这真的是迄今能找到的最快办法了！

用点土办法，也别管它背后究竟发生了什么抽象的东西，通常土办法都比那些优雅的办法要快捷得多！”

- James Padolsey, james.padolsey.com

8. 减少全局变量

“把你踩在全局的那些乱七八糟的脚印都归于一人名下，能显著降低与其他应用、小工具或JS库冲突的可能性。”

- Douglas Crockford

var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name

更好的写法

var DudeNameSpace = {
 name : 'Jeffrey',
 lastName : 'Way',
 doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

注意看，我们是如何戏剧化地把“乱七八糟的脚印”都归到“DudeNameSpace”这对象之下的。

9. 写好注释

可能一开始你会觉得并无必要，但相信我，你将来会主动想要尽可能写好代码的注释的。当你几个月后再回看某项目时，结果却发现很难想起当时写某句东西时脑子在想的什么了，是不是很让人沮丧呢？或者，如果有同事要修订你的代码呢？一定，一定要为你代码里的重要部分加上注释。

// 遍历数组，输出各自名称
for(var i = 0, len = array.length; i < len; i++) {
 console.log(array[i]);
}

10. 试试渐进增强

一定要记得为未启用JavaScript的情况提供替代方案。大家可能会认为，“大部分我的访客都启用了JavaScript的，我才不用担心”。这样的话，你可就大错特错了！

你有没有试过看看禁用JavaScript后你那漂亮的滑动器都成啥样了？（你可以下载 Web Developer ToolBar 轻松完成这项任务。）禁用之后你的网站可能就彻底失去了可用性！经验之谈：开发初期总是按照没有JavaScript来设计你的网站，之后再进行渐进地功能增强，小心翼翼地改变你地布局。

11. 不要传递字串给 “setInterval” 或 “setTimeout”

看看下面的代码：

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

不仅执行不高效，而且和 eval 函数有着同样的高风险。千万不要把字串传递给 setInterval 和 setTimeout。恰当的做法是，传递一个函数名：

setInterval(someFunction, 3000);

12. 不要使用with语句

初识之下，“with”语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如：

with (being.person.man.bodyparts) {
 arms = true;
 legs = true;
}

– 等价于 —

being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;

不幸的是，测试表明，若你要为对象插入新成员，with的表现非常糟糕，它的执行速度非常缓慢。替代方案是声明一个变量：

var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;

13. 使用 {}，而不用New Object()

在JavaScript有多种方式能新建对象。最传统的方法是 new 语句，如下：

var o = new Object();
o.name = 'Benhuoer';
o.lastName = 'Yang';
o.someFunction = function() {
 console.log(this.name);
}

不过，这一方法读起来却比较糟糕。我强烈建议你采用下面这种在文字样式上更为强健的写法：

更好的写法

var o = {
 name: 'Jeffrey',
 lastName = 'Way',
 someFunction : function() {
 console.log(this.name);
 }
};

注意，如果你想新建一个空对象，用 {} 就能行：

var o = {};

“对象字面符(Objects literals)帮助我们写出支持很多特性，同时又关联性强、简明直接的代码。没必要直接调用新建语句，然后再费心维护声明变量和传递变量的语句之间的正确顺序，等等。” – dyn-web.com

14. 使用[]，而不用New Array()

新建数组时的同类型运用。

行得通的写法

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

更好的写法

var a = ['Joe','Plumber'];

“在JavaScript编程中经常遇到的一个错误是，该用数组时却用了对象，该用对象时却用了数组。规则其实很简单：当属性名是小的连续整数时，你应该使用数组。其他情况，使用对象。” – Douglas Crockford

15. 一长列变量声明？别写那么多var，用逗号吧

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string',
 anotherItem = 'another string',
 oneMoreItem = 'one more string';

…不言自明。我不知道这样做能否提升代码执行速度，但是确实让你的代码干净许多。

17. 千万千万记得写分号

大部分浏览器都允许你不写句尾分号：

var someItem = 'some string'
function doSomething() {
 return 'something'
}

之前已经说过，这样做会造成潜在的更大、更难以发现的问题：

更好的写法

var someItem = 'some string';
function doSomething() {
 return 'something';
}

18. “For in” 语句

遍历对象时，你可能会发现你还需要获取方法函数。所以遇到这种情况时，请一定记得给你的代码包一层 if 语句，用以过滤信息。

for(key in object) {
 if(object.hasOwnProperty(key) {
 ...then do something...
 }
}

引自 Douglas Crockford 所作： JavaScript: The Good Parts

19. 使用Firebug的“Timer”功能优化你的代码

想要轻松地快速了解某项操作的用时吗？使用Firebug的timer功能来记录结果好了。

function TimeTracker(){
 console.time("MyTimer");
 for(x=5000; x > 0; x--){}
 console.timeEnd("MyTimer");
}

20. 读，读，读……Read, Read, Read…

虽然我是Web开发博客（就像这个！）的超级粉丝，但吃饭和睡觉前除了看书好像也别无选择~ 在你的床头柜上摆一本Web开发的好书吧！下列书单都是我的最爱：

• Object-Oriented JavaScript（暂无中文版）
• JavaScript: The Good Parts（中文版）
• Learning jQuery 1.3（暂无中文版，但你可以看看老版本的中文版）
• Learning JavaScript（中文版）

阅读他们…… 反复阅读很多次！我现在都还在读。

21. 自决的函数

相比于调用函数，让函数在页面载入或者某一父函数被调用时自动执行，是十分简单方便的做法。你只需要把你的函数包在父辈之内，然后添上一个额外的括号，本质上这括号就触发了你定义的函数（了解更多）。

(function doSomething() {
 return {
 name: 'jeff',
 lastName: 'way'
 };
})();

22. 原生 JavaScript 总是会比使用代码库来的快

诸如jQuery和Mootools这样的JavaScript库，能为你写代码的过程省下不少时间——尤其是当需要 AJAX 操作时。不过你可得记住，只要你的代码写得恰当，原生JavaScript总是会比利用代码库的写法执行得快一些。

jQuery的“each” 方法对于循环操作十分便利，但是使用原生态的for语句总归会快很多。

23. Crockford 的 JSON.Parse

尽管 JavaScript 2会内建JSON处理器，但写这篇文章之时，我们还是需要自己实现。Douglas Crockford，JSON的创建者，已经为我们创作出能直接使用的处理器了。您可以在这里下载。

导入这段代码，你就能新建 JSON 全局对象，然后处理你的 .json 文件。

var response = JSON.parse(xhr.responseText);
var container = document.getElementById('container');
for(var i = 0, len = response.length; i < len; i++) {
 container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';
}

关于JSON，请查看更多介绍。

24. 移去“Language”

很多年前，language还是每段script标签必备属性：

<script type="text/javascript" language="javascript">
...
</script>

不过现在，这属性已经没啥用很久了…… 所以，删掉算啦！

就这些了，朋友们~

就是这些了，这就是我给JavaScript初学者的24条小建议。各位亲爱的朋友，你们的看法呢？你们有什么快速小贴士吗？感谢你的耐心阅读。

英文原文：24-javascript-best-practices-for-beginners

译文原文：给JavaScript新手的24条建议

© 请尊重版权，若需转载，务必保留链接。

©2009 笨活儿 | 永久链接 | 已经有6条评论了 | 推荐到豆瓣

英文原文来自Smashing Magazine。由笨活儿翻译。转载请注明出处。

正则表达式(Regular Expression, abbr. regex) 功能强大，能够用于在一大串字符里找到所需信息。它利用约定俗成的字符结构表达式来发生作用。不幸的是，简单的正则表达式对于一些高级运用，功能远远不够。若要进行筛选的结构比较复杂，你可能就需要用到高级正则表达式。

本文为您介绍正则表达式的高级技巧。我们筛选出了八个常用的概念，并配上实例解析，每个例子都是满足某种复杂要求的简单写法。如果你对正则的基本概念尚缺乏了解，请先阅读这篇文章，或者这个教程，或者维基条目。

这里的正则语法适用于PHP，与Perl兼容。

1. 贪婪/懒惰

所有能多次限定的正则运算符都是贪婪的。他们尽可能多地匹配目标字符串，也就是说匹配结果会尽可能地长。不幸的是，这种做法并不总是我们想要的。因此，我们添加“懒惰”限定符来解决问题。在各个贪婪运算符后添加“?”能让表达式只匹配尽可能短的长度。另外，修改器“U”也能惰化能多次限定的运算符。理解贪婪与懒惰的区别是运用高级正则表达式的基础。

贪婪操作符

操作符 * 匹配之前的表达式零次或零次以上。它是一个贪婪操作符。请看下面的例子：

preg_match( '/<h1>.*< \/h1>/', '</h1><h1>这是一个标题。</h1>
<h1>这是另一个。</h1>', $matches );

句点(.)能代表除换行符外的任意字符。上面的正则表达式匹配 h1 标签以及标签内的所有内容。它用句点(.)和星号(*)来匹配标签内的所有内容。匹配结果如下：

这是一个标题。
这是另一个。

整个字串都被返回。* 操作符会连续匹配所有内容—— 甚至包括中间的 h1 闭合标签。因为它是贪婪的，匹配整个字串是符合其利益最大化原则。

懒惰操作符

把上面的式子稍作修改，加上一个问号(?)，能让表达式变懒惰：

/<h1>.*?< \/h1>/</h1>

这样它会觉得，只需匹配到第一个 h1 结尾标签就完成任务了。

另一个有着类似属性的贪婪操作符是 {n,} 。它代表之前的匹配模式重复n次或n次以上，如果没有加上问号，它会寻找尽可能多的重复次数，加上的话，则会尽可能少重复（当然也就是“重复n次”最少）。

# 建立字串
$str = 'hihihi oops hi';
# 使用贪婪的{n,}操作符进行匹配
preg_match( '/(hi){2,}/', $str, $matches );  # matches[0] 将是 'hihihi'
# 使用堕化了的 {n,}? 操作符匹配
preg_match( '/(hi){2,}?/', $str, $matches );  # matches[0] 将是 'hihi'

2. 回返引用(Back referencing)

有什么用？

回返引用(Back referencing)一般被翻译成“反向引用”、“后向引用”、“向后引用”，个人觉得“回返引用”更为贴切[笨活儿]。它是在正则表达式内部引用之前捕获到的内容的方法。例如，下面这个简单例子的目的是匹配出引号内部的内容：

# 建立匹配数组
$matches = array();
# 建立字串
$str = "\"This is a 'string'\"";
# 用正则表达式捕捉内容
preg_match( "/(\"|').*?(\"|')/", $str, $matches );
# 输出整个匹配字串
echo  $matches[0];

它会输出：

"This is a'

显然，这并不是我们想要的内容。

这个表达式从开头的双引号开始匹配，遭遇单引号之后就错误地结束了匹配。这是因为表达式里说：("|')，也就是双引号（"）和单引号（'）均可。要修正这个问题，你可以用到回返引用。表达式\1,\2,…,\9 是对前面已捕获到的各个子内容的编组序号，能作为对这些编组的“指针”而被引用。在此例中，第一个被匹配的引号就由1代表。

如何运用？

将上面的例子中，后面的闭合引号替换为1：

preg_match( '/("|\').*?\1/', $str, $matches );

这会正确地返回字串：

"This is a 'string'"

译注思考题：

如果是中文引号，前引号和后引号不是同一个字符，怎么办？

还记得PHP函数 preg_replace 吗？其中也有回返引用。只不过我们没有用 \1 … \9，而是用了 $1 … $9 … $n （此处任意数目均可）作为回返指针。例如，如果你想把所有的段落标签 <p> 都替换成文本：

$text = preg_replace( '/<p>(.*?)< \/p>/',
'&lt;p&gt;$1&lt;/p&gt;', $html );

参数$1是一个回返引用，代表段落标签

内部的文字，并插入到替换后的文本里。这种简便易用的表达式写法为我们提供了一个获取已匹配文字的简单方法，甚至在替换文本时也能使用。

3. 已命名捕获组(Named Groups)

当在一个表达式内多次用到回返引用时，很容易就会把自己弄糊涂，判断N个数字（\1 … \9）都到底代表哪一部分会比较困难。这是就可以用到带名字的捕获组（下文简称“有名组”）。有名组使用(?P<pattern>)来设定，name代表组名，pattern是配合该有名组的正则结构。请看下面的例子：

/(?P<quote>"|').*?(?P=quote)/

上式中，quote就是组名，"|'是改组匹配内容的正则。后面的(?P=quote)是在调用组名为quote的有名组。这个式子的效果和上面的回调引用实例一样，只不过是用了有名组来实现。是不是更加易读易懂了？

有名组也能用于处理已匹配内容之数组的内部数据。赋予特定正则的组名也能作为所匹配到的内容在数组内部的索引词。

preg_match( '/(?P<quote>"|\')/', "'String'", $matches );
# 下面的语句输出“'”(不包括双引号)
echo $matches[1];
# 使用组名调用，也会输出“'”
echo $matches['quote'];

所以，有名组并不只是让写代码更容易，它也能用于组织代码。

4. 字词边界(Word Boundaries)

字词边界是字串里的字词字符（包括字母、数字和下划线，自然也包括汉字）和非字词字符之间的位置。其特殊之处就在于，它并不匹配某个实在的字符。它的长度是零。 \b 匹配所有字词边界。

可惜，字词边界大多数情况下都被无视了，很多人并不知道如何实际运用。 下面举个例子。比如说你想要匹配单词“import”：

/import/

注意了！正则表达式有时候很调皮的。下面的字串也能和上面的式子匹配成功：

important

你或许觉得，只要在import前后加上空格，不就可以匹配 import 这个独立的单词了：

/ import /

那如果遇上这种情况呢：

The trader voted for the import

当 import 这个词在字串开头或者结尾时，修改后的表达式仍然不能用。因此，考虑各种情况是必须的：

/(^import | import | import$)/i

别慌，还没完呢。如果遇到标点符号呢？就为了满足这一个单词的匹配，你的正则可能就需要这样写：

/(^import(:|;|,)? | import(:|;|,)? | import(\.|\?|!)?$)/i

对于只匹配一个单词来说，这样做实在是有点大动干戈了。正因如此，字词边界才显得意义重大。要满足上述要求，以及很多其他情况，利用字符边界，只需如此写：

/\bimport\b/

上面所有情况都得到了解决。\ b 的灵活性就在于，它是一个没有长度的匹配。它只匹配两个实际字符之间想象出的位置。它检查两个相邻字符是否是一个为单字，另一个为非单字。情况符合，就返回匹配。如果遇到了单词的开头或结尾， \b 会把它当成是非单词字符对待。由于import里面的 i 仍然被看成是单词字符，import 就被匹配出来了。

注意，与\b相对，我们还有\B，此操作符匹配两个单字或者两个非单字之间的位置。因此，如果你想匹配在某个单词内部的‘hi’，可以使用：

\Bhi\B

“this”、“hight”，都会返回匹配，而“hi there”则不会返回匹配。

5. 最小组团(Atomic Groups)

最小组团是无捕捉的特殊正则表达式分组。通常用来提高正则表达式的效能，也能用于消除特定匹配。一个最小组团可以用(?>pattern) 来定义，其中pattern是匹配式。

/(?>his|this)/

当正则引擎针对最小组团进行匹配时，它会跳过组团内标记的回溯位置。以单词“smashing”为例，当用上面的正则表达式匹配时，正则引擎会先尝试在“smashing”里寻找“his”。显然，找不到任何匹配。此时，最小组团就发挥作用了：正则引擎会放弃所有回溯位置。也就是说，它不会尝试再从“smashing”里查找“this”。为什么要这样设置？因为“his”都没有返回匹配结果，包含有“his”的“this”当然就更匹配不了了！

上面的例子并没有什么实用性，我们用/t?his?/ 也能达到效果。再看看下面的例子：

/\b(engineer|engrave|end)\b/

如果把“engineering”拿去匹配，正则引擎会先匹配到“engineer”，但接下来就遇到了字词边界，\b，所以匹配不成功。然后，正则引擎又会尝试在字串里寻找下一个匹配内容：engrave。匹配到eng的时候，后面的又对不上了，匹配失败。最后，尝试“end”，结果同样是失败。仔细观察，你会发现，一旦engineer匹配失败，并且都抵达了字词边界，“engrave”和“end”这两个词就已经不可能匹配成功了。这两个词都比engineer短小，正则引擎不应该再多做无谓的尝试。

/\b(?>engineer|engrave|end)\b/

上面的替代写法更能节省正则引擎的匹配时间，提高代码的工作效率。

6. 递归(Recursion)

递归(Recursion)用于匹配嵌套结构，例如括弧嵌套， (this (that))，HTML标签嵌套

。我们使用(?R)来代表递归过程中的子模式。下面是一个匹配嵌套括弧的例子：

/\(((?>[^()]+)|(?R))*\)/

最外层使用了反义符的括号“(”匹配嵌套结构的开端。然后是一个多选项操作符( * | * )，可能匹配除括号外的所有字符 “(?>[^()]+)”，也可能是通过子模式“(?R)”来再次匹配整个表达式。请注意，这个操作符会尽量多地匹配所有嵌套。

递归的另一个实例如下：

/<([\w]+).*?>((?>[^<>]+)|((?R)))*<\/\1>/

以上表达式综合运用了字符分组，贪婪操作符、回溯，以及最小化组团来匹配嵌套标签。第一个括弧内分组([\w]+)匹配出标签名，用于接下来的应用。若找到这尖括号样式的标签，则尝试寻找标签内容的剩余部分。下一个括弧括起来的子表达式和上一个实例非常相似：要么匹配不包括尖括号的所有字符 ?>[^<>]+，要么递归匹配整个表达式(?R)。表达式最后的<\/1>代表闭合标签。

7. 回调(Callbacks)

匹配结果中的特定内容有时可能会需要某种特别的修改。要应用多重而复杂的修改，正则表达式的回调就有了用武之地。回调是用于函数preg_replace_callback中的动态修改字串的方式。你可以为preg_replace_callback指定某个函数为参数，此函数能接收匹配结果数组为参数，并将数组修改后返回，作为替换的结果。

例如，我们想将某字串中的单词全部转换为首字母大写。十分不巧，PHP没有直接转化字母大小写的正则操作符。要完成这项任务，就可以用到正则回调。首先，我们要匹配出所有需要被大写的字母：

/\b\w/

上式同时使用了字词边界和字符类。光有这个式子还不够，我们还需要一个回调函数：

function upper_case( $matches ) {
return strtoupper( $matches[0] );
}

函数upper_case接收匹配结果数组，并将整个匹配结果转化成大写。 在此例中，$matches[0]代表需要被大写的字母。然后，我们再利用preg_replace_callback完成这次回调：

preg_replace_callback( '/\b\w/', 'upper_case', $str );

一个简单的回调即有这般强大的力量。

8. 注释(Commenting)

注释不用来匹配字串，但确实是正则表达式中最重要的部分。当正则越写越深入，越写越复杂，要推译出究竟什么东西被匹配就会变得越来越困难。在正则表达式中间加上注释，是最小化将来的迷糊和困惑的最佳方式。

要在正则表达式内部加上注释，使用(?#comment)格式。把“comment”替换成你的注释语句：

/(?#数字)\d/

如果你打算把代码公之于众，为正则表达式加上注释就显得尤为重要。这样别人才能更容易看懂和修改你的代码。和其他场合的注释一样，这样做也能为你重访自己以前写的程序时提供方便。

考虑使用“x”或“(?x)”标记位来格式化注释。这个修改器让正则引擎忽略表达式参数之间的空格。“有用的”空格仍然能够通过[ ]或\s，或者\ （反义符加空格）来匹配。

/
\d    #digit
[ ]   #space
\w+   #word
/x

上面的代码与下面的式子作用一样：

/\d(?#digit)[ ](?#space)\w+(?#word)/

请时刻注意代码的可读性。

更多资源（英文）

• Regular-Expressions.info Comprehensive website on regular expressions
• Cheat SheetInformative regular expressions cheat sheet
• Regex GeneratorJavaScript regular expressions generator

关于作者

Karthik Viswanathan 是一个喜欢编程和做网站的高中生。你可以到他的博客上查看他的作品：Lateral Code。你也可以关注一下他的线上Twitter应用。

©2009 笨活儿 | 永久链接 | 已经有10条评论了 | 推荐到豆瓣

若需转载，务请保留出处。

综述

在Photoshop里可以仅仅使用滤镜、蒙版和渐变轻松地创造令人惊叹的真实材质效果，本教程就是这真实的一例。

所用文件：

第一步

新建文档，我使用的大小是1000×609。使用暗绿到中绿的径向渐变，填充背景图层。

第二步

给黑板添加噪点：“滤镜->杂色->添加杂色”。设置数量为1.6%。 分布方式为平均分布，并勾选单色。

第三步

接下来我们画黑板的木条边框。只需几步即可完成，我选择使用纤维滤镜来创建它。由于无法设置纤维方向，所以我为木框的各个部分分别创建了一个文档，再把他们放到黑板图片中。

首先创建顶部横条。新建文档，高度与黑板的宽度相同，宽度设置成你需要的木条宽度。在本教程中，我的黑板大小是1000×609，于是我为顶部横条创建的文档尺寸是45×1000。设置前景色为浅灰，背景色为深灰，然后点击“滤镜->渲染->纤维”（Filter->Render->Fiber） 。 差异设为3，强度设为21左右，使用“随机化”按钮找到合适的纤维形状。然后将图像旋转90度——“图像->旋转画布->90度(顺时针)/90度(逆时针)”（Image->Image Rotation->90 Degrees CW）

第四步

下面给木条添加颜色，“图像->调整->色相/饱和度”（Image->Adjustments->Hue/Saturation），快捷键“ctr+u”。选中“着色”，参数分别设置为色相29，饱和度33，明亮度-20。当然，你可以根据你要制作的效果灵活调整参数。

第五步

为木条也添加一些杂色，与第二步同理，这次设置数量为 1%。复制木条到黑板文件，移到顶部它应该在的位置。之后效果如下：

第六步

画出木框的其他三个边。这些木条可以通过复制和翻转/旋转快速完成。当然，你也可以从头开始画，让这些木条显得更有差异。

第七步

选中所有木条图层，合并图层（Ctr+E）。双击这个合并过后的图层，设置图层样式，添加阴影和内发光，参数如下：

阴影：角度-39，距离11，大小29；

内发光：颜色为白色，不透明度12

其余参数不变。

第八步

木条框画好了，接下来继续研究黑板上的东西。我们需要给它添加一些做旧效果，从你的笔刷库里找出适当的Grunge效果笔刷吧。我这里使用的是 Grunge Corner Brush Pack 。在木框图层和黑板面图层之间新建一个图层，拾取一个非常暗的绿色，然后用笔刷刷出grunge的效果…… 然后将这一图层透明度调到40%左右。

译注：grunge是90年代流行的脏乱邋遢+摇滚的时尚生活方式，后来被用于平面设计中，一度很流行……

第九步

下面为黑板添加更多颜色变化。在grunge图层之上新建一个图层，设置前景色为黑色，背景色为白色（快捷键“D”），然后点击“滤镜->渲染->云彩”。使用动感模糊（滤镜->模糊->动感模糊）把这些云彩模糊掉，角度18，距离100。最后，更改图层混合样式为“正片叠底”（multiply），不透明度30%左右。

第十步

接下来制造一些黑板刷刷过的效果。在云彩图层之上新建一个图层，找到“平头湿水彩笔”（photoshop自带），画笔颜色为黑色，不透明度30%左右，然后像擦黑板一样在黑板上刷。刷的时候可以有一些中途停顿，然后某些地方可以多刷几次，让其颜色更重一些。最后，降低图层不透明度至10%左右。

第十一步

新建一个图层，重复第十步，不过这次把图层不透明度降至5%左右，之后应该达到如下效果：

第十二步

选一个好看的手写字体，我这里使用的是 Christopher Hand。在黑板上写几个大字先，这可以被当做是以前在黑板上写的，没有被完成擦去的字迹。把透明度调低至2%。

第十三步

再写一些你想写的字，这次把透明度设为70%。再次找到grunge画笔，我这里使用的Subtle Grunge Textures and Effects 来自Function 。新建蒙版，用黑色的grunge笔刷在蒙版上涂画，这可以制造粉笔的质感，注意不要画太过了。

第十四步

我觉得这黑板有点深度和透视效果会更好，所以下面我们添加两个额外的东西。首先，在下边框上加一条放黑板刷的横条。使用上面的制作木条的方法，记得加上阴影效果。

第十五步

接下来在画一个黑板刷。使用圆角矩形工具画一个圆角矩形（快捷键U），圆角半径设为1像素。转换该图层为智能对象。这样做是为了让以后应用滤镜的时候更加灵活，便于更改。首先，添加光影效果，重置前背景色为黑和白，点击“滤镜->渲染->分层云彩”。

第十六步

黑板刷的材质和光照效果还需要在深化才行。我这里采用了滤镜。首先点击“滤镜->画笔描边->喷色描边”，然后点击“滤镜->杂色->添加杂色”。建议参数如下所示。由于我们使用了智能对象，所以如果参数不够好，很容易就能再进行调整。

喷色描边：长度20，半径25，方向为垂直

杂色：数量1.96%，平均分布，单色

第十七步

现在只是画好了黑板刷的下面部分，接下来画上面部分。再次使用圆角矩形工具，画一个深灰色的矩形。如上面一样，转换为智能对象，然后添加一些杂色即可。

第十八步

为了保持光影效果的一致性，给黑板刷的两个部分也加一些投影。现在你做出的效果应该如下图：

第十九步

最后，我们再为整个设计加上两只粉笔，让场景更为真实。粉笔的画法和黑板刷的画法大同小异。最终结果如下：

总结

仅仅利用一些滤镜、画笔和渐变就能创造出真实的材质效果，如此简单，是不是很激动人心呢？欢迎在下面留言告诉我你的想法。也许你还发现了可以在某些地方添加细节，让整个设计变得更加真实？

© 本文编译至MyInkBlog。版权归原作者所有。如有图像无法显示，请到原文作者blog查看。

©2009 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

Photoshop的“动作”功能可以帮助我们完成一些枯燥的重复性工作。本教程就是这项功能的应用实例。

有时候我们会需要把截屏图拿到Photoshop里面处理，添加固定的风格样式，如模糊、残边、投影等。一两张倒无所谓，图片多的话就显得烦人。在Photoshop里面添加一个处理截屏图的动作，可以节省很多时间。

“动作”功能的原理是记录下你的一系列操作，今后遇到同样的效果要求时，可以“播放”动作，让Photoshop自动帮你完成这一系列类似的操作。 在Smashing Magazine 上有很多免费的动作脚本供你下载使用： The Ultimate Collection Of Useful Photoshop Actions(英文)。

开始行动吧

以下教程将为Photoshop添加一个简单的对截屏图进行倾斜、模糊、黑角处理的动作。

第一步

在Photoshop中新建一个你所需尺寸的文档，我这里采用的是575px × 250px。抓取截屏图（比较简单的方法是点击键盘上的“Print Screen”键）， “Ctr+V”黏贴到文档中。

第二步

现在转到你的动作调板。如果找不到，点击菜单栏上的窗口->动作（快捷键Alt+F9）。 如果你是第一次使用改功能，则可以看到Photoshop已经为我们预设了一些默认动作。你可以查看一下这些动作能提供的操作，有些动作可能对你有用。点击面板右上角的小三角按钮你还能找到其他预设动作。考虑到本教程的目的和以后的使用需求，我建议你新建一个组。点击动作调板下方的文件夹图标，新建一个组，并命名。

第三步

点击文件夹图标右边的“新建动作”图标，创建一个动作，并将其命名为“截屏”。当然，你也可以在名字里面添加一些细节说明，如“截屏-模糊并黑角”。点击“记录”按钮确定。

第四步

新建动作后会自动进入录制动作状态。请注意，Photoshop并不是像录音录像那样在实时记录，它只会记录下你实实在在的图像处理操作。所以你用不着慌忙，如果你愿意，让 Photoshop 等上个三五天都没有问题。另外，可以看到，当你进行处理时，动作面板里你的动作名下方会列出你的操作步骤。如果你不喜欢某一步操作结果，只需暂停录制，然后将这一步操作拖到面板下方的垃圾桶图标中即可。当你准备好重新来过时，别忘了再点击圆形的录制图标重新开始记录。

我们需要录制的第一个操作是倾斜图像。“Ctr+T”，使用自由变化工具对图像进行旋转。在这里我使用了菜单栏下方的选项栏，设置旋转角度为“-5°”。请注意动作调板，“变换 当前 图层”的操作已被记录。

第五步

接下来我们移动图像到合适的位置。再次使用“Ctr+T”自由变换工具，拖动截屏图到你认为最佳的位置。在将来播放动作的时候，这一步的参数可能会根据所处理图片的情况有所变化，所以你应该在这一步加上一个暂停。 点击勾号“√”右边的“切换对话开/关”，给这一步变换当前图层添加一个暂停，好让将来应用动作时能重新调整参数。

第六步

接下来，点击“Ctr+J”复制当前图层。

第七步

下一步我们将对原始截图的拷贝进行模糊处理，以便通过给上面这个图层添加蒙版来达到效果。所以我们需要选择原始截图所在的图层，但是如果只是简单地点击这个图层来选择，动作功能就会按照图层名记录下选择操作。因此，将来应用这个动作时就有可能因为图层名不一致而造成动作失效。 不过，通过使用键盘快捷键，我们可以利用图层间相对位置来达到目的。也就是说，点击“Ctr+[”移动当前复制图层到原始图层之下。

第八步

现在设置模糊效果。滤镜->模糊->高斯模糊，我这里半径为2像素。

第九步

接下来我们要选择最上面的图层，以便添加蒙版实现渐变模糊效果。应用同样的技巧，这一次我们需要选择当前活动图层上面的图层，所以点击“Ctr+]”（注意，不是Ctr+[）。

（译者注：第七步和第九步这里貌似作者脑子犯毛病了。原文里写的是“选择(Select)”各个图层，结果操作的时候是在移动图层。配的图片也显示的是Move Current Layer。其实哪用这么麻烦移过去移过来，直接在复制的图层上就可以完成高斯模糊、加蒙版的操作。我这里之所以不纠正，是觉得第七步说的那些东西在将来还是会有用的。这个理念还是好的，现在用不到这个方法，不保证将来不用，对不对？

在Windows里，选择前一图层和选择后一图层的快捷键是“Alt+[”和“Alt+]”。原教程是针对Mac用户的，根据作者的解释，Mac里的“Alt+[”和“Alt+]”是前后置图层的快捷键,他的本意还是要移动图层。但最开始的时候他把“Alt+[”写成了“Command+[”，所以搞得我很糊涂。）

第十步

为上面的图层添加图层蒙版：图层->图层蒙版->显示全部（亦可使用图层面板下方的“新建蒙版”图标）。选择渐变工具（快捷键“G”），设置一个白-灰-白的渐变，如下图。 在你的截屏图上沿着你刚才旋转的倾斜角度点击并拖动。如此便为图像边缘添加了模糊效果。

第十一步

新建一个图层：图层->新建->图层（快捷键Ctr+Shift+N。或者图层面板的新建图标。囧，感觉我好啰嗦啊。）。使用矩形选区工具，新建一个选区并羽化，设置羽化半径为20像素。

关于羽化：你可以在建立选区前先在选项栏设置好选区的羽化半径，也可以建立选区后在选区上右键单击-> 羽化… ，来设置选区羽化。

第十二步

“Ctr+Shift+I”反选（选择->反选）。点击“D”复位色板，“X”交换色板，以使背景色为黑色（你也可以直接设置背景色，但我认为这样更快捷一点）。“Ctr+Backspace”用背景色填充选区。 于是我们就为图像添加了一个黑色的渐变边框。这看起来有点太过了，下一步我们会将它处理一下。

（知道这一步更快捷的做法吗？“D”复位色板后，点击“Alt+Backspace”，用前景色填充。）

第十三步

点击图层面板左上方的下拉菜单，改变该图层的混合模式为“柔光”。我建议你在此也添加一个暂停动作，因为改变图层的混合模式可以产生丰富的效果变化。图像的明亮程度也会影响各种混合模式的最终效果。

最终效果

如下图：

动作的应用

以下是使用刚才新建的动作处理的其他图片。

结语

Photoshop的动作是个很强大的功能，可以节省许多重复性劳动。本实例都是一些很基本的简单操作，最终效果却不同凡响，可见，对PS功能恰当地组合运用正是用PS进行“设计”创作的精髓所在。

本教程编译自MyInkBlog.com。版权归原作者Andrew Houle所有。翻译者笨活儿保留翻译文本的版权。允许自由转载，但请注明出处，并保留此声明。

©2009 笨活儿 | 永久链接 | 已经有5条评论了 | 推荐到豆瓣

警告：以下内容仅适用于开通了IPv6网络的同学。如果您尚未开通，四川农业大学的同学请参照这篇IPv6开通指导，其他朋友请参照自己所处网络环境的条件自行处理。

目前国内支持IPv6的Tracker少之又少。IPv6网络环境下的BT下载站，据我所知，就只有清华晨光BT站和我这里介绍的东北大学IPv6 BT下载站。目前清华晨光关闭注册，所以在这里向大家介绍一下东北大学这个BT站的使用方法。

要享受在IPv6网络里高速共享资源的乐趣，按照如下步骤操作：

1. 登陆东北大学IPv6 BT下载站 注册新用户。
2. 下载μTorrent。您也可以到μTorrent官网去下载最新版本。请注意，目前比特彗星和迅雷尚不支持IPv6，所以你可能无法使用你通常所用的BT客户端下载IPv6网络的BT资源。
3. 安装好μTorrent后几乎不需任何配置即可使用。但我建议您增大磁盘缓存，以保护硬盘。方法是点击菜单栏里的“选项”->“设置”->“高级”->“缓存”。根据您自己的内存大小和平时应用软件的情况设定。
4. 若要下载资源：前往论坛搜索中心寻找种子 。您也可以直接在各个分版查找最新资源。
   
5. 若要发布资源，请先做种。点击“制作Torrent”按钮（见下图）
   

   制作torrent按钮的位置

6. 选择您要发布的文件或文件夹，填写好Tracker地址。每位论坛用户都有一个专用Tracker来追踪你的上传下载记录，这和你的论坛积分息息相关。Tracker地址代表的就是一个服务器，你的BT客户端通过向Tracker查询来得知哪些人有你需要的文件，以便你与他建立连接。同时，Tracker也有记录用户上传和下载记录的功能。所以务必填写你自己的专用Tracker，以方便身份识别。请放心，身份识别仅仅是为了记录上传下载信用，不会泄露您的隐私。
   

   制作Torrent对话框

   之后点击“创建并另存为”，把种子文件保存到一个你找得到的地方。

7. 然后您就可以到论坛相应版块发帖，发布你的资源了。发帖的时候请参照各版的发帖要求，注意发帖格式。以方便网友查找。

差不多就这样了，如果遇到任何问题，欢迎留言咨询。

我的ID叫笨活儿，您也可以看看我都发了哪些种子。

UPDATE: 目前论坛已经改为邀请注册，购买邀请码需要论坛金币（很贵），如果你确定你能打开此站，并且有人人为我，我为人人的BT精神，可以发邮件给我索取邀请码。（已经停止发送。我也不是有钱人……再发我就积分为0啦！问问身边的朋友吧！）

©2008 笨活儿 | 永久链接 | 已经有3条评论了 | 推荐到豆瓣

首先，欢迎各位加入本群。

本群为校学生会网络工作部的官方QQ群，主要用于交流安排与学习交流。也同时欢迎校内其他网页制作的爱好者加入。

针对初学者，在此我愿意与大家分享一点我自己的经验。

学习电脑技术，不管是网页制作或者相应的一些专业软件，应该时刻注意一个原则：

（简便起见，将网页制作、后台编程、网站美工统称为Web技术）

善用搜索引擎。 有问题？百度一下。”学习Web技术最好的老师就是网络。碰到问题的时候，先试试能不能自己解决，然后用搜索引擎找找有没有相关的问题。个人比较推荐Google，因为技术上的东西好像还是Google搜出来的结果更有用的。我是很少用百度，除非有一些自己搜搜不出来的问题我才会用用百度知道求助高手。（很少碰到这样的情况）。使用搜索软件的技巧无外乎关键字的选择，如果大家需要将来我可以专门写一个帖子来讲讲经验。

此外，总结一些初学时的方法和经验：

1. 网络永远比教材快。

学习Web技术，最好是看网上的教程或教材。对于日新月异的计算机技术，图书馆二楼的书几乎已经丧失借阅的价值了，能够在一楼借到相关内容的书就坚决不在二楼借。当然，也有一些很经典的书在基础知识的讲解上非常值得参考。或者有时候没有条件上网，借一本教材来翻着玩也是可以的。

2. 从最基础的东西入手。

很多同学，连最基本的概念和操作都没有学会，就想要开始做很高级的东西。这里也试验，那里也试验，可是真要做一个指定的效果的时候，却又不知道从何入手了。所以应该先系统的了解一下最基本的概念性的东西已经Web开发软件的基本操作。比如做一个网页需要用到哪些语言？这些语言都能做哪方面的事情？HTML最基本的语法是什么？每个标签各有哪些常用属性？不要到时候在Dreamweaver的可视化做出一个页面后你还不知道插入图片的代码是<img></img><img />。常用的快捷键有哪些？至少Ctr+C和Ctr+V你得会用吧？Photoshop工具栏上那一串东西都能做些什么？

3. 经常参考帮助文档。

有时候可能你想要执行的操作在网上也搜不到，就是因为这个操作太简单啦，看一下帮助文档就能找到！而你一时间没有反应过来，就一直在那里迷茫着。学习的时候不是随时都有高手在身边为你答疑解惑的，这个时候按下F1，打开软件的帮助文档看一下，你会发现你的这些可爱的工具能实现的东西比你想象中还多。

具体的学习思路我会另写一篇帖子。

©2007 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

原文链接：A CSS styled table version 2

本文介绍如何正确使用xHTML语言里的table标签——他应该只为展示数据所用。本文将帮助你赋予您的表格可达性，并教会你如何用CSS来定义你的表格以获得需要的视觉效果。

XHTML部分

如果你读过我关于表格问题的 第一篇文章，你可能还记得我建议你读一读Roger的 ‘Bring on the tables’ [表格全接触]。在这个问题上他的讨论的深度已达极致。不过，我还是想提醒您一些事情，在你想编写出拥有良好可达性的表格代码时请务必牢记这些原则：

• 确保为表头[即某列或某行表格元素的标题，数据域标题。]使用 th元素并指定scope（范围）属性。[也就是使用类似<th scope="col">姓名</th>的代码]
• 为你的表格添加标题（caption），特别是当你的页面有不止一个表格的时候。
• 为表格元素添加summary（摘要）属性，清楚而简洁地描述表格内容
• 如果需要，可以通过使用thead，tfoot，tbody元素将表格行分组，以获得结构更加清晰的表格。

为什么要使用表头和指定scope属性？

这至少能带给你两个好处。第一，这会让你的表格对使用屏幕阅读器的人更可及。 第二，这样做能帮助你更容易地用CSS控制表格样式。你可以给所有的th 元素单独的CSS样式，让它们以不同于其他表格单元的样式显示。添加scope属性可以让使用屏幕阅读器的人更好的“听懂”表格。这样可以轻松地做到让表格头与相应的数据单元格相关联，不过如果表格中有两种表头：标识着一行数据的表头和标识着一列数据的表头，这个表格对于使用屏幕阅读器的人来说仍然是不易理解的。我们使用scope属性表示表头应该如何发挥作用，以及它们是如何与单元格里的数据相关联。

示范代码：

—————————————-

<table border="0">
<tbody>
<tr>
<td></td>
<th scope="col">Webhosting Home</th>
<th scope="col">Webhosting Home Plus</th>
</tr>
<tr>
<th scope="row">Data usage</th>
<td>1 GB per month</td>
<td>2 GB per month</td>
</tr>
</tbody></table>

—————————————-

什么时候使用表格头的abbr（缩写）属性

你也可以使用abbr属性为表格的可及性做更多。 当然，表头很长的时候这是非常值得一用的。

<table>
<tr>
<td></td>
<th scope="col" abbr="Home">Webhosting Home for limited usage</th>
<th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
</tr>
...
</table>

为什么要添加标题？

标题（caption）为你的表格提供一个简单的描述。 对于使用屏幕阅读器的人来说这相当有用。它直接告诉用户这个表格是做什么用的。

<table>
<caption>Company X webhosting products overview</caption>
...
</table>

为何要添加简介（summary）?

对使用屏幕阅读器的人来说阅读表格是一件非常需要耐心的事，而有时候表格标题只能提供一小点提示。 在他们研究表格数据前给他们一些提示对他们来说会非常有用。 这能为他们节省很多时间。表格内容简介对他们自己花很多时间来读表格获得的信息有用得多。

1. <table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
2. <caption>Company X webhosting products overview</caption>
3. ...
4. </table>

CSS部分

现在我们来谈谈表格样式和颜色。我这里有两个例子：

• 第一个例子 的单元格只改变了背景颜色而没有添加背景图片。
• 第二个例子 使用了 背景图片

[这两个例子的颜色都不明显啊…… 仔细看才看得出差别]

为单元格添加样式

下面的代码中边框样式被加粗显示。border-collapse（边框合并）属性被定义成了collapse，这样就清除了单元格之间的间距。

1. table {
2. width:90%;
3. border-top:1px solid #e5eff8;
4. border-right:1px solid #e5eff8;
5. margin:1em auto;
6. border-collapse:collapse;
7. }
8. td {
9. color:#678197;
10. border-bottom:1px solid #e5eff8;
11. border-left:1px solid #e5eff8;
12. padding:.3em 1em;
13. text-align:center;
14. }

为表头添加样式

在下面的CSS代码中我用了一个类来定义单元格交替的颜色变换。不过你也可以 用一些简单的jacascript代码 实现这一效果，以避免添加这些额外的类，从而使代码特别特别的干净。我也为第一列添加了单独的样式，因为这一列需要有不同的样式效果和背景。

例子1的CSS代码

1. tr.odd td {
2. background:#f7fbff
3. }
4. tr.odd .column1 {
5. background:#f4f9fe;
6. }
7. .column1 {
8. background:#f9fcfe;
9. }

例子2的CSS代码

1. tr.odd td,
2. tr.odd .column1 {
3. background:#f4f9fe url(images/background.gif) no-repeat;
4. }
5. .column1 {
6. background:#f9fcfe;
7. }

定义thead和tfoot元素样式

我的表格顶部的表头添加了不同的样式：

1. thead th {
2. background:#f4f9fe;
3. text-align:center;
4. font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
5. color:#66a3d3;
6. }

对于表格底部的样式，我用strong标签重点强调了标题，用em标签强调了价格。

1. tfoot th {
2. background:#f4f9fe;
3. text-align:center;
4. }

下面的代码定义“真正”的表头的样式:

1. tfoot th strong {
2. font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
3. margin:.5em .5em .5em 0;
4. color:#66a3d3;
5. }

下面的代码定义显示价格的em元素的样式:

1. tfoot th em {
2. color:#f03b58;
3. font-weight: bold;
4. font-size: 1.1em;
5. font-style: normal;
6. }

背景图片的制作

在Photoshop里新建一个60乘200大小的图形文件，新建一个图层添加微妙的垂直渐变。 用浅蓝色做背景（这应该是和在CSS里将指定的背景色一样的颜色）并为高光部分选择一个更加明亮的蓝色。当单元格在垂直方向扩展时这个颜色将使背景不显得突兀。按住shift键从下向上拉一个渐变。

再建一个新图层， 选择画笔工具，确保其宽度为1像素。 同样是按住shift键，在图片最顶部和最左侧分别拉一条贯穿的直线。

好了，制作完成！希望您喜欢这个教程

©2007 笨活儿 | 永久链接 | 板凳还在 | 推荐到豆瓣

[译注: 可能你会说不翻译里面推荐的参考资料一切都是枉然，但是重要的是文章作者提供的学习思路。具体的参考内容你可以去Google相应知识的中文版。]

翻译不当的地方还请留言指正！

帮帮我！我不懂JavaScript [Help! I Don't Know JavaScript!]

June 5th, 2007, 作者 Michelle

为了帮助所有对Mootool有兴趣却碰上很多麻烦的人，我整理了这些能够教给你开始从事客户端应用开发所需的所有知识的网上资源。

职业必备工具

这些是从事Web开发的前提条件。

Firefox: 从事开发工作一定少不了Firefox。但你还需要在你的电脑（以及其他测试计算机）上安装好你打算兼容的所有浏览器，以方便进行跨浏览器支持测试。

必不可少的扩展

• Firebug: 有史以来最优秀的插件。Firebug让面对一大堆代码抓狂的你清楚地了解处理你的页面时浏览器内部都发生了些什么。
• Web Developer Toolbar: 赋予你全面掌控站点的伟大力量。禁用JavaScript，查看网页不带CSS时的样子，禁用访问来源，启用严格警告，以及更多。所有你能想到的Web Developer Toolbar都能给予。

学习基础知识

别因为不懂HTML就在学习Web开发的道路上止步!

How to Create

这地方非常棒，不仅详细介绍各种麻烦的细节，而且对语义化和实践优化方面的课题也有所涉及。 总的来说，是非常不错的人性化设计的基础知识概览。

• HTML
• CSS
• JavaScript

Mozilla开发者中心[MDC]

大概是网上最全面的Web开发信息中心了, 特别是关于Firefox或Mozilla的信息。她应该会成为您主要的参考资源。

• HTML
• CSS
• JavaScript
• 特别收录: DOM

W3 Schools

基本上W3 Schools 可以提供给您所有Web技术的快速参考，而且比W3C提供的原始参考文档要易读得多。 MDC虽然更好，但手边有一些快速参考资料总归要好得多。

• HTML
• CSS
• JavaScript

微软开发人员网络 [MSDN]

不要被他们的名字唬住了——JScript是和JavaScript一样的东西。如果没记错微软应该因为这一站点获得了一两个可用性方面的奖项。当你和IE的不规范做斗争时应该常来这里看看。

• HTML & CSS
• JavaScript

[译注：最近发现梦都网（中文）的HTML和CSS基础教程和参考文档很不错，建议看看]

其他资源

如果你有点好奇心，可以经常看一看 A List Apart ，了解一些巧思妙技。另外，请注意，Mootool在 strict doctype [严格文档类型]中使用最佳。译注：Doctype即XHTML文档头部声明指定的文档类型。一般是如下形式：

[html]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;[/html]

JavaScript详细

JavaScript，世上最酷的编程语言。 要想掌握JavaScript，首先您需要明白，它和 <此处用你最喜欢的编程语言代替>完全不同。当你明白了这一事实后，你可能会想要看看下面这些指导文章：

了解基础

现在来点轻松的。Yahoo的一些大好人为世人上传了很多普及性的视频教程。这真的是件大好事，因为我们对JavaScript的学习简单到了只需要花几个小时看这些聪明的伙计们讲话。

激动人心的 JavaScript三部曲

• JavaScript编程语言
  • 第一部分
  • 第二部分
  • 第三部分
  • 第四部分
• DOM的理论研究
  • 第一部分
  • 第二部分
  • 第三部分
• 高阶JavaScript
  • 第一部分
  • 第二部分
  • 第三部分

特别收录

• Nicholas Zakas谈可维护代码
• Joe Hewitt介绍Firebug

自食其力地进阶

一旦你已完成上面的学习，试着利用Google找寻您想知道的问题的答案，直到您能用原始的JavaScript代码编写出几个有趣的跨浏览器Ajax应用。没什么不可能的，用不了多久你就可以抛开Google自己动手了。我认为靠你自己的力量做点这些可以帮助你理解一个框架是如何实现应用的，以及这些丰富的应用背后的过程。

你可能也会觉得 JavaScript的知识鸿沟 是篇有意思的文章。

通过实例进行学习

如果你真的很想成为一个好的JavaScript代码编写者，最好的方式就是阅读已洞悉个中奥妙的人编写的代码。也就是说，你可能需要 浏览MooTools的源码 获得一些启迪。你不仅可以吸收很多好点子，通过这一过程，你还能更深层次的理解这一框架。

进阶到更高水平

现在是时候下载Mootools啦！如果你确实完成了我上面列举的大部分内容的学习，我们欢迎你到论坛上提问，在IRC聊天室里潜水，为Mootools社区做出您的贡献。 试试下载完整的，未经压缩的源码并将其应用于你的开发工作。看看当你对其做出修改时都会发生什么事。试着找出一些bug，提出相应的解决办法。做几个插件。但是请保证在为你的插件命名时让其看起来和Moo有关。

持续关注

常来这个blog逛逛，这里有调试代码时你所须知的一切以及一些让你与函数打交道的过程变得有趣的延伸阅读。

©2007 笨活儿 | 永久链接 | 已经有2条评论了 | 推荐到豆瓣