个人觉得无论是前端工程师还是后端工程师都值得一看。

via http://lifesinger.wordpress.com/2011/07/07/guide-to-fed/

这种特性一定程度上使 CSS 可以更为方便的定义样式，但同时也带来了一定的复杂性。例如，当多个样式作用于同一个元素，而且还是作用于同一个属性，元素最终会以何种方式来呈现样式呢？

参考下面这个例子：

p {
	color: black;
	background-color: white;
}
div.warning p {
	color: red;
}
div#caution p {
	color: yellow;
}
body#home div p {
	color: white;
}

此样式表中有 4 组选择器，且最终都指向 p 元素，并且每组样式中都有 color 属性。这样一来，可能的情况就是会有多个颜色属性，被施加于同一个 p 元素。问题来了，浏览器最终会以什么样的方式来渲染 p 的颜色呢？后定义的颜色会覆盖掉先定义的颜色吗？

这里就涉及到一个 CSS 选择器优先级的问题，如果有多个选择器作用于某元素的同一个属性，那么浏览器会去计算其对应选择器的优先级，并最终将优先级最高的那个选择器的样式作用于元素。

如何计算优先级呢？

优先级的计算通常遵循如下规则：

1. 如果某元素被设置了 style 属性，也就是说被设置了行内样式，那么此行内样式将拥有最高的优先级，任何其它外部样式都不能将其覆盖。如果没有被设置行内样式，那么参照下面的第 2 条规则。
2. 数一下选择器中 ID 选择器的个数，个数最多的，优先级就最高。如果 ID 选择器个数相同，或者压根儿就没有 ID 选择器，那么参照下面的第 3 条规则。
3. 数一下类选择器（如 .test）的个数，属性选择器（如 [type="submit"]）的个数，还有伪类选择器（如 :hover）的个数，然后将个数加起来，总数最多的，这组选择器的优先级就最高。如果总是一样多，或者都为 0，那么参照下面的第 4 条规则。
4. 数一下标签选择器（如 p）的个数，另外还有伪元素选择器（如 :first-letter）的个数，加起来，总数最多的，优先级就最高。

如果经过上面的计算，优先级还是一样高，那么遵循后出现的样式覆盖先出现的样式之规则。

现在回过头来看先前的例子，那四组选择器的优先级分别为 0001、0012、0102、0103，之所以把优先级数字化，是因为这样更方便比较。按照自然数法则（事实上它们并非自然数）来比较，1 < 12 < 102 < 103，这样一来，它们的优先级孰高孰低，就一目了然了。

具有简短写法的 CSS 属性很多，但是常用的属性无外乎字体、列表、背景、边框、透明等几种，所以在此对这几种属性的简短写法做个归纳，备忘。

font 属性

font 属性涉及到字体、字号、行高等好几个属性，使用简短写法的时候可以节省好多代码量。虽然并非所有属性都要定义，但是一般来说 font-size 和 font-family 是必不可少的，以下是 font 的几个属性与其对应的默认值：

/* font 各属性与默认值 */
font-variant: normal;
line-height: normal;
font-family: varies;
font-weight: normal;
font-style: normal;
font-size: medium;

以上 6 个属性可以合并成一行，根据 W3C 规范，各属性前后排列顺序依次为：

/* 字体各属性前后顺序 */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

再看以下几个示例：

font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

可以看到，一行代码就可以代替一段代码，而且看起来还更优雅一些，就是单独查找某个属性的时候有点不太方便，看着眼花。

list 属性

list 有三个属性，这三个属性分别定义：type、image 和 position，它们的属性名和默认值分别如下：

list-style-type: disc;
list-style-image: none;
list-style-position: outside;

list 只有三个属性，并不复杂，但是我们仍然可以将这三个属性合并为在一行中，根据 W3C 规范，写法如下：

/* list 属性简短写法 */
list-style: [list-style-type] [list-style-position] [list-style-image];

/* 示例 */
list-style: none;
list-style: disc;
list-style: disc outside;
list-style: disc outside url(bg.png);

一如既往的简单，基本上就是简写了 list 属性的名称，然后按顺序排列一下属性的值即可。

background 属性

很多样式表中都会多次定义 background 属性，每次都要重复其 5 个属性的话，那代码量可会成倍的增加呢。下面是其 5 个属性名及其默认值：

/* background 的各属性及其默认值 */
background-attachment: scroll;
background-color: transparent;
background-position: top left;
background-repeat: repeat;
background-image: none;

根据 W3C 规范，将其 5 个属性合并起来的写法如下：

/* background 属性简短写法 */
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

/* 示例 */
background: #777;
background: url(images/bg.png) 0 0;
background: #777 url(images/bg.png) repeat-x 0 0;
background: #777 url(images/bg.png) repeat-x fixed 0 0;

对于 background 简短写法而言，不同的标签的使用方法和效果都有一些细微差别，欲知详情者，请至官方文档查看。

border 属性

border 属性更为简单，它 3 个属性以及默认值如下：

/* border 各属性及其默认值 */
border-width: none;
border-style: none;
border-color: none;

根据 W3C 规范，其简短写法如下：

/* border 属性简短写法 */
border: [border-width] [border-style] [border-color];

/* 示例 */
border: 1px solid #111;
border: 2px dotted #222;
border: 3px dashed #333;

当然也可以为 4 个边框定义不同的样式：

border-bottom: 1px solid #777;
border-right:  2px solid #111;
border-left:   2px solid #111;
border-top:    1px solid #777;

结语

使用 CSS 简短写法一般都可以大大节省时间和代码量，如果还没开始使用的，赶紧使用，我担保你会越用越喜欢。

Via Top 5 CSS Shorthand Properties

可能不太够，对于 CSS 而言，还有很多灵活的使用方法。

本文将向你介绍一些常用的 CSS 选择器方法，其中有一些是 CSS3 选择器，只有比较新的浏览器才支持，但是这些新选择器同样要记住，因为像 IE6 之类旧浏览器终将被淘汰。

OK，开始。

1. *

* {
	margin: 0;
	padding: 0;
}

此星号将选择当前页面内所有标签，相信很多人都使用过这招来清空浏览器默认的 margin 和 padding，如果是在测试的时候，用这招当然没什么问题，但是在正式的产品中尽量不要这样用，据说它会大大加重浏览器的负担，而且也没必要清空所有标签的 margin 和 padding。

* 同样可以作为子选择器使用：

#container * {
	border: 1px solid black;
}

以上代码将为 ID 为 container 容器内所有标签加上一个像素宽的黑色实线边框。

2. #X

#container {
	width: 960px;
	margin: auto;
}

以 # 开头的选择器允许我们根据 ID 来选择标签，这种选择器最为常用。ID 选择器用法比较严格，对于一个 HTML 文档而言，不允许出现 ID 相同的标签，因此 ID 选择器只能选择一个标签。

3. .X

.error {
	color: red;
}

这个是类选择器，类选择器和 ID 选择器的区别是 HTML 中的类可以重复，也就是说通过类选择器可以选择多个标签，当 HTML 中的多个标签有共同特性时，可以把他们定义为一个类，这样在 CSS 中就可以很容易的选择它们。

4. X Y

li a {
	text-decoration: none;
}

这个一般称为后代选择器。例如，你并不像选择所有超链接，而只想选择 li 标签中的超链接，就可以用后代选择器。

5. X

a {
	color: red;
}

ul {
	margin-left: 0;
}

如果你想通过标签类型来选择页面上的所有标签，可以使用这种标签选择器。例如，你想要选择页面上所有超链接，可以使用 a { }。

6. X:visited 和 X:link

a:link {
	color: red;
}
a:visited {
	color: purple;
}

这是伪类选择器，我们可以使用 a:link 来选择所有没被点击过的超链接，也可以用 :visited 来选择所有被点击过或访问过的超链接。

7. X + Y

ul + p {
	color: red;
}

这个可以称为邻近选择器，以上面的代码为例，它只能选择紧跟着 ul 的 p 标签，而且只有 ul 后面的第一个 p 会被选中。

8. X > Y

div#container > ul {
	border: 1px solid black;
}

X > Y 和 X Y 的不同之处前者只能选择 X 的直接后代。例如如下标签：

<div id="container">
	<ul>
		<li> List Item
			<ul>
				<li> Child </li>
			</ul>
		</li>
		<li> List Item </li>
		<li> List Item </li>
		<li> List Item </li>
	</ul>
</div>

基于以上 HTML 代码，#container > ul 选择器只能选择 id 为 container 的 div 下面的 ul，而 li 下面的 ul 却选择不到。

9. X ~ Y

ul ~ p {
	color: red;
}

这种选择器和 X + Y 有相似之处，但是又没有 X + Y 严格，对于邻近选择器（ul + p）而言，只能选择紧跟着 ul 的第一个 p 标签，而 ul ~ p 却可以选择 ul 后面的所有 p 标签。

10. X[title]

a[title] {
	color: green;
}

这个称为属性选择器，例如上面的代码，只能选择出具有 title 属性的超链接。

11. X[href="foo"]

a[href="http://akasuna.com"] {
	color: #1f6053;
}

上面的 CSS 代码，只会选择链接到 http://akasuna.com 的超链接设置为绿色，而其它超链接则不受影响。如果你想为指向不同站点的超链接指定不同的颜色，这是个好方法。

12. X[href*="akasuna"]

a[href*="akasuna"] {
	color: #1f6053;
}

这种方法更为常见，*= 表示指定的字符串必须出现在属性的值里面，这样一来，akasuna.com，demo.akasuna.com，bbs.akasuna.com 甚至是 akasuna2.com 都将被此选择器选择到。

13. X[href^="http"]

a[href^="http"] {
	background: url(path/to/external/icon.png) no-repeat;
	padding-left: 10px;
}

有些网站会在超链接的旁边显示一个图标来表示此链接为外部链接，估计大多数人都见过这样的设计，此图标用来提醒访客，点击此链接将打开另外一个完全不同的网站。

其实要做到这点也很容易，只要判断一下超链接地址的开头部分就行了，如果超链接的 href 属性是以 http 开头的，那么就说明它是外部链接，就像上面的代码那样。

注意：我们这里判断的是 http 而非http://，一是没必要，二是为了兼顾 https:// 之情况。

另外，使用这种方法的话，有一个前提，所有内部链接都用相对路径而非绝对路径，这样才能保证内部链接不是以 http 开头。

如果我们要为那些链接向图片的超链接设置特定的样式呢，这种情况就要判断超链接地址的末尾部分了。

14. X[href$=".jpg"]

a[href$=".jpg"] {
	color: red;
}

使用 $，表示的是字符串的末尾部分，这里我们要查找那些链接向图片的超链接，也就是 url 地址是以 .jpg 结尾的那些。注意，这里没有考虑 .gif 和 .png 的情况。

15. X[data-*="foo"]

a[data-filetype="image"] {
	color: red;
}

接着上面的第 14 条，如果我们兼顾各种图片格式，例如：png，jpg，jpeg，gif，又该怎么办呢？你可能会想到下面这种方法：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
	color: red;
}

但是这样写起来稍微有点痛苦，而且低效。其实我们这里可以使用自定义属性，为所有指向图片的超链接添加一个属性 data-filetype，如：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

然后就可以在 CSS 里面使用标准的选择器来选择这些超链接了。

a[data-filetype="image"] {
	color: red;
}

16. X[foo~="bar"]

a[data-info~="external"] {
	color: red;
}

a[data-info~="image"] {
	border: 1px solid black;
}

参照上面的第 15 条那个自定义属性，我们可以创建一个 data-info 属性，这个属性值可以接收多个值:

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

这样一来，通过一个属性就可以表达两层意思：1. 它是外部链接；2. 它是指向图片的链接。然后就可以用 CSS 分别对此超链接设置样式：

/* 选择 data-info 属性中包含有 "external" 的那些超链接 */
a[data-info~="external"] {
	color: red;
}

/* 选择 data-info 属性中包含有 "image" 的那些超链接 */
a[data-info~="image"] {
	border: 1px solid black;
}

17. X:checked

input[type=radio]:checked {
	border: 1px solid black;
}

又是一个伪类选择器，它能选择那些被选中的标签，例如单选框、复选框等，用起来应该很简单。

18. X:after

这个不是伪类，而是伪元素，对应的还有 :before，从字面上看，它们分别表示元素的前面和后面，实际上它们的功能是在元素的前面或后面添加内容，需要和 CSS 的 content 属性配合使用，如：

h1:after {
	content:url(logo.gif)
}

在显示时，标题内容后会插入一张图片，这就是伪元素 :after 的作用。

19. X:hover

div:hover {
	background: #e3e3e3;
}

拜托，这个大家都会的，它表示当鼠标在元素上悬停时的样式。

注意：在老版本 IE 中，这个伪类只对超链接有效，对其它任何元素无效！

常见的用法是，当鼠标悬停的找链接上的时候，给超链接设置一个底部边框：

/* order-bottom: 1px solid black; 的效果看起来比 text-decoration: underline; 要好一些 */
a:hover {
	border-bottom: 1px solid black;
}

20. X:not(selector)

div:not(#container) {
	color: blue;
}

嗯，这个伪类选择器比较有用。试想一下，如果你要选择页面中除了 id 为 container 之外的所有 div，这段代码应该就是你想要的。

或者，你想要选择页面中除了 p 标签外的所有标签：

*:not(p) {
	color: green;
}

但是这应该很少用到。

21. X::pseudoElement

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

我们可以使用伪元素（这里用的是 :: 哦）为元素的某部分设定样式，例如段落的第一行，或者第一个字母。切忌，这种方法只对块级元素起作用。

为段落的第一个字母设定样式：

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right: 2px;
}

这段代码将为页面上所有段落设置首字下沉的效果，这种样式在报纸上经常可以看到。

22. X:nth-child(n)

li:nth-child(3) {
	color: red;
}

nth-child 伪类选择器以一个整数作为参数，不包括 0，要从 1 开始。如果你想选择列表元素中的第 2 个，可以使用 li:nth-child(2)。

这个方法当然也可以用来选择多个元素，例如 li:nth-child(4n) 就可以用来选择列表元素中的第 4 个，第 8 个，第 12 个 ……（4 的倍数）。

23. X:nth-last-child(n)

li:nth-last-child(2) {
	color: red;
}

如果一个 ul 中的有 400 个条目，而你只想选择其中的倒数第 2 个，该怎么办呢？

相比 li:nth-child(399) 而言，nth-last-child(2) 也许更为适合。

24. X:nth-of-type(n)

ul:nth-of-type(3) {
	border: 1px solid black;
}

有时候，你不是想选择 ul 中的第 3 个 li，而是想选择第 3 个 ul，而这些 ul 又没有 id， 该怎么办呢？

此时应该使用 nth-of-type(n)，上述代码将为页面中的第三个 ul 设置一个 1 个像素的黑色边框。

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
	border: 1px solid black;
}

请参照第 23 条中的 nth-last-of-type 自行理解。

26. X:first-child

ul li:first-child {
	border-top: none;
}

这个伪类用来选择父元素中的第一个子元素，对应的还有 X:last-child。你可以用它来删除列表中第一个元素和最后一个元素的边框。

例如，有一个列表，如果列表中每个元素都有一个 border-top 和 border-bottom，那么第一个元素和最后一个元素的边框看起来就有点多余了。

很多人都会想到为第一个元素和最后一个元素分别设置一个 first 和 last 类名称，然后通过这个类名称清楚他们的边框。这样当然也是可以的，但是用伪类同样也可以达到效果，具体请看下面的第 27 条。

27. X:last-child

ul > li:last-child {
	color: green;
}

和 first-child 对应，last-child 用来选择父元素中的最后一个子元素。结合上面的第 26 条，有如下示例：

HTML 代码

<ul>
	<li> List Item </li>
	<li> List Item </li>
	<li> List Item </li>
</ul>

CSS 代码

ul {
	width: 200px;
	background: #292929;
	color: white;
	list-style: none;
	padding-left: 0;
}

li {
	padding: 10px;
	border-bottom: 1px solid black;
	border-top: 1px solid #3c3c3c;
}

这段 CSS 代码为列表设置了背景色，消除了 ul 默认的内边距，并对每个 li 设置了边框，边框颜色深于 ul 的背景色。

问题来了，正如图片上所示，此无序列表的最顶端和最低端也有边框，这看起来有点不爽。下面我们用 :first-child 和 :last-child 来解决这个问题：

li:first-child {
	border-top: none;
}

li:last-child {
	border-bottom: none;
}

效果如图所示，最顶端和最低端的边框没有了，问题解决了。

28. X:only-child

div p:only-child {
	color: red;
}

实际上，你可能会发现 only-child 这种伪类并不常用，但是在某些场合，你还非用它不可。

only-child 用来选择那些是父元素中唯一的子元素的元素（独生子女！）。例如上面的代码，如果某个 div 中只有一个段落，那么这个段落将会以红色字体显示，如果有多个段落，则不受影响。

看下面的 HTML 代码：

<div>
	<p> My paragraph here. </p>
</div>

<div>
	<p> Two paragraphs total. </p>
	<p> Two paragraphs total. </p>
</div>

这段 HTML 代码中，第二个 div 中有 2 个段落，这两个选择器不会被此选择器选择到；而第一个 div 中只有 1 个段落，因此这个段落是 only-child，它会以红色字体显示。

29. X:only-of-type

li:only-of-type {
	font-weight: bold;
}

跟第 28 条类似，都是选择子元素。区别是：第 28 条中，选择的是唯一子元素（独生子女，不管是男的还是女的，反正只有一个）；而第 29 条中，选择的是某类型的唯一元素（可以有多个孩子，但是性别不能相同，假如是两男一女，那么这个唯一女性将被选择到）。

30. X:first-of-type

first-of-type 伪类选择的是相同类型元素中的第一个元素。

为了便于理解，不妨来做个测试，请将如下代码拷贝至文本编辑器中：

<div>
	<p> My paragraph here. </p>
	<ul>
		<li> List Item 1 </li>
		<li> List Item 2 </li>
	</ul>

	<ul>
		<li> List Item 3 </li>
		<li> List Item 4 </li>
	</ul>
</div>

此时，如果让你用 CSS 选择 List Item 2，该如何做呢？

方案一：

有多种方法可以达到效果，先来看第一种，使用 first-of-type

ul:first-of-type > li:nth-child(2) {
	font-weight: bold;
}

这段代码的意思是，先找到页面中的 ul，找到了 2 个 ul，那么选择第 1 个，然后再此无序列表中选择第 2 个 li。

方案二：

第二种方法是用邻近选择器

p + ul li:last-child {
	font-weight: bold;
}

找到紧跟着 p 元素的 ul，然后选择此 ul 中的最后一个 li 即可。

方案三：

ul:first-of-type li:nth-last-child(1) {
	font-weight: bold;
}

跟方案一类似，先找到第一个 ul，然后找到其倒数第一个 li。

结语

如果你在使用如 IE 6 之类的低版本浏览器，那么以上有些比较新 CSS 选择器可能不适合。但是不要因为自己使用的是低版本浏览器，就不学习这些新的 CSS 选择器，不学的话吃亏的还是自己。这里有一个浏览器兼容性列表，另外你也可以使用 Dean Edward 的 IE9.js 让你的低版本 IE 支持一些IE9 的特性。

另外，当使用一些如 jQuery 之类的 JS 库的时候，尽量在使用过程中用标准的 CSS3 选择器，而非 JS 库自定义的选择器，如果可能的话，JS 库使用浏览器自身的 CSS 解析器，比使用 JS 库自定义的解析器 速度更快。

本文翻译自 The 30 CSS Selectors you Must Memorize，并稍作修改。基本上每种选择器都有对应的 DEMO，请至原文查看。

$(document).ready(function() {
    // 从这里开始
});

但是在看其他人写的 jQuery 代码的时候，经常又会看到如下写法：

$(function() {
    // 从这里开始
});

第二种写法虽然简短了许多，但是在功能上和第一种写法是等价的，如果你不相信，可以看一下 jQuery 的源代码中有如下代码片段：

// HANDLE: $(function)
// Shortcut for document ready  
if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

如果传入选择器中的参数是一个函数，那么会自动返回一个 rootjQuery.ready( selector )，而 rootjQuery 又是 jQuery(document) 的一个引用，所以这里就相当于调用 jQuery(document).ready() 方法，而之前的那个匿名方法亦被传入其中以备执行。

这种简短写法虽说减少了了一点代码量，但是可读性稍差，所以我个人还是倾向于前面的第一种写法，特别是在团队开发中，仅仅是为了语意明确。

难道说 JavaScript 中的 var 是个多余的东西吗？显然不是！

请看下面这段代码：

str1 = 'Hello JavaScript!';
function fun1() {
	str1 = 'Hello Java!';
}
fun1();
alert(str1);

// 弹出 Hello Java!

可以看到，在函数 fun1 被调用后，str1 的值在函数内被改变了。

再将上面的代码稍作修改：

str1 = 'Hello JavaScript!';
function fun1() {
	var str1 = 'Hello Java!';
}
fun1();
alert(str1);

// 弹出 Hello JavaScript!

看到没有，str1 的值并没有被函数 fun1 改变。

显然，var 关键字影响了变量的作用域。

函数外部：变量不管是否用了 var 申明，都是全局变量。

函数内部：变量如果没有使用 var 关键字申明，那它就是全局变量，只有用 var 关键字申明了，才是局部变量。

结论

为了避免潜在的风险，务必使用 var 关键字来申明变量。

TwentyTen 是一个不错的主题，并且能通过 W3C 的 HTML5 验证，但是奇怪的是，这个新的 TwentyTen 主题，除了声明了文档类型为 HTML5，基本上没有使用多少 HTML5 所带来的新特性，仅仅在 HTML 文档顶部加上一行 <!doctype html> 而已。

不过现在有些比较激进的开发者，对 TwentyTen 进行了改进，使用了不少 HTML5 的新特性。

改进的细节

• 将日志包含在 <article> 里面。
• 将日志的元数据中的发布日期包含在 <time> 里面。
• 使用 <figure> 和 <figcaption> 来处理日志中的图片。
• 日中评论表单中对于输入内容的一些验证，如 E-Mail 为必输，E-Mail 地址格式验证等。
• 使用 <header>， <nav> 和 <footer> 分别标记页眉，导航菜单和页脚。
• …………

下载

愿意尝鲜或做小白鼠的同学，可以去下载这个主题试试看，下载地址：http://www.twentytenfive.com/

1. 存储空间

存储空间的大小，意味着你可以往你的网站上放多少东西。对于中小型网站而言，一般来说几个 GB 的空间应该足够使用了，虽然也有少数主机商申明“无限空间”，但当你真正使用的时候，你会发现，那只是他们宣传的噱头，因为他们一般会限制文件的数量，当文件数量超过一定额度的时候，他们就会通知你进行清理。Bluehost.com 虽然广告上打的是不限制空间大小，但实际上文件数量限制好像是 50000 左右，且文件总大小不超过 30GB，虽说不是无限的，但显然已经足够使用。

2. 月流量限制以及网速

什么是月流量限制，就是你的网站访客在你网站上所上传的和下载的总数据量。假设主机商给你的月流量限制是 10GB 的话，再假设你的单个网页平均大小是 100KB 的话，用户每访问一次网页，就将从服务器上下载 100KB 的数据，那么你的网站每个月可以访问的次数就大约为 10 万多次，当然这还没有考虑到上行的流量。需要特别说明的是，一般不要在服务器上放 MP3 之类的文件，因为一旦你的 MP3 文件被搜索引擎索引到了，而且这首歌还很流行，那么这个 MP3 文件每天都可能被访问数成千上万次，最终结果就是你的流量会很快的被用完。

关于网速，也就是访客打开您网站的速度，一般来说主机商都有自己的机房或者托管在网络供应商的机房，速度都不会慢。区别在于如果你选择的是国外的主机商，那么由于地理因素，网速可能会比国内的主机上慢一些，但是也不是非常慢，从我这里 ping Bluehost.com 的服务器，一般都在 200ms 以内，虽然不是非常快，但是已经足够快了。

3. 可绑定的域名数量

可绑定域名数量，也就是你可以在这个主机上放几个网站。假如你想做 3 个网站，分别为 abc1.com / abc2.com / abc3.com，那你没有必要买 3 个主机，如果你的主机支持绑定多个域名的话，你只需将这 3 个域名绑定到这个主机上就可以了，这显然大大降低了你建站的成本，如果再多找几个朋友入伙且想他们收取少量费用，利用这个挣点钱也是可以的。一般国外的虚拟主机都支持绑定多个域名，而国内主机商一般都只能绑定一个域名，这个需要鄙视一下。另外，如果你的域名没有备案，国内主机商好像还不允许绑定。Bluehost.com 宣称不限制绑定域名数量，但还是那句话，你不可能去绑定 10000 个域名上去吧，够用即可。

4. 企业邮箱

什么是企业邮箱？就是说，如果你的域名是 abc.com，那么你可以在这个主机上建立诸如 xxx@abc.com 这样的邮箱，太酷了吧！一般来说，主机商都支持这项功能，而且都有自己的 webmail 接口，当然大多数时候我们还是会使用 Outlook 或 FoxMail 之类的工具去访问邮箱，因为企业邮箱都支持 SMTP 和 POP3，这个一般没有问题。问题在于，可以建立多少个邮箱账户呢？国内主机商支持的数量一般都很少，可能都不超过 10 个，国外的主机商则比较大方，一般都可建立上百个账户，Bluehost.com 的广告上则是不限制邮箱账户数量。

5. 编程语言方面的支持

如果你要建个动态网站，那么就必须在服务端使用动态语言，如 PHP / JSP / ASP / ASP.NET。有些编程语言是可以跨平台的，有些则不能。Linux 和 Windows 都支持 PHP，而 ASP / ASP.NET 则只能在 Windows 上运行。选择虚拟主机之前，这个需要考虑清楚。Bluehost.com 支持 PHP / Ruby，不支持 ASP / ASP.NET，因为 Bluehost 不提供 Win 系列主机。

6. 数据库方面的支持

现在，几乎任何一个网站都需要数据库的支持，所以选择主机的时候，一定要确定好你的网站需要什么样的数据库。一般来说现在虚拟主机都支持 MySQL 数据库，当然也有可能同时支持 PostsgreSQL，对于 Win 系列的虚拟主机，可能支持Access 多一些，而且这些一般都是免费提供的。如果你需要大型数据库，可能需要 Oracle 或 MS SQL Server，不过可能需要另外付钱，而且价格不菲。Bluehost.com 支持 MySQL 和 PostsgreSQL，且最多支持 100 个数据库。

7. 主机管理：控制面板 & SSH

拥有了自己的主机，这么管理呢。国外的主机商一般都提供 CPanel 给用户来管理自己的主机，你可以在上面很方便的上传、下载
管理文件、管理域名、管理数据库、管理邮箱账户、管理 FTP 账户，一般来说只要是主机所具备的功能，控制面板上面全都可以完成，且操作简便，也有一些主机商没有提供 CPanel，而是自己开发的面板，不过使用起来也很方便。而且对于国外规模比较大的主机商，他们的面板一般也提供中文的界面。这里提供一个 CPanel 的 DEMO，有兴趣的朋友可以体验一下。

另外还有一点就是 SSH 功能，一般 Linux 系列主机都会提供，如果你对 Linux 命令熟悉的话，你也可以用 SSH 访问你的主机，管理你主机上的文件等。。对于 SSH 而言，还可以另外做很多事情（看 youtube？），需要自己去发掘。

8. 自动备份

虽说主机商使用的一般都是大型计算机，稳定性应该不错，他们也会花很多精力去维护，但也不能绝对保证他们的服务器不会出故障，所以网站的文件还有数据库以及邮件等内容的备份很重要。所以选择主机的时候，看他们是否提供网站自动备份的功能，如果有，很好；如果没有，你就需要定期自己去备份了。

9. 免费域名

对于有些主机商而言，如果你购买他们的主机，他们会免费赠送一个域名给你，只要你一直使用他们的主机，他们就会自动给这个域名续费，而且这个域名的所有权是属于你的，控制权也在你手里，你甚至可以很方便的将其转出到其他域名商那里。虽说域名价格只有大概 10$/年，一点也不贵，但是白送的，不要白不要。

10. 技术支持方面

这一点非常重要，因为做网站这种技术性的工作，经常会遇到问题，而有些问题可能你自己无法解决，需要寻求主机商的帮助。所以购买主机前确定好他们提供什么样的技术支持，邮件支持/电话支持/IM支持？响应是否及时？还有一个问题需要注意：对于国内的主机商而言，由于大家都是中国人，所以不论是电话还是邮件，沟通起来会很方便，但是如果你选择的是国外的主机商，那么你最好要会点英文。Bluehost.com 支持 7*24小时 电话、邮件、LiveChat 方式的技术支持，我一般使用 LiveChat，相当之方便。

总结

当然，决定虚拟主机好坏的因素还很多，但上面列出的都是一些常见的因素。事实上，你也不可能找到方方面面都另你十分满意的主机，所以说，只要能满足你大部分的需求，就 OK 了。还有一点，虚拟主机的性能一般不会太强悍，所以如果你需要搭建大型网站，可能就需要寻求 VPS 或者独立主机了。

<员工>
	<姓名>麻花疼</姓名>
	<性别>男</性别>
	<年龄>40</年龄>
	<职位>疼逊CEO</职位>
</员工>

下面本文简单介绍如何使用 jQuery 载入一个 XML 文件并从中获取自己想要的数据。

准备 XML 文档及测试数据

假设我们现在要构建一个包含人员信息的 XML 文档，该 XML 文档要能反映其姓名、所在公司、公司简介、公司产品简介几个信息，那么我们可以把 XML 设计成如下样式：

<?xml version="1.0" encoding="utf-8" ?>
<Persons>
	<Person FullName="Bill Gates">
		<Corporation>Microsoft</Corporation>
		<Description>The largest software company</Description>
		<Products>Windows series OS, SQL Server Database, XBox 360...</Products>
	</Person>

	<Person FullName="Jobs">
		<Corporation>Apple</Corporation>
		<Description>The famous software company</Description>
		<Products>Macintosh, iPhone, iPod, iPad...</Products>
	</Person>

	<Person FullName="Larry Page">
		<Corporation>Google</Corporation>
		<Description>the largest search engine</Description>
		<Products>Google search, Google Adsense, Gmail...</Products>
	</Person>
</Persons>

简单分析一下这个 XML 文件，其中第一行 <?xml version="1.0" encoding="utf-8" ?> 是声明此文档为 XML 文档，且文本编码为 utf-8。第二行及最后一行 Persons 为文档的根元素，然后每个 Person 元素即表示每个人，姓名存储在 Person 元素的 FullName 属性中，Corporation 元素用来存储所在公司名称，Description 元素用来存储公司简介，Products 元素用来存储公司产品简介。至此，该文档里面包含了比尔·盖茨、乔布斯、拉里·佩奇三位 IT 界大佬的信息。

用 jQuery 解析此 XML 文档

首先要用 $.get() 方法载入 XML 文件，然后用 find() 方法找到所有 Person 元素，再用 each() 方法进行遍历，代码如下：

<script type="text/javascript">
jQuery(document).ready(function() {
	/* 先用 $.get 方法载入 XML 文件 */
	$.get("EmployeesInformation.xml", function(xmlData) {
		/* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */
		var htmlData = "<table border='1'>";

		/* 找到 Person 元素，然后用 each 方法进行遍历 */
		$(xmlData).find("Person").each(function() {
			var Person = $(this); /* 将当前元素复制给 Person */
			var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
			var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
			var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
			var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

			/* 将得到的数据，放到表格的一行中 */
			htmlData += "<tr>";
			htmlData += "	<td>" + FullName + "</td>";
			htmlData += "	<td>" + Corporation + "</td>";
			htmlData += "	<td>" + Description + "</td>";
			htmlData += "	<td>" + Products + "</td>";
			htmlData += "</tr>";
		});

		//完成表格字符窜
		htmlData += "</table>";
		//将表格放到 body 中
		$("body").append(htmlData);
	});
});
</script>

简单解释一下这段代码，由于此 XML 文档相对简单，所以这段代码也比较简短，代码中 $.get() 方法的第一个参数为 XML 文件地址，第二个参数是一个回调函数，回调函数中参数 xmlData 即为 XML 文件中的数据。在此示例中，我们打算 XML 中的数据以表格的形式显示在 HTML 中，所以先构建一个表格字符串 htmlData 先。

紧接着，用 find() 方法，找到所有名为 Person 的元素，因为每个 Person 元素即表示一个人，然后再用 each() 方法进行遍历，把遍历到的元素赋个一个变量 Person。用 Person.attr() 方法去除元素的 FullName 属性，也就是人员的姓名，再用 find() 方法找到其子元素 Corporation，Description 和 Products 并返回它们的文本内容，并用 tr 和 td 标签将它们包装在表格的一个行里面。最后完成表格字符串，并将表格添加到 body 标签中，最终效果图如下：

XML 预览地址，HTML 预览地址

利用 Ajax 获取异步数据

1. 传统 Ajax 方法
传统 Ajax 一般步骤为：

1. 创建 XMLHttpRequest（需兼容各种浏览器）。
2. 向服务器发送 XMLHttpRequest 请求。
3. 监测 XMLHttpRequest 的 onreadystatechange 事件。
4. 判断服务端是否响应完成及响应结果是否正常。
5. 获取 Ajax 从服务端返回的结果。

例如用 Ajax 获取服务器上的当前时间，示例代码如下：

<html>
<head>
<title>Traditional Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function getDateTime() {
	var xmlHttp;
	if (window.XMLHttpRequest) {
		// For IE7+, Firefox, Chrome, Opera, Safari
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		// For IE6, IE5
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
			document.getElementById("timediv").innerHTML = "现在时间" + xmlHttp.responseText;
		}
	}
	xmlHttp.open("GET", "ajax.php", true);
	xmlHttp.send(null);
}
</script>
</head>
<body>
	<div id="timediv">现在时间</div>
	<br /><input type="button" value="测试传统的 Ajax" onClick="getDateTime()" />
</body>
</html>

服务端代码为：

<?php
	//服务器端为格林尼治标准时间，这里需设置为中国所在时区
	date_default_timezone_set("PRC");
	echo date("Y-m-d H:i:s");
?>

可以看到，仅仅实现如此简单的功能，代码却如此冗长，特别是创建 XMLHttpRequest 的时候，还要兼容多种浏览器，另外还要监测 XMLHttpRequest 的 onreadystatechange 时间，以及返回的 readyState 和 status 状态，稍显麻烦。

2. jQuery 的 Ajax 方法
如果将上面的代码改写为 jQuery 的 Ajax 方法，代码如下：

<html>
<head>
<title>Traditional Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
function getDateTime() {
	$("#timediv").load("ajax.php");
}
</script>
</head>
<body>
	<div id="timediv"></div>
	<br /><input type="button" value="测试 jQuery 的 Ajax" onClick="getDateTime()" />
</body>
</html>

可以看到，jQuery 的 Ajax 方法，主要代码只有一行 $("#timediv").load("ajax.php");，相当之简单，而且绝对兼容各种主流浏览器。从这个例子可以看出，jQuery 大大的简化了 Ajax 的编码方式。

GET 还是 POST ？

上面的例子中的 load 函数固然方便，但是我们还是经常要指定 jQuery 到底是用 GET 方法还是 POST 方法，使用方法如下：

1. $.get(url, [data], [callback])
2. $.post(url, [data], [callback], [type])

GET 和POST 的使用方法基本相同，参数 data 为向服务器发送的数据，callback 为回调函数，type 用来指定服务器返回的数据类型，如纯文本、XML、JSON 等。

下面来看具体例子：

<html>
<head>
<title>jQuery Ajax (get and post)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script>
<script type="text/javascript">
$(document).ready(function() {
	// 为 GET 按钮添加事件
	$("#getbtn").click(function() {
		$.get("ajaxpage.php", {username:$("#username").val()}, function(data) {
			$("#ajaxdata").html(data); // 将服务端返回的数据填充到 P 标签中
		});
	});

	// 为 POST 按钮添加事件
	$("#postbtn").click(function() {
		$.post("ajaxpage.php", {username:$("#username").val()}, function(data) {
			$("#ajaxdata").html(data); // 将服务端返回的数据填充到 P 标签中
		});
	});
});
</script>
</head>
<body>
		你的大名：<input type="text" id="username" /><br />
		<input type="button" id="getbtn" value="GET 方法" /><br />
		<input type="button" id="postbtn" value="POST 方法" />
		<p id="ajaxdata"></p>
</body>
</html>

服务端代码为：

<?php
	// 服务器端为格林尼治标准时间，这里需设置为中国所在时区
	date_default_timezone_set("PRC");

	$username = "";
	$ajaxMethod = "";

	// 判断是 GET 还是 POST
	if(isset($_GET["username"])) {
		$username = $_GET["username"];
		$ajaxMethod = "GET";
	} else {
		$username = $_POST["username"];
		$ajaxMethod = "POST";
	}

	echo "你好，" . $username . ", 现在时间为：" . date("Y-m-d H:i:s"). "，此数据来源于 " . $ajaxMethod . " Ajax";
?>

可以看到，jQuery Ajax 的 GET 方法 和 POST 方法，使用起来依然相当之方便。

控制 Ajax

GET 和 POST 方法以及前面提到的 load 方法，使用起来虽然十分实用，但是某些时候却过于简单，很多时候我们都需要更多的控制 Ajax 的细节，jQuery 同样提供了一些方法来控制 Ajax 的细节，主要通过 $.ajax(options) 方法来实现，请看下面的代码片段：

<script type="text/javascript">
$(document).ready(function() {
	// 为 GET 按钮添加事件
	$("#getbtn").click(function() {
		$.ajax({
			type: "GET",
			url: "ajaxpage.php",
			data: {username:$("#username").val()},
			timeout: 3000,
			error: function() {
				alert("error!");
			},
			success: function(data) {
				// 回调函数，将返回的数据添加到 P 标签中
				$("#ajaxdata").html(data);
			}
		});
	});

	// 为 POST 按钮添加事件
	$("#postbtn").click(function() {
		$.ajax({
			type: "POST", // Ajax 提交方式
			url: "ajaxpage.php", // 提交页
			data: {username:$("#username").val()}, // 要提交的数据
			timeout: 3000, // 超时设置，单位为毫秒
			error: function() { // Ajax 发生错误时
				alert("error!");
			},
			success: function(data) {
				// 回调函数，将返回的数据添加到 P 标签中
				$("#ajaxdata").html(data);
			}
		});
	});
});
</script>

上面例子中，$.ajax(options) 中的 options 条目是可选的，并不是每个参数都要设置。对于有些参数而言，例如 timeout 和 error 在某个项目中是固定不变的，那么就没必要在每个 Ajax 代码中都写，可以用 jQuery 提供的全局 Ajax 设置的方法来设置一下，设置方法如下：

<script type="text/javascript">
$(document).ready(function() {
	// 全局 Ajax 设定，这里的设置将对本页面所有 Ajax 方法适用
	$.ajaxSetup({
		url: "ajaxpage.php", // Ajax 提交页
		timeout: 3000, // 超时设置，单位为毫秒
		error: function() { // Ajax 发生错误时
			alert("error!");
		}
	});

	// 为 GET 按钮添加事件
	$("#getbtn").click(function() {
		$.ajax({
			type: "GET",
			data: {username:$("#username").val()},
			success: function(data) {
				// 回调函数，将返回的数据添加到 P 标签中
				$("#ajaxdata").html(data);
			}
		});
	});

	// 为 POST 按钮添加事件
	$("#postbtn").click(function() {
		$.ajax({
			type: "POST", // Ajax 提交方式
			data: {username:$("#username").val()}, // 要提交的数据
			success: function(data) {
				// 回调函数，将返回的数据添加到 P 标签中
				$("#ajaxdata").html(data);
			}
		});
	});
});
</script>

上面例子中，在全局设定里面设置好了的参数，在整个页面中都会生效，这个功能可以大大的减少重复的代码。

以上这些就是 jQuery Ajax 的几种简单使用方式，而且上面的几个例子中服务器返回的数据都是纯文本，如果是在复杂的 Ajax 应用中，可能就需要用到 XML 或者 JSON 了。