目录：

第一章 HTML 5 的技术要点... 3

1. 地理位置API 3

1.1 简介：... 3

1.2 获取地理位置的方式及其优缺点：... 3

1.3 地理位置获取流程：... 3

1.4 浏览器支持的情况：... 3

1.5 浏览器支持的检查方法：... 3

1.6 位置请求方式：... 4

1.6.1 单次请求... 4

1.6.2 重复请求... 5

2. HTML5 离线功能... 5

2.1 简介：... 5

2.1.1 离线资源缓存：... 5

2.1.2 在线状态检测：... 5

2.1.3 本地数据存储（Web Sotrage API）：... 5

2.2 浏览器支持的情况：... 6

3. Audio和Video标签... 6

3.1 各浏览器对编码格式的支持：... 6

3.2 浏览器支持的检查方法：... 6

3.3 标签使用方法：... 6

4. WebSocket API 7

4.1 简介：... 7

4.2 浏览器支持的情况：... 7

4.3 浏览器支持的检查方法：... 8

5. 跨文档消息机制（Cross Document Messaging）... 8

5.1 简介：... 8

5.2 浏览器的支持情况：... 8

5.3 浏览器支持的情况：... 8

6. XMLHttpRequest Level 2. 8

6.1 简介：... 8

6.2 浏览器支持情况：... 9

6.3 浏览器支持的检查方法：... 9

7. Web Worker API 9

7.1 简介：... 9

7.2 浏览器支持的检查方法：... 9

8. 其他HTML5支持的特性（部分未广泛支持）... 10

9. 总结... 10

第二章 jQuery Mobile. 10

1. 四大主流移动Web开发框架... 10

1.1 iUI: 10

1.2 jQTouch: 10

1.3 Sencha Touch：... 10

1.4 jQuery Mobile: 11

2.使用 jQuery Mobile. 11

2.1 简介：... 11

2.2 整合jQuery Moblie + Google Maps API v3的界面... 12

提纲：

1. Web App 开发之：HTML 5 技术要点 和 CSS 3 特性

2. Web App 开发之：CSS 3 特性

3. Web App 开发之：移动Web开发框架（jQuery Mobile）

第一章 HTML 5 的技术要点

1. 地理位置API

1.1 简介：

HTML5通过Geolocation API来支持检测用户位置。根据你的需求它提供了单次的位置接收以及持续的位置接收。

1.2 获取地理位置的方式及其优缺点：

1、ip地址

2、GPS

3、WiFi基站的mac地址。（连接位置已知的公共WiFi的时候，通过Mac地址识别WiFi接入点，从而定位)

4、 GSM或CDMA基站

1.3 地理位置获取流程：

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问窗口，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

1.4 浏览器支持的情况：

当前版本的 Chrome、Firefox、Opera、Safari都支持，但IE9还不支持。

1.5 浏览器支持的检查方法：

function loadDemo() { if(navigator.geolocation) { //supported

} else { //not supported } }

1.6 位置请求方式：

1.6.1 单次请求

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回调函数updateLocation接受一个对象参数，表示当前的地理位置，它有如下属性：

latitude——纬度 longitude——精度 accuracy——精确度，单位米 altitude——高度，单位米 altitudeAccuracy——高度的精确地，单位米 heading—运动的方向，相对于正北方向的角度 speed——运动的速度（假设你在地平线上运动），单位米/秒

回调函数handleLocationError接受错误对象，error.code是如下错误号。

UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内，你可以使用error.message获取错误详细信息。 PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置 POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置 TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数，属性如下：

enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。 timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。 maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。

参数使用的例子如下：

navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,

{timeout:10000});

1.6.2 重复请求

navigator.geolocation.watchPosition(updateLocation, handleLocationError); 使用 watchPosition可以持续获取地理位置，浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个watchID，使用navigator.geolocation.clearWatch(watchId)可以清除此次回调，使用不带参数的navigator.geolocation.clearWatch()清除说有watchPosition。

2. HTML5 离线功能

2.1 简介：

在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：

2.1.1 离线资源缓存：

需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。

2.1.2 在线状态检测：

开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。

2.1.3 本地数据存储（Web Sotrage API）：

离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

详情请参考：http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/（使用 HTML5 开发离线应用）

2.2 浏览器支持的情况：

浏览器支持情况：各大主流浏览器都已经实现了其中的很多功能。

3. Audio和Video标签

3.1 各浏览器对编码格式的支持：

两个标签的实际使用，请参考w3school的教程。

http://www.w3school.com.cn/html5/html5_audio.asp http://www.w3school.com.cn/html5/html5_video.asp

3.2 浏览器支持的检查方法：

var hasVideo = !!(document.createElement(‘video’).canPlayType);

3.3 标签使用方法：

<video src=”video.ogg”>

<object data=”videoplayer.swf” type=”application/x-shockwave-flash”>

<param name=”movie” value=”video.swf”/>

</object>

</video>

如果浏览器不支持HTML5的浏览器会载入flash标签，支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。

同样对于audio元素，不同的浏览器支持不同的格式，可以提供两种不同的格式供浏览器选择。

<audio controls>

<source src=”johann_sebastian_bach_air.ogg”>

<source src=”johann_sebastian_bach_air.mp3″>

An audio clip from Johann Sebastian Bach.

</audio>

4. WebSocket API

4.1 简介：

WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器可以主动传送数据给客户端

详细信息请查看：http://zh.wikipedia.org/zh-cn/WebSocket

4.2 浏览器支持的情况：

Chrome 4.0 supports Websockets.

Firefox 4.0 beta supports WebSockets.

Opera 11 (or 10.70) alpha also

Safari 5.0.2 supports them too

For other browsers it's not so clear.

4.3 浏览器支持的检查方法：

function loadDemo() {

if (window.WebSocket) {

//support HTML5 WebSocket

} else {

//not support HTML5 WebSocket

}

}

5. 跨文档消息机制（Cross Document Messaging）

5.1 简介：

PostMessage API 提供了跨越frame、tabs或windows通信的能力。

5.2 浏览器的支持情况：

5.3 浏览器支持的情况：

if (typeof window.postMessage === “undefined”) { // postMessage not supported in this browser }

6. XMLHttpRequest Level 2

6.1 简介：

HTML5中定义了XMLHttpRequest Level 2，它有两方面的增强：跨域通信，通信进度通知(progress events)

6.2 浏览器支持情况：

6.3 浏览器支持的检查方法：

var xhr = new XMLHttpRequest()

if (typeof xhr.withCredentials === undefined) {

//support HTML5 cross-origin XMLHttpRequest

} else {

//not support HTML5 cross-origin XMLHttpRequest

}

7. Web Worker API

7.1 简介：

Web Worker可以在单独的线程中JS代码，但由于浏览器的特性，WebWorker无法访问dom，只能通过特定的事件和postMessage API和主线程通信。Web Worker可以使用timer API，在一个Worker中也可以启动子Worker。 WebWorder非常适合运算密集型的操作。

7.2 浏览器支持的检查方法：

function loadDemo() { if (typeof(Worker) !== “undefined”) { //support HTML5 Web Workers”; } }

8. 其他HTML5支持的特性（部分未广泛支持）

Canvas、表单API、WebGL、3D Shaders（3D阴影）、Devices标签、Audio Data API、针对触摸屏设备的事件、点对点网络通信

9. 总结

Html 5 的这些新特性对我们创建丰富高效的 web 应用提供了很好的平台。我们可以尝试使用一些对我们项目有用的功能特性，走在 web 编程技术的最前沿。

第二章 CSS 3

CSS 3 的新特性一览可以参考文章：

http://www.blueidea.com/tech/web/2009/6930.asp

第三章 jQuery Mobile

1. 四大主流移动Web开发框架

1.1 iUI:

它是一个javascript和css库，用于在网页中模拟iphone的外观和感觉。虽然是专为iphone设计的UI,但在android上90%以上的功能是完全可以使用的，因为android和iphone一样，都是基于webkit浏览器的系统。

官方：http://code.google.com/p/iui/

1.2 jQTouch:

是一个用于移动web开发的jquery插件，支持iphone,ipod touch和其它一些基于webkit的系统。

官方：http://www.jqtouch.com/

1.3 Sencha Touch：

可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。

官方：http://www.sencha.com/products/touch/

1.4 jQuery Mobile:

也就是jquery针对移动设备的版本，上个月发布了jQuery Mobile Alpha 3。主要包括针对移动设备的 jquery core 和 jquery UI 。 支持目前主流的移动操作系统（android,iphone,Symbian,Blackbery,webOS等）。

选择哪个框架？

目前最主流的是jQuery Mobile 和 Sencha Touch 2个框架，关于两者的区别引用国外论坛的一个简单评价：

Sencha Touch is an application framework (you create your interface programmatically through Javascript) while jQuery Mobile is more of a mobile enhancement library (you write regular HTML for your content, then add jQuery mobile for transitions/animations). jQuery Mobile has an easier learning curve, but Sencha Touch can better simulate "native" apps.

主要意思是说 jQuery Mobile 更轻量级以及更简单的学习曲线。

综合来看选择 jQuery Mobile 对于我们快速创建应用更加方便。

2. 选择 jQuery Mobile

2.1 简介：

jQuery Mobile 给移动设备 Web 应用提供了一个 jQuery 核心库，并且提供了一个统一的 UI 框架。 jQuery Mobile 的其他优势有：

1. 基于 jQuery 核心库;兼容所有主流移动设备

2. 小巧(12KB)

3. 基于 HTML5/CSS3

4. 可用性和可访问性

5. 以及强大的 UI 框架

6. 使用 jQuery Mobile 搭建针对移动设备的 Web 应用, 开发者只需要负责 HTML 页面即可, 并且 jQuery Mobile 对 HTML 无侵害, 完全使用符合标准的 HTML5.

2.2 整合jQuery Moblie + Google Maps API v3的界面

1). 在android上的显示效果：

2). 在iphone上的显示效果：

从界面可以看出，使用jQuery Mobile 和 HTML 5 CSS 3技术开发出来的web程序界面效果和手机本地应用程序很像。

而且在不同平台下，只要手机浏览器支持HTML5，jQuery Mobile UI 框架都能帮我们做到兼容，免去很多适配的麻烦。

1. <inputnameinputname=”Button8_1″type=”button”
2. value=”IE”onclick=”javascript:gotoSubmit8_1()”/>
3. …
4. <scriptlanguagescriptlanguage=”javascript”>
5. functiongotoSubmit8_1(){
6. …
7. alert(window.event);//usewindow.event
8. …
9. }
10. </script>
11. IE&Firefox:
12. <inputnameinputname=”Button8_2″type=”button”
13. value=”IE”onclick=”javascript:gotoSubmit8_2(event)”/>
14. …
15. <scriptlanguagescriptlanguage=”javascript”>
16. functiongotoSubmit8_2(evt){
17. …
18. evtevt=evt?evt:(window.event?window.event:null);
19. alert(evt);//useevt
20. …
21. }
22. </script>

1. <framesrcframesrc=”xxx.html”id=”frameId”name=”frameName”/>

1. <body>
2. <scripttypescripttype=”text/javascript”>
3. document.body.onclick=function(evt){
4. evtevt=evt||window.event;
5. alert(evt);
6. }
7. </script>
8. </body>
9. IE&Firefox：
10. <body>
11. </body>
12. <scripttypescripttype=”text/javascript”>
13. document.body.onclick=function(evt){
14. evtevt=evt||window.event;
15. alert(evt);
16. }</script>

1. if(navigator.appName.indexOf(Explorer)>-1){
2. document.getElementById(‘element’).innerText=mytext;
3. }else{
4. document.getElementById(‘element’).textContent=mytext;
5. }

1. //向table追加一个空行：
2. varrow=otable.insertRow(-1);
3. varcell=document.createElement(td);
4. cell.innerHTML=;
5. cell.className=XXXX;
6. row.appendChild(cell);

$(document).ready(function(){ $.fn.CountDown({ bodyContent : 'showNum', //显示容器名 basicNum : 9280, //初始基数 timeStamp : 68, //递增数，每分钟递增 timeInterval :1000, //显示刷新间隔 startDate : new Date('2011/4/15 16:48'), //起始时间 txtFormat : '0000000', //显示长度，有多少0显示多少位 showZero : 1, //显示，不足0的是否补0，1补 0不补 wrap : '', modelUrl : http://pic.static.sdo.com/Woool/Woool_act/project/201104_4s/no_{1}.jpg', //显示形态 {1} 会被替换为0-9的数字， img_{1}.jpg被替换成img_0.jpg ... 图片显示倒计时时使用，纯数字则为{1} flashModel : 1 //是否需要刷新，0为只显示当前最后一次倒计时数据，1则会根据timeStamp，timeInterval 数据不断刷新倒计时 }); });

function Reflector() { Reflector.getType=function(obj) { if (obj == null) //null的类型 { return null; } else if (obj instanceof Object) //普通对象 { return obj.constructor; } else if (obj.tagName != null) //dom对象 { return obj.tagName; } else { return typeof(obj); } } Reflector.getAttributes=function(obj) { var methods = new Array(); for (idx in obj) { methods.push(new Type(obj[idx],ClassManager.getType(obj[idx]),idx)); } return methods; } Reflector.getAttributeNames=function(obj) { var methods = new Array(); for (idx in obj) { methods.push(idx); } return methods; } } //描述类型的类，entity是对象实体，type是对象类型，name是对象名称 function Type(entity, type, name) { this.Entity = entity; this.Type = type; this.Name = name; }

1.变量转换

看起来很简单，但据我所看到的，使用构造函数，像Array()或者Number()来进行变量转换是常用的做法。始终使用原始数据类型（有时也称为字面量）来转换变量，这种没有任何额外的影响的做法反而效率更高。

转换日期(new Date(myVar))和正则表达式(new RegExp(myVar))必须使用构造函数，而且创建正则表达式的时候要使用/pattern/flags的形式。

2.十进制转换为十六进制或者八进制，或者反过来

你是不是写个单独的函数来转换十六进制（或者八进制）呢？马上停下吧！有更容易的现成的函数可以用：

3.玩转数字

除了上一节介绍的之外，这里有更多的处理数字的技巧

4.Javascript版本检测

你知道你的浏览器支持哪一个版本的Javascript吗？如果不知道的话，去维基百科查一下Javascript版本表吧。出于某种原因，Javascript 1.7版本的某些特性是没有得到广泛的支持。不过大部分浏览器都支持了1.8版和1.8.1版的特性。（注：所有的IE浏览器（IE8或者更老的版本）只支持1.5版的Javascript）这里有一个脚本，既能通过检测特征来检测JavaScript版本，它还能检查特定的Javascript版本所支持的特性。

5.使用window.name进行简单会话处理

这个是我真的喜欢的东西。您可以为指定一个字符串作为window.name属性的值，直到您关闭该标签或窗口。虽然我没有提供任何脚本，但我强烈建议您如充分利用这个方法。举例来说，在建设一个网站或应用程序的时候，在调试和测试模式之间切换是非常有用的。

6.判断属性是否存在

这个问题包含两个方面，既有检查属性时候存在，还要获取属性的类型。但我们总是忽略了这些小事情:

当函数既有必选又有可选参数的时候，我们可能是这样做的：

而传递一个对象总是比传递一堆的参数更方便：

这只是一个把对象作为参数传递的一个很简单的例子，例如，我们还可以声明一个对象，变量名作为Key，默认值作为Value。

8.使用document.createDocumentFragment()

您可能需要动态地追加多个元素到文档中。然而，直接将它们插入到文档中会导致这个文档每次都需要重新布局一个，相反的，你应该使用文档碎片，建成后只追加一次：

9.为replace()方法传递一个函数

有的时候你想替换字符串的某个部分为其它的值，最好的方法就是给String.replace()传递一个独立的函数。下面是一个简单例子：

10.循环中标签的使用

有的时候，循环中又嵌套了循环，你可能想在循环中退出，则可以用标签：

JScript code

img.style.cssText = "position:absolute;border:0;padding:0;margin:0;-ms-interpolation-mode:nearest-neighbor;"
    + "z-index:" + (99999 - z) + ";width:" + width + "px;height:" + height + "px;"
    + "left:" + (((clientWidth - width) / 2 + opt.x) / clientWidth * 100).toFixed(5) + "%;"
    + "top:" + ((clientHeight - height - opt.y) / clientHeight * 100).toFixed(5) + "%;";

JScript code

layer = document.createElement("div");
layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";

JScript code

var moveScale = this.fixedFar ? scale : (1 - scale);

JScript code

function(z){ return 1 - z / 1000; }

JScript code

this.r = FL / (FL + (z * Z));

JScript code

function(z){ return 1/(1+z/常量); }

JScript code

layer.style[ css3Transform ] = "matrix("
    + ( Cos * scale).toFixed(5) + "," + (Sin * scale).toFixed(5) + ","
    + (-Sin * scale).toFixed(5) + "," + (Cos * scale).toFixed(5) + ", "
    + Math.round(x) + unit + ", " + Math.round(y) + unit + ")";

JScript code

<style>
.inner{ width:100px; height:100px; position:absolute; background:#0CF; zoom:0.5; top:50px; left:50px;}
.inner div{ width:50px; height:50px;position:absolute; left:25px;background:#CCC;}
</style>
<div style="width:150px;height:150px; border:1px solid #000; position:relative;">
<div class="inner" id="t"><div>test</div></div>
</div>

JScript code

left = Math.min(MAX, Math.max( -MAX, left )) | 0;
top = Math.min(MAX, Math.max( -MAX, top )) | 0;

JScript code

var original = img._original = img._original || {
    width: img.offsetWidth,    height: img.offsetHeight,
    left: img.offsetLeft,     top: img.offsetTop
};

JScript code

<style>
div,img{width:200px;height:200px;position:absolute;left:0;top:0;}
img{width:150px;height:150px;}
</style>
<div style="z-index:300;">
    <img style="background:#0C9;" alt="300" onclick="alert(300)">
</div>
<div style="z-index:100;">
    <img style="background:#396;left:50px;top:50px;" alt="100" onclick="alert(100)">
</div>

JScript code

<style>
div,img{width:200px;height:200px;position:absolute;left:0;top:0;}
img{width:150px;height:150px;}
</style>
<div>
    <img style="background:#0C9;z-index:300;" alt="300" onclick="alert(300)">
</div>
<div>
    <img style="background:#396;left:50px;top:50px;z-index:100;" alt="100" onclick="alert(100)">
</div>

JScript code

div{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);}

JScript code

img.onclick = function(){
    i3D._z = -options.z | 0;
    i3D._x = -options.x | 0;
    i3D._y = options.y | 0;
    i3D.show();
}

JScript code

var i3D = new Image3D( container, options );

JScript code

i3D.add( src, options );

JScript code

img.style.cssText = "position:absolute;border:0;padding:0;margin:0;-ms-interpolation-mode:nearest-neighbor;"
    + "z-index:" + (99999 - z) + ";width:" + width + "px;height:" + height + "px;"
    + "left:" + (((clientWidth - width) / 2 + opt.x) / clientWidth * 100).toFixed(5) + "%;"
    + "top:" + ((clientHeight - height - opt.y) / clientHeight * 100).toFixed(5) + "%;";

JScript code

layer = document.createElement("div");
layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";

JScript code

var moveScale = this.fixedFar ? scale : (1 - scale);

JScript code

function(z){ return 1 - z / 1000; }

JScript code

this.r = FL / (FL + (z * Z));

JScript code

function(z){ return 1/(1+z/常量); }

JScript code

layer.style[ css3Transform ] = "matrix("
    + ( Cos * scale).toFixed(5) + "," + (Sin * scale).toFixed(5) + ","
    + (-Sin * scale).toFixed(5) + "," + (Cos * scale).toFixed(5) + ", "
    + Math.round(x) + unit + ", " + Math.round(y) + unit + ")";

JScript code

<style>
.inner{ width:100px; height:100px; position:absolute; background:#0CF; zoom:0.5; top:50px; left:50px;}
.inner div{ width:50px; height:50px;position:absolute; left:25px;background:#CCC;}
</style>
<div style="width:150px;height:150px; border:1px solid #000; position:relative;">
<div class="inner" id="t"><div>test</div></div>
</div>

JScript code

left = Math.min(MAX, Math.max( -MAX, left )) | 0;
top = Math.min(MAX, Math.max( -MAX, top )) | 0;

JScript code

var original = img._original = img._original || {
    width: img.offsetWidth,    height: img.offsetHeight,
    left: img.offsetLeft,     top: img.offsetTop
};

JScript code

<style>
div,img{width:200px;height:200px;position:absolute;left:0;top:0;}
img{width:150px;height:150px;}
</style>
<div style="z-index:300;">
    <img style="background:#0C9;" alt="300" onclick="alert(300)">
</div>
<div style="z-index:100;">
    <img style="background:#396;left:50px;top:50px;" alt="100" onclick="alert(100)">
</div>

JScript code

<style>
div,img{width:200px;height:200px;position:absolute;left:0;top:0;}
img{width:150px;height:150px;}
</style>
<div>
    <img style="background:#0C9;z-index:300;" alt="300" onclick="alert(300)">
</div>
<div>
    <img style="background:#396;left:50px;top:50px;z-index:100;" alt="100" onclick="alert(100)">
</div>

JScript code

div{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);}

JScript code

img.onclick = function(){
    i3D._z = -options.z | 0;
    i3D._x = -options.x | 0;
    i3D._y = options.y | 0;
    i3D.show();
}

JScript code

var i3D = new Image3D( container, options );

JScript code

i3D.add( src, options );

Gecko

Presto

Webkit

• jQuery官方网站：http://jquery.com/
• jQuery官方为全面介绍jQuery 1.4建立的网站，希望人们能用14天来了解它：http://jquery14.com/
• jQuery 1.4 官方API文档（包括1.4版本中新添加的和更改的函数）：http://api.jquery.com/category/version/1.4/

• jQuery 1.4 API Cheat Sheet（在线版、pdf版、png版）：http://futurecolors.ru/jquery/
• jQuery 1.4中文API文档（chm版）：http://www.cnblogs.com/kuku-1/archive/2010/01/22/1654318.html
• jquery 1.4手持设备版手册（如在IPhone上看）

• jQuery 1.4 Released: The 15 New Features you Must Know 中文译文：jQuery 1.4 发布：15个新特性实例精讲
• coolnalu翻译的jQuery 1.4官方文档中文版
• jQuery源码在线查看（可按方法搜索）（英文）
• jQuery 1.4 选择器在线测试（英文）
• 理解jQuery 1.4中的$.proxy()函数（英文）
• 深入浅出地解释jQuery 1.4中的$.param()函数（英文）
• 理解jQuery 1.4中的easing函数（英文）
• 理解jQuery 1.4中的.closest(Array)函数（英文）
• 在jQuery 1.4中index()函数更酷了（英文）
• jQuery中的事件委托（英文）
• jQuery事件：MouseOver / MouseOut vs. MouseEnter / MouseLeave（英文）

• jQuery压缩版本（23kb，gzip压缩后）
• jQuery未压缩版本（154kb）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

1. 为一些方法添加设置函数（Setter Functions）在之前版本中，我们可以给attr()方法传入一个函数，将函数的返回值赋予某个属性。1.4中，这个功能被添加到了更多的方法中：.css()、 .attr()、 .val()、 .html()、 .text()、 .append()、.prepend()、 .before()、 .after()、.replaceWith(), .wrap()、 .wrapInner()、 .offset()、 .addClass()、 .removeClass()、 .toggleClass()。此外，在下面方法中，还可以传入当前值作为设置函数的第二个参数，供设置函数使用：.css()、.attr()、.val()、.html()、.text()、.append()、.prepend()、.offset()、.addClass()、.removeClass()、和 .toggleClass()。例如：

   jQuery('<img src="enter.png" alt="enter your name" />')
   .attr("alt", function(index, value) {
       return "Please, " + value;
   });

2. 更新了jQuery中序列化的核心方法jQuery.param()之前对于{foo: ["bar", "baz"]}序列化后的结果是“foo=bar&foo=baz”，现在为“foo[]=bar&foo[]=baz”。 这样更改的目的主要是告诉接收端，传入的是一个数组对象。
3. 在jQuery.ajax中可在不指定dataType属性时，会根据response的content-type自动识别。 例如：ajax请求返回的对象是json类型（application/json），则dataType会自动指定为”json”（不指定的情况下）。
4. 在jQuery.ajax请求中，添加对Etag的支持。之前jQuery在ajax请求中是在header中不发送If-None-Match值的（也就是不支持Etag），也就默认忽略了浏览器缓存。现在可以通过指定ifModified属性开启它。提示：如果您不了解http header的相关知识，推荐阅读这篇文章。
5. 使用原生的JSON.parse，对json进行严格解析在1.3及更早版本中，jQuery通过javascript的eval方法来解析json对象。在1.4中，如果你用的浏览器支持，则会使用原生的JSON.parse进行json对象解析，这样对json对象的书写验证则更为严格。如：{foo: “bar”}的写法将不会被验证为合法的json对象，必须写成{”foo”: “bar”}。如果你的程序打算升级到1.4版本，那么这一点要尤其注意了。
6. 在使用.serialize() 序列化时，添加对HTML5元素的支持
7. 为ajax请求添加上下文支持，参考jQuery.ajax()

   jQuery.ajax({
       url: "test.html",
       context: document.body,
       success: function(){
           jQuery(this).addClass("done");
       }
   });

8. 在jQuery.ajax()请求时，接收XMLHttpRequest对象作为success的第三个参数
9. 在ajax请求时，总是设定Content-Type属性在1.3版本中，如果ajax发送的数据为空时，则不发送Content-Type属性值，1.4中则总是显式设定Content-Type值。这是因为有些程序后端通过Content-Type值判断如何响应。
10. 当用jsonp方式进行ajax请求时，可以显式指定callback的名称之前jsonp的callback名称是由jQuery生成的随机名称，现在可以通过jsonpCallback参数显式指定
11. 部分CSS相关方法被重写。其中，.css()方法效率有两倍的提升， .addClass()、.removeClass()和.hasClass()效率有三倍的提升。.toggleClass() 方法可以一次切换多个class

    $("div").toggleClass("current active");

12. 在jQuery 1.4中，许多dom操作相关方法在性能上大幅提升其中.append()、 .prepend()、.before()、和 .after() 的性能被改善， .html() 的性能提升了近3倍。 .remove() 和 .empty()的性能提升了近4倍。
13. jQuery(”tag”)效率有所提升当传入一个tag名称进行寻找时，搜索算法有所改进 。
14. 使用id开始的选择器获取元素的速度进一步提升类似于jQuery(’#id p’)这样以id开始的选择器获取元素的速度有所优化，速度是最快的。
15. jQuery()（或$()）将返回jQuery空对象在之前当调用jQuery()时，默认返回的是document的jQuery对象，也就是等价于jQuery(’document’)。在1.4版本中将不再做这样的转换，直接返回jQuery空对象。在1.4中，之前jQuery().ready()的写法不建议使用（虽然仍然可以用），应当写作jQuery(document).ready()或jQuery(function(){})
16. 添加了新事件.focusin()和.focusout().focusin()和.focusout()方法等价于focus()和blur()方法，不同的是支持事件冒泡。需要注意的是focus()和blur()事件依然不可以通过live()方法绑定。
17. 几乎所有事件都支持live()绑定除了ready、focus（用focusin替代）、blur（用focusout替代）事件外的所有事件都支持live绑定
18. jQuery 1.4对内部结构重新组织，并开始建立代码风格规范之前的core.js被划分为attribute.js, css.js, data.js, manipulation.js, traversing.js和queue.js。ready事件被移至core.js中。jQuery 1.4开始建立了代码风格规范，大多数核心代码符合这一规范。虽然这个规范仅有几条，但我相信这是一个良好的开端。

    1、奥巴马来中国，一共4天上海就占了1天。上海，在外国人眼里是中国，在中国人眼里是外国。有网友说“如果让周立波接见奥巴马会怎么样？”我说，奥巴马会掏出一张拉登的照片给我，然后说“拿伊组特！” 

    2、什么是和谐？和，禾木旁代表粮食，口就是嘴巴，代表人人有饭吃；谐，言字旁就是说话，皆就是大家，代表人人都可以说话。和谐就是人人有饭吃、人人能说话。 

    3、中国是美国最大的债权国，持有8000亿美国国债，穷人借钱给富人，所以大家马路上看到美国人跟你挥手打招呼“Hi”的时候，跟他说“Hi什么Hi、还钱还钱！” 

    4、很多北京人喜欢我，想请我去北京演出，我不去，我说你们要是喜欢我就坐飞机来上海看我，这样还能拉动上海的GDP。 

    5、房价，成为老百姓心中永远的痛。汤臣一品几年前卖10万一平方，没人买，今年涨到16万一平方还卖出去好几套。为什么说跟老百姓没关系？16万打个对折8万一平方，你会去买吗？照样买不起，再在8万上面打个骨折价，4万一平米，还是买不起。这样的房子送给我我也不要，因为付不起物业管理费。 

    6、白领是什么意思？就是领来工资全部用掉，全部“白领”。无欲则刚，在单位里卑躬屈膝的人都是有按揭贷款要还的人。日本人为什么那么有礼貌，因为他们都是有贷款的。 

    7、帮领导做100件好事不如和领导一起做1件坏事。 

    8、春晚的主流观众是9亿农民，如果说周立波是上海人民的小菜，那么赵本山就是全国人民的北方水饺。 

    9、40岁前，财务没有实现充分自由前不要买房。在上海滩买一套300万的房子，都买不到什么好地方，手机信号都不清楚。首付150万，自己出100万，剩下50万问父母要就是啃老族，向朋友借就连朋友也做不了了，如果你不想和一个人交朋友那就问他借钱，如果你不再把一个朋友当作兄弟那就叫他还钱。还有150万问银行借款，就算利率打7折，每个月也要还给银行7,298.53元，30年一共要还给银行利息2,627,470.80元。262万多！银行是侬爷？有这个钞票侬还不如给爷娘。 

    10、什么是按揭？按揭就是把你按在地上一层层揭你的皮，有一种残忍是用温柔的方式表达的。 

    11、我敢断言，但我绝不负责，上海的房子5年内一定翻一番，但这个和老百姓没关系。 

    12、钞票只有用掉了以后才是你的，打开皮夹子，看看没有用掉的钞票，上面印的是“中国人民银行”，跟你没关系。 

    13、当你有了人生第一个100万的时候，这些钱都是你的；当你有了人生第一个1000万的时候，其中有20%被这个社会所控股，因为你要承担社会责任；当你拥有资产过亿了之后，这些钱是你的吗？不是你的了！你只是帮这个社会在管理资产，管得不好你就是黄光裕。 

    14、中国人爱什么什么就遭殃，爱孩子孩子就要吃家什。 

    15、当教育和金钱挂钩的时候，老师变成了老板，学生变成了学徒，而家长就变成了ATM提款机。 

    16、保姆比大学生好就业，可以在10分钟内给自己涨3次工资。陈国庆家里要找个保姆，开始说好价钱每个月1800元，后来保姆一进小区，看到小区又大又漂亮，提出工资涨到2000一个月，再随后进了陈国庆的家门，一看到墙上挂的陈国庆巨幅照片，马上又涨到3000一个月。 

    17、有些基金在宣传的时候说，去年收益30%，什么什么排名第一。但是一年变化有多大？一年前阿扁还是台湾一哥，现在他吃伟哥也没有用了。 

    18、不管是什么人，睡觉只需要半张床的位置就够了，如果睡相差一点一张床也足够了，不会因为你是李嘉诚就要睡2000张床，都可以在上面打滚了。 

    19、现在南汇那里人把猫全送走了，当地老鼠过马路看到红绿灯都不停的，直接窜过去，逢人就说“阿拉外国亲眷要来啦！” 

    20、中国的股市已经不是股市，是事故。股市应该不是战斗机，而是民航机，理论上出事的概率应该比中国足球冲出亚洲的概率还要低。 

    21、股民赚钱都是听到的，亏钱都是自己碰到的。牛市来的时候不相信，熊市来的时候不承认。 

    22、创业板变成了闯祸板，已经走得太远太远了，叫也叫不回来了，叫回来也废掉了。 

    23、从6124点往下看，我们都是熊的传人。 

    24、股市点位和离婚率有关，2000点以下时离婚率正常，到了3000点以上离婚率有所上升，到了6000点以上离婚率创新高。 

    25、当你失败了，就把它作为人生财富；成功了，就是财富人生。 

    支持正版，抵制盗版，喜欢波波的话，那就去看他的演出或是买他的书吧！

function  init()  {      //  代码从这里开始      //  任何变量声明都会成为调用对象的属性      //  如此不会破坏全局命名空间. } init();   //  不要忘了调用这个函数哦!

( function ()  {   //  这个函数没有名字.      //  代码从这里开始      //  任何变量声明都会成为调用对象的属性      //  如此不会破坏全局命名空间. } )();           // 结束函数直接量,并调用该函数.

var  x  =   " global " ; function  f()  {      var  x  =   " local " ;      function  g()  { alert(x); }     g(); } f();   //  调用这个函数显示 "local"

//  每次调用这个函数的时候返回一个函数 //  函数被定义的作用域在每次调用时都不同 function  makefunc(x)  {      return   function ()  {  return  x; } } //  调用几次 makefunc() , 把结果保存到数组中: var  a  =  [makefunc( 0 ), makefunc( 1 ), makefunc( 2 )]; //  现在调用这些函数并显示结果. //  尽管函数体是相同的,但是作用域是不同的,所以每次调用返回不同的结果: alert(a[ 0 ]());   //  Displays 0 alert(a[ 1 ]());   //  Displays 1 alert(a[ 2 ]());   //  Displays 2

        但是,嵌套函数改变了这些.如果嵌套函数被创建,这个函数的定义引用调用对象,因为这个调用对象是函数被定义的作用域链的顶部.如果嵌套函数只是被外层函数使用,对嵌套函数的唯一引用在调用对象里.当外层函数返回时,只有嵌套函数引用调用对象,调用对象引用嵌套函数,除此之外,再也没有其它的什么引用任何一个,因此,这两个对象就只能被GC使用了.

//  每次调用返回一个不同的整数 uniqueID  =   function ()  {      if  ( ! arguments.callee.id) arguments.callee.id  =   0 ;      return  arguments.callee.id ++ ; } ;

uniqueID  =  ( function ()  {   //  这个函数的调用对象保存值      var  id  =   0 ;            //  这是私有恒久的那个值      //  外层函数返回一个有权访问恒久值的嵌套的函数      //  那就是我们保存在变量uniqueID里的嵌套函数.      return   function ()  {  return  id ++ ; } ;   //  返回,自加. } )();  //  在定义后调用外层函数.

//  这个函数为对象o的指定名称的属性添加了访问方法 //  方法名为:get<name>和set<name>. //  如果提供了一个判断函数,setter方法将在保存前判断参数是不是有效的 //  如果检验失败,setter方法抛出一个异常 //  这个函数的与众不同之处在于,用getter和setter方法操作的属性值并不是存储在对象o里面, //  相反的,值被存储在函数的局部变量里. //  getter和setter方法也被定义为函数的局部方法,因此有权访问这个局部变量. //  注意:对于两个访问方法,该值是私有的,除了setter方法,无法修改或设置它. function  makeProperty(o, name, predicate)  {      var  value;   //  This is the property value      //  getter方法只是简单的返回值.     o[ " get "   +  name]  =   function ()  {  return  value; } ;      //  setter保存值,如果校验失败则抛出异常     o[ " set "   +  name]  =   function (v)  {          if  (predicate  &&   ! predicate(v))              throw   " set "   +  name  +   " : invalid value  "   +  v;          else             value  =  v;     } ; } //  下面的代码演示makeProperty() 方法. var  o  =   {} ;   //  这是一个空对象 //  添加属性访问方法getName() 和 setName() //  确保只允许字符串值 makeProperty(o,  " Name " ,  function (x)  {  return   typeof  x  ==   " string " ; } ); o.setName( " Frank " );   //  设置属性值 print(o.getName());   //  获得属性值 o.setName( 0 );         //  试图设置错误类型的值

1.Blueprint Grid CSS Generator

2.Variable Grid System

3.YUI CSS Grid Builder

4.Grid System Generator

5.Grid Generator by DesignByGrid

6.Grid Generator by netProtozo

7.Grid Designer (featured in Creative Review magazine)

8.Grid Layout Generator by Pagecolumn

9.YAML Builder

10.Layout Generators by Pagecolumn

11.Fisheye

12.CSS Layout Generator by CSSCreator

13.Firdamatic

14.CSS Source Ordered Variable Border 1-3 Columned Page Maker

15.CSS Layout Generator by CSSPortal